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

JavaScript

卡卡西卡卡西

2020-03-09

显然,由于最近的骗局,开发人员工具被人们用来发布垃圾邮件,甚至被用来“破解”帐户。Facebook阻止了开发人员工具,我什至无法使用该控制台。

在此处输入图片说明

他们是怎么做到的??一位Stack Overflow帖子声称这是不可能的,但Facebook已证明它们是错误的。

只需转到Facebook并打开开发人员工具,在控制台中输入一个字符,就会弹出此警告。不管您输入什么内容,都不会执行它。

这怎么可能?

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

在此处输入图片说明

第235篇《Facebook如何禁用浏览器的集成开发人员工具?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
Itachi凯 2020.03.09

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

乐Mandy 2020.03.09

一个简单的解决方案!

setInterval(()=>console.clear(),1500);
小小Itachi 2020.03.09

自从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(){};
}
梅小哥 2020.03.09

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

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

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

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

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

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

在此处输入图片说明

在此处输入图片说明

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

检查锚点:

在此处输入图片说明

将代码粘贴到href中:

在此处输入图片说明

在此处输入图片说明

在此处输入图片说明

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

宝儿猿 2020.03.09

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

布雷西 2020.03.09

我使用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);

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

参考文献:

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android