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

在devdevs内部，将一个IIFE getCompletions注入到页面中，当在Devtools控制台中按下某个键时调用该IIFE。

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

通过使用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);
});

一个简单的解决方案！

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

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

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

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

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

当您说它是客户端时，它发生在服务器控制之外，因此您无能为力。如果您问为什么Facebook仍会这样做，这并不是出于安全性考虑，而是要保护不了解javascript的普通用户免于在控制台中运行代码（他们不知道如何阅读）。对于承诺在您执行他们要求做的事后提供自动相似服务或其他Facebook功能机器人的网站，这种情况很常见，在大多数情况下，它们会为您提供一小段可在控制台中运行的JavaScript。

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

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

并且如果浏览器在地址栏上禁用了javascript，（将代码粘贴到Google Chrome浏览器中的地址栏时，它将删除短语“ javascript：”），则仍然可以通过inspect元素将javascript粘贴到链接之一中。

检查锚点：

将代码粘贴到href中：

最重要的是应该首先进行服务器端验证和安全性，然后再进行客户端验证。

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以引发安全性错误。

我使用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功能（有关格式化输出的提示）