Disable the User’s JavaScript Console

By  on  

There are a few giant companies out there, namely Facebook and Netflix, who have decided to effectively disable a user's ability to execute JavaScript console commands.  The decision was initially made by Facebook to prevent users from executing a specific set of commands which would expose user information via the JavaScript console (the message was sent to all Facebook users via a massive SPAM message).  Of course this has been subject to loads of criticism, but before I weigh in, here's the code to do it:

// It appears Netflix is following (Facebook's lead)[https://news.ycombinator.com/item?id=7222129].

(function() {
    try {
        var $_console$$ = console;
        Object.defineProperty(window, "console", {
            get: function() {
                if ($_console$$._commandLineAPI)
                    throw "Sorry, for security reasons, the script console is deactivated on netflix.com";
                return $_console$$
            },
            set: function($val$$) {
                $_console$$ = $val$$
            }
        })
    } catch ($ignore$$) {
    }
})();

Not that my opinion matters much, but I actually think this practice somewhat legit.  From their perspective, if disabling the consoles helps to temporarily prevent an issue, you have to do it.  In the long term, it's really not a good idea; they may become a target simply based on their effort to block people out.  Regardless, this code seems to work so if you want to prevent console executions, this will do it.

Recent Features

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    MooTools HTML Police: dwMarkupMarine

    We've all inherited rubbish websites from webmasters that couldn't master valid HTML. You know the horrid markup: paragraph tags with align attributes and body tags with background attributes. It's almost a sin what they do. That's where dwMarkupMarine comes in.

  • By
    Duplicate the jQuery Homepage Tooltips Using Dojo

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using Dojo. The XHTML The above HTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

Discussion

  1. I’m sure you can still get around this by injecting your own node but I can fully understand this practice.

  2. gregg

    why all the $_$$ in your variable names?

  3. Untitled
    javascript:window.console2 = (function () {
    var globals = [],
    iframe = document.createElement(‘iframe’),
    cleanWindow;
    
    iframe.src = ‘about:blank’;
    iframe.style.display = ‘none’;
    document.body.appendChild(iframe);
    
    return (iframe.contentWindow || iframe.contentDocument).console;
    }());
    
    Object.defineProperty(window, “console”, {
    get: function () { return window.console2; }
    })
    

    s/var/window sorry :)

  4. Asmor

    I had no idea that Object.defineProperty was even a thing. That’s awesome!

    @gregg: Presumably to avoid namespacing issues, although that’s kind of stupid since this code is already in a closure.

  5. Can’t a developer set a breakpoint and step over/ shortcut this?

    • TJ

      Yes. This is why doing anything for security reasons in javascript is a waste of time, especially if it makes it harder to maintain the code.

    • Yeah, but this is just to prevent non-developers from pasting malicious JS into their own browser consoles.

    • But what if the code is uglified?

    • Why would you uglify it?

    • Jessy Cormier

      Why wouldn’t you uglify live code…?

  6. You have made a good point here David, especially in the wake of people not taking this blocking too kindly. My reservation is this. If you’re blocking anything, do it tastefully. If you open up the console on FB and try to type something, you ll immediately see an ugly message that roughly translates to ‘Get lost’. They could ve easily done some mumbo jumbo that informs the person nicely about the block and made some JS Object variable available to experiment their site with. Khan Academy does something similar (they dont block the usage of console) but they do encourage you take a look at their KA object.

    The physical address of the Facebook offices is 1 Hacker Way. So make some way for the hackers on your site!

    • randomlygeneratedname

      why do you want to open up the console in facebook anyway?

  7. rud

    let the cat and mouse chase begin !

  8. Jeff K

    If you open up the console in Facebook they provide a link. From there they let you enable it.

  9. I can understand their perspective to some degree…great post David, very interesting!

  10. suprsidr

    firebug console still works on both.

  11. Gerson Goulart

    I think Facebook (and Netflix) are not trying to prevent knowledgeable people to look into their website’s code. The point is to prevent people with no knowledge to harm themselves by following a hacker steps in a scam (Self XSS).

    If you know how to circumvent the block (with a solution such as “Untitled” posted here), or if you know how to install Firebug, than you do have way more than enough knowledge to use all the power of the console in a manner that is safe for yourself. It’s not likely that any corporation would even bother to prevent you to do that.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!