How does Facebook disable the browser s integrated Developer Tools

Question

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

User · Accepted Answer

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  amp  amp  console  commandLineAPI              lt code goes here gt          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

User · Answer

an simple solution   setInterval     gt console clear   1500

User · Answer

This is not a security measure for weak code to be left unattended  Always get a permanent solution to weak code and secure your websites properly before implementing this strategy  The best tool by far according to my knowledge would be to add multiple javascript files that simply changes the integrity of the page back to normal by refreshing or replacing content  Disabling this developer tool would not be the greatest idea since bypassing is always in question since the code is part of the browser and not a server rendering  thus it could be cracked    Should you have js file one checking for  lt element gt  changes on important elements and js file two and js file three checking that this file exists per period you will have full integrity restore on the page within the period    Lets take an example of the 4 files and show you what I mean    index html      lt  DOCTYPE html gt      lt html gt      lt head id  mainhead  gt      lt script src  ks js  id  ksjs  gt  lt  script gt      lt script src  mainfile js  id  mainjs  gt  lt  script gt      lt link rel  stylesheet  href  style css  id  style  gt      lt meta id  meta1  name  description  content  Proper mitigation against script kiddies via Javascript   gt      lt  head gt      lt body gt      lt h1 id  heading  name  dontdel  value  2  gt Delete this from console and it will refresh  If you change the name attribute in this it will also refresh  This is mitigating an attack on attribute change via console to exploit vulnerabilities  You can even try and change the value attribute from 2 to anything you like  If This script says it is 2 it should be 2 or it will refresh   lt  h1 gt      lt h3 gt Deleting this wont refresh the page due to it having no integrity check on it lt  h3 gt       lt p gt You can also add this type of error checking on meta tags and add one script out of the head tag to check for changes in the head tag  You can add many js files to ensure an attacker cannot delete all in the second it takes to refresh  Be creative and make this your own as your website needs it       lt  p gt       lt p gt This is not the end of it since we can still enter any tag to load anything from everywhere  Dependent on headers etc  but we want to prevent the important ones like an override in meta tags that load headers  The console is designed to edit html but that could add potential html that is dangerous  You should not be able to enter any meta tags into this document unless it is as specified by the ks js file as permissable   lt br gt This is not only possible with meta tags but you can do this for important tags like input and script  This is not a replacement for headers    Add your headers aswell and protect them with this method  lt  p gt      lt  body gt      lt script src  ps js  id  psjs  gt  lt  script gt      lt  html gt    mainfile js     setInterval function           check for existence of other scripts  This part will go in all other files to check for this file aswell      var ksExists   document getElementById  ksjs        if ksExists        else  location reload          var psExists   document getElementById  psjs       if psExists        else  location reload          var styleExists   document getElementById  style       if styleExists        else  location reload              1   1000      1   1000 milsec   ps js       This script checks if mainjs exists as an element  If main js is not existent as an id in the html file reload You can add this to all js files to ensure that your page integrity is perfect every second  If the page integrity is bad it reloads the page automatically and the process is restarted  This will blind an attacker as he has one second to disable every javascript file in your system which is impossible             setInterval function           check for existence of other scripts  This part will go in all other files to check for this file aswell      var mainExists   document getElementById  mainjs        if mainExists        else  location reload            check that heading with id exists and name tag is dontdel     var headingExists   document getElementById  heading        if headingExists        else  location reload         var integrityHeading   headingExists getAttribute  name       if integrityHeading     dontdel         else  location reload         var integrity2Heading   headingExists getAttribute  value       if integrity2Heading     2         else  location reload           check that all meta tags stay there    var meta1Exists   document getElementById  meta1        if meta1Exists        else  location reload          var headExists   document getElementById  mainhead        if headExists        else  location reload             1   1000      1   1000 milsec   ks js       This script checks if mainjs exists as an element  If main js is not existent as an id in the html file reload  You can add this to all js files to ensure that your page integrity is perfect every second  If the page integrity is bad it reloads the page automatically and the process is restarted  This will blind an attacker as he has one second to disable every javascript file in your system which is impossible             setInterval function           check for existence of other scripts  This part will go in all other files to check for this file aswell      var mainExists   document getElementById  mainjs        if mainExists        else  location reload           Check meta tag 1 for content changes  meta1 will always be 0  This you do for each meta on the page to ensure content credibility  No one will change a meta and get away with it  Addition of a meta in spot 10  say a meta after the id  meta10  should also be covered as below     var x   document getElementsByTagName  meta   0      var p   x getAttribute  name       var s   x getAttribute  content       if  p     description        location reload            if   s     Proper mitigation against script kiddies via Javascript        location reload               This will prevent a meta tag after this meta tag   id  meta1   This prevents new meta tags from being added to your pages  This can be used for scripts or any tag you feel is needed to do integrity check on like inputs and scripts   Yet again  It is not a replacement for headers to be added  Add your headers aswell      var lastMeta   document getElementsByTagName  meta   1      if  lastMeta       location reload               1   1000      1   1000 milsec   style css  Now this is just to show it works on all files and tags aswell      heading      background-color red         If you put all these files together and build the example you will see the function of this measure  This will prevent some unforseen injections should you implement it correctly on all important elements in your index file especially when working with PHP   Why I chose reload instead of change back to normal value per attribute is the fact that some attackers could have another part of the website already configured and ready and it lessens code amount  The reload will remove all the attacker s hard work and he will probably go play somewhere easier   Another note  This could become a lot of code so keep it clean and make sure to add definitions to where they belong to make edits easy in future  Also set the seconds to your preferred amount as 1 second intervals on large pages could have drastic effects on older computers your visitors might be using

User · Answer

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  laquo       KSpace

User · Answer

Netflix also implements this feature   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                    They just override console  commandLineAPI to throw security error

User · Answer

Besides redefining console  commandLineAPI  there are some other ways to break into InjectedScriptHost on WebKit browsers  to prevent or alter the evaluation of expressions entered into the developer s console   Edit   Chrome has fixed this in a past release  - which must have been before February 2015  as I created the gist at that time    So here s another possibility  This time we hook in  a level above  directly into InjectedScript rather than InjectedScriptHost as opposed to the prior version    Which is kind of nice  as you can directly monkey patch InjectedScript  evaluateAndWrap instead of having to rely on InjectedScriptHost evaluate as that gives you more fine-grained control over what should happen    Another pretty interesting thing is  that we can intercept the internal result when an expression is evaluated and return that to the user instead of the normal behavior    Here is the code  that does exactly that  return the internal result when a user evaluates something in the console   var is  Object defineProperty Object prototype   lastResult       get function           return this  lR           set function v          if  typeof this  commandLineAPIImpl   object   is this         this  lR v           setTimeout function       var ev is  evaluateAndWrap     is  evaluateAndWrap function           var res ev apply is arguments          console log           if  arguments 2     completion                  This is the path you end up when a user types in the console and autocompletion get s evaluated               Chrome expects a wrapped result to be returned from evaluateAndWrap               You can use  ev  to generate an object yourself               In case of the autocompletion chrome exptects an wrapped object with the properties that can be autocompleted  e g                 iGetAutoCompleted  true               You would then go and return that object wrapped  like              return ev call  is         test true      completion   true  false  true                Would make  test  pop up for every autocompletion               Note that syntax as well as every Object prototype property get s added to that list later               so you won t be able to exclude things like  while  from the autocompletion list               unless you wou d find a way to rewrite the getCompletions function                           return res    Return the autocompletion result  If you want to break that  return nothing or an empty object          else                This is the path where you end up when a user actually presses enter to evaluate an expression               In order to return anything as normal evaluation output  you have to return a wrapped object                In this case  we want to return the generated remote object                Since this is already a wrapped object it would be converted if we directly return it  Hence                return result  would actually replicate the very normal behaviour as the result is converted               to output what s actually in the remote object  we have to stringify it and  evaluateAndWrap  that object again                This is quite interesting             return ev call  is  null        JSON stringify  res          console   true  false  true                   0     It s a bit verbose  but I thought I put some comments into it  So normally  if a user  for example  evaluates  1 2 3 4  you d expect the following output      After monkeypatching InjectedScript  evaluateAndWrap evaluating the very same expression  gives the following output      As you see the little-left arrow  indicating output  is still there  but this time we get an object  Where the result of the expression  the array  1 2 3 4  is represented as an object with all its properties described   I recommend trying to evaluate this and that expression  including those that generate errors  It s quite interesting    Additionally  take a look at the is - InjectedScriptHost - object  It provides some methods to play with and get a bit of insight into the internals of the inspector    Of course  you could intercept all that information and still return the original result to the user    Just replace the return statement in the else path by a console log  res  following a return res  Then you d end up with the following       End of Edit      This is the prior version which was fixed by Google  Hence not a possible way anymore   One of it is hooking into Function prototype call  Chrome evaluates the entered expression by calling its eval function with InjectedScriptHost as thisArg  var result   evalFunction call object  expression    Given this  you can listen for the thisArg of call being evaluate and get a reference to the first argument  InjectedScriptHost   if  window URL        var ish   call   Function prototype call      Function prototype call   function        Could be wrapped in a setter for  commandLineAPI  to redefine only when the user started typing          if  arguments length  gt  0  amp  amp  this name      evaluate   amp  amp  arguments  0  constructor name      InjectedScriptHost       If thisArg is the evaluate function and the arg0 is the ISH             ish   arguments 0               ish evaluate   function  e      Redefine the evaluation behaviour                 throw new Error   Rejected evaluation of   n      e split    n   slice 1 -1  join    n                                       Function prototype call    call    Reset the Function prototype call             return  call apply this  arguments                          You could e g  throw an error  that the evaluation was rejected      Here is an example where the entered expression gets passed to a CoffeeScript compiler before passing it to the evaluate function

User · Answer

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

User · Answer

My simple way  but it can help for further variations on this subject  List all methods and alter them to useless     Object getOwnPropertyNames console  filter function property         return typeof console property      function        forEach function  verb         console verb   function   return  Sorry  for security reasons

User · Answer

Chrome changed a lot since the times facebook could disable console      As per March 2017 this doesn t work anymore    Best you can do is disable some of the console functions  example   if  window console  window console       var methods     log    debug    warn    info    dir    dirxml    trace    profile    for var i 0 i lt methods length i         console methods i     function

User · Answer

I would go along the way of   Object defineProperty window   console       get  function             set  function

User · Answer

This is actually possible since Facebook was able to do it  Well  not the actual web developer tools but the execution of Javascript in console   See this  How does Facebook disable the browser  39 s integrated Developer Tools   This really wont do much though since there are other ways to bypass this type of client-side security   When you say it is client-side  it happens outside the control of the server  so there is not much you can do about it  If you are asking why Facebook still does this  this is not really for security but to protect normal users that do not know javascript from running code  that they don t know how to read  into the console  This is common for sites that promise auto-liker service or other Facebook functionality bots after you do what they ask you to do  where in most cases  they give you a snip of javascript to run in console   If you don t have as much users as Facebook  then I don t think there s any need to do what Facebook is doing   Even if you disable Javascript in console  running javascript via address bar is still possible       and if the browser disables javascript at address bar   When you paste code to the address bar in Google Chrome  it deletes the phrase  javascript    pasting javascript into one of the links via inspect element is still possible   Inspect the anchor     Paste code in href         Bottom line is server-side validation and security should be first  then do client-side after

User · Answer

Internally devtools injects an IIFE named getCompletions into the page  called when a key is pressed inside the Devtools console    Looking at the source of that function  it uses a few global functions which can be overwritten   By using the Error constructor it s possible to get the call stack  which will include getCompletions when called by Devtools     Example    x000D   x000D  const disableDevtools   callback   gt    x000D    const original   Object getPrototypeOf  x000D   x000D    Object getPrototypeOf       args    gt    x000D      if  Error   stack includes  getCompletions    callback    x000D      return original    args   x000D       x000D     x000D   x000D  disableDevtools      gt    x000D    console error  devtools has been disabled    x000D   x000D    while  1   x000D      x000D   x000D   x000D

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

Examples related to javascript

Examples related to facebook

Examples related to google-chrome-devtools