Facebook 如何禁用浏览器的集成开发者工具？

Question

显然，由于最近的骗局，开发人员工具被人们利用来发布垃圾邮件，甚至被用来“破解”帐户。 Facebook已经屏蔽了开发者工具，我什至不能使用控制台。

他们是怎么做到的？？ 一篇 Stack Overflow 帖子声称这是不可能的，但 Facebook 已经证明他们错了。

只需去 Facebook 并打开开发者工具，在控制台中输入一个字符，就会弹出此警告。 无论你输入什么，它都不会被执行。

这怎么可能？

他们甚至阻止了控制台中的自动完成功能：

Answer 1

我是 Facebook 的安全工程师，这是我的错。 我们正在为一些用户测试此功能，看看它是否可以减缓某些攻击，这些攻击会诱使用户将（恶意）JavaScript 代码粘贴到浏览器控制台中。

需要明确的是：试图在客户端阻止黑客通常是一个坏主意； 这是为了防止特定的社会工程攻击。

如果你最终进入了测试组并且对此感到恼火，抱歉。 我试图使旧的选择退出页面（现在是帮助页面）尽可能简单，同时仍然足够吓人以阻止至少一些受害者。

实际代码与@joeldixon66 的链接非常相似； 我们的有点复杂，没有充分的理由。

Chrome 将所有控制台代码封装在

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

...所以该站点重新定义了console._commandLineAPI以抛出：

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

这还不够（尝试一下！） ，但这是主要技巧。

---

尾声：Chrome 团队认为从用户端 JS 击败控制台是一个错误并修复了该问题，使该技术无效。 之后，添加了额外的保护以 保护用户免受 self-xss 。

Answer 2

我使用 Chrome 开发人员工具找到了 Facebook 的控制台破坏脚本。 这是为了提高可读性而进行了细微更改的脚本。 我已经删除了我无法理解的部分：

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);

这样，控制台自动完成会静默失败，而在控制台中键入的语句将无法执行（将记录异常）。

参考：

• Object.defineProperty
• Object.getOwnPropertyDescriptor
• Chrome 的 console.log 函数（关于格式化输出的提示）

Answer 3

我无法让它在任何页面上触发它。 一个更强大的版本可以做到：

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

console.log('test');

输出样式： JavaScript 控制台中的颜色

编辑思维@joeldixon66有正确的想法： 从控制台禁用 JavaScript 执行« :: KSpace :::

Answer 4

除了重新定义console._commandLineAPI ，还有一些其他方法可以在 WebKit 浏览器上闯入 InjectedScriptHost，以防止或更改输入到开发人员控制台的表达式的计算。

编辑：

Chrome 在过去的版本中修复了这个问题。 - 必须在 2015 年 2 月之前，因为我当时创建了要点

所以这是另一种可能性。 这一次，我们将上一层直接连接到InjectedScript而不是InjectedScriptHost ，而不是之前的版本。

这很好，因为您可以直接修补InjectedScript._evaluateAndWrap而不必依赖InjectedScriptHost.evaluate因为这可以让您更精细地控制应该发生的事情。

另一个非常有趣的事情是，我们可以在计算表达式时拦截内部结果并将其返回给用户而不是正常行为。

这是代码，正是这样做的，当用户在控制台中评估某些内容时返回内部结果。

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);

有点冗长，但我想我在里面加了一些评论

因此，通常情况下，例如，如果用户评估[1,2,3,4]您会期望以下输出：

在monkeypatching InjectedScript._evaluateAndWrap评估完全相同的表达式后，给出以下输出：

如您所见，表示输出的小左箭头仍然存在，但这次我们得到了一个对象。 在表达式的结果中，数组[1,2,3,4]表示为一个对象，并描述了其所有属性。

我建议尝试评估这个和那个表达式，包括那些产生错误的表达式。 这很有趣。

此外，看看is - InjectedScriptHost -对象。 它提供了一些方法来使用并深入了解检查器的内部结构。

当然，您可以截取所有这些信息并仍将原始结果返回给用户。

只需通过替换其他路径return语句console.log (res)之后的return res 。 然后你会得到以下结果。

编辑结束

---

这是由 Google 修复的先前版本。 因此不再是一种可能的方式。

其中之一是挂钩到Function.prototype.call

Chrome 使用InjectedScriptHost作为thisArg call其 eval 函数来评估输入的表达式

var result = evalFunction.call(object, expression);

鉴于此，您可以监听正在evaluate的call的thisArg并获取对第一个参数（ 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 > 0 && this.name === "evaluate" && 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);  
        }
    };
}

例如，您可以抛出一个错误，即评估被拒绝。

_{这是一个示例，其中输入的表达式在将其传递给evaluate函数之前先传递给 CoffeeScript 编译器。}

Answer 5

Netflix 也实现了这个功能

(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$$) {
    }
})();

他们只是覆盖console._commandLineAPI来抛出安全错误。

Answer 6

这实际上是可能的，因为 Facebook 能够做到这一点。 好吧，不是实际的 Web 开发人员工具，而是在控制台中执行 Javascript。

请参阅： Facebook 如何禁用浏览器的集成开发人员工具？

这确实不会做太多，因为还有其他方法可以绕过这种类型的客户端安全性。

当您说它是客户端时，它发生在服务器的控制之外，因此您无能为力。 如果您问为什么 Facebook 仍然这样做，这实际上并不是为了安全，而是为了保护不了解 javascript 的普通用户将代码（他们不知道如何阅读）运行到控制台中。 这对于承诺自动点赞服务或其他 Facebook 功能机器人的网站很常见，在您完成他们要求您做的事情后，在大多数情况下，他们会给您一小段 javascript 以在控制台中运行。

如果你没有 Facebook 那么多的用户，那么我认为没有必要做 Facebook 正在做的事情。

即使您在控制台中禁用 Javascript，仍然可以通过地址栏运行 javascript。

如果浏览器在地址栏中禁用了 javascript，（当您将代码粘贴到 Google Chrome 中的地址栏中时，它会删除短语“javascript:”）通过检查元素将 javascript 粘贴到链接之一仍然是可能的。

检查锚点：

在 href 中粘贴代码：

底线是服务器端验证和安全性应该是第一，然后是客户端。

Answer 7

自从 facebook 可以禁用控制台以来，Chrome 发生了很大变化......

截至 2017 年 3 月，这不再有效。

您能做的最好的事情是禁用一些控制台功能，例如：

if(!window.console) window.console = {};
var methods = ["log", "debug", "warn", "info", "dir", "dirxml", "trace", "profile"];
for(var i=0;i<methods.length;i++){
    console[methods[i]] = function(){};
}

Answer 8

我的简单方法，但它可以帮助进一步改变这个主题。 列出所有方法并将它们更改为无用。

  Object.getOwnPropertyNames(console).filter(function(property) {
     return typeof console[property] == 'function';
  }).forEach(function (verb) {
     console[verb] =function(){return 'Sorry, for security reasons...';};
  });

Answer 9

内部devtools名为内喷射的IIFE getCompletions到网页中，当一个键被按下的Devtools控制台内部调用。

查看该函数的来源，它使用了一些可以覆盖的全局函数。

通过使用Error的构造有可能获得调用堆栈，其中包括getCompletions时Devtools调用。

---

例子：

 const disableDevtools = callback => { const original = Object.getPrototypeOf; Object.getPrototypeOf = (...args) => { if (Error().stack.includes("getCompletions")) callback(); return original(...args); }; }; disableDevtools(() => { console.error("devtools has been disabled"); while (1); });

Answer 10

一个简单的解决方案！

setInterval(()=>console.clear(),1500);

Answer 11

我会走这条路：

Object.defineProperty(window, 'console', {
  get: function() {

  },
  set: function() {

  }
});

Answer 12

大家好，请注意， Facebook 不要这样做
这只是一个试图吓唬客户的虚假策略。

默认情况下，此代码在页面加载时写入控制台，无论您是否打开控制台，如果您打开，那么您会看到红色的“停止”字样... :)

他们只是重写控制台功能，你可以打开控制台并重写所有这些：|
因为警报功能或所有其他 js 功能仍然可以正常工作。

您可以通过以下代码检测打开的非独立开发人员工具：

function isConsoleOpen(){
if((window.outerWidth - window.innerWidth)>100){return true;}
if((navigator.platform=="Win32")&&(navigator.userAgent.indexOf("Windows ")==-1)){return true;}else{return false;}}

用于单独的开发人员工具打开检测
您必须有一个在 window.blur 上处于活动状态的策略，并检查是否有任何函数被调用（除了每隔一段时间从服务器加载数据的函数......）然后算法可以检测到客户端正在单独的开发工具中工作。

简单的解决方案：将此代码添加到您的主要 js 函数中：

if (document.hasFocus()) {...}

硬解：
将额外的代码片段添加到您代码的所有 js 函数中

Answer 13

我这里有一个简单的方法： window.console = function () {}

Answer 14

在 Firefox 中它不会这样做，因为 Firefox 是开发者浏览器，我认为因为命令WEBGL_debug_renderer_info is deprecated in Firefox and will be removed. Please use RENDERER WEBGL_debug_renderer_info is deprecated in Firefox and will be removed. Please use RENDERER和错误Referrer Policy: Less restricted policies, including 'no-referrer-when-downgrade', 'origin-when-cross-origin' and 'unsafe-url', will be ignored soon for the cross-site request: https://static.xx.fbcdn.net/rsrc.php/v3/yS/r/XDDAHSZfaR6.js?_nc_x=Ij3Wp8lg5Kz 。

Answer 15

这不是让弱代码无人看管的安全措施。 在实施此策略之前，始终获得弱代码的永久解决方案并正确保护您的网站

据我所知，目前最好的工具是添加多个 javascript 文件，这些文件通过刷新或替换内容简单地将页面的完整性恢复到正常状态。 禁用这个开发者工具并不是最好的主意，因为绕过总是有问题的，因为代码是浏览器的一部分而不是服务器渲染，因此它可能会被破解。

如果您让js file one检查重要元素上的<element>更改，而js file two和js file three检查每个时间段是否存在此文件，您将在该时间段内在页面上进行完整的完整性恢复。

让我们以 4 个文件为例，向您展示我的意思。

索引.html

   <!DOCTYPE html>
   <html>
   <head id="mainhead">
   <script src="ks.js" id="ksjs"></script>
   <script src="mainfile.js" id="mainjs"></script>
   <link rel="stylesheet" href="style.css" id="style">
   <meta id="meta1" name="description" content="Proper mitigation against script kiddies via Javascript" >
   </head>
   <body>
   <h1 id="heading" name="dontdel" value="2">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. </h1>
   <h3>Deleting this wont refresh the page due to it having no integrity check on it</h3>

   <p>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. 
   </p>

   <p>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. <br>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.</p>
   </body>
   <script src="ps.js" id="psjs"></script>
   </html>

主文件.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

js.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

样式文件

现在这只是为了表明它也适用于所有文件和标签

   #heading {
   background-color:red;
   }

如果将所有这些文件放在一起并构建示例，您将看到此度量的功能。 如果您在索引文件中的所有重要元素上正确实现它，这将防止一些不可预见的注入，尤其是在使用 PHP 时。

为什么我选择重新加载而不是将每个属性更改回正常值是这样一个事实，即某些攻击者可能已经配置并准备好了网站的另一部分，这会减少代码量。 重装将消除攻击者的所有辛勤工作，他可能会去更容易的地方玩。

另一个注意事项：这可能会变成很多代码，因此请保持干净，并确保将定义添加到它们所属的位置，以便将来轻松进行编辑。 还将秒数设置为您喜欢的数量，因为大页面上的 1 秒间隔可能会对您的访问者可能使用的旧计算机产生巨大影响