How does Facebook disable the browser's integrated Developer Tools?

So apparently because of the recent scams, the developer tools is exploited by people to post spam and even used to "hack" accounts. Facebook has blocked the developer tools, and I can't even use the console.

在这里输入图片说明

How did they do that?? One Stack Overflow post claimed that it is not possible, but Facebook has proven them wrong.

Just go to Facebook and open up the developer tools, type one character into the console, and this warning pops up. No matter what you put in, it will not get executed.

How is this possible?

They even blocked auto-complete in the console:

在这里输入图片说明


I'm a security engineer at Facebook and this is my fault. We're testing this for some users to see if it can slow down some attacks where users are tricked into pasting (malicious) JavaScript code into the browser console.

Just to be clear: trying to block hackers client-side is a bad idea in general; this is to protect against a specific social engineering attack.

If you ended up in the test group and are annoyed by this, sorry. I tried to make the old opt-out page (now help page) as simple as possible while still being scary enough to stop at least some of the victims.

The actual code is pretty similar to @joeldixon66's link; ours is a little more complicated for no good reason.

Chrome wraps all console code in

with ((console && console._commandLineAPI) || {}) {
  <code goes here>
}

... so the site redefines console._commandLineAPI to throw:

Object.defineProperty(console, '_commandLineAPI',
   { get : function() { throw 'Nooo!' } })

This is not quite enough (try it!), but that's the main trick.


Epilogue: The Chrome team decided that defeating the console from user-side JS was a bug and fixed the issue, rendering this technique invalid. Afterwards, additional protection was added to protect users from self-xss.


I located the Facebook's console buster script using Chrome developer tools. Here is the script with minor changes for readability. I have removed the bits that I could not understand:

Object.defineProperty(window, "console", {
    value: console,
    writable: false,
    configurable: false
});

var i = 0;
function showWarningAndThrow() {
    if (!i) {
        setTimeout(function () {
            console.log("%cWarning message", "font: 2em sans-serif; color: yellow; background-color: red;");
        }, 1);
        i = 1;
    }
    throw "Console is disabled";
}

var l, n = {
        set: function (o) {
            l = o;
        },
        get: function () {
            showWarningAndThrow();
            return l;
        }
    };
Object.defineProperty(console, "_commandLineAPI", n);
Object.defineProperty(console, "__commandLineAPI", n);

With this, the console auto-complete fails silently while statements typed in console will fail to execute (the exception will be logged).

References:

  • Object.defineProperty
  • Object.getOwnPropertyDescriptor
  • Chrome's console.log function (for tips on formatting output)

  • I couldn't get it to trigger that on any page. A more robust version of this would do it:

    window.console.log = function(){
        console.error('The developer console is temp...');
        window.console.log = function() {
            return false;
        }
    }
    
    console.log('test');
    

    To style the output: Colors in JavaScript console

    Edit Thinking @joeldixon66 has the right idea: Disable JavaScript execution from console « ::: KSpace :::

    链接地址: http://www.djcxy.com/p/20472.html

    上一篇: 禁用Internet Explorer缓存以进行网站开发

    下一篇: Facebook如何禁用浏览器的集成开发人员工具?