¿Cómo deshabilita Facebook las herramientas de desarrollador integradas del navegador?

1685

Aparentemente, debido a las estafas recientes, las herramientas de desarrollo son explotadas por personas para publicar spam e incluso se utilizan para "hackear" cuentas. Facebook ha bloqueado las herramientas de desarrollador, y ni siquiera puedo usar la consola.

Ingrese la descripción de la imagen aquí

¿Cómo hicieron eso? Una publicación de Stack Overflow afirmó que no es posible , pero Facebook ha demostrado que están equivocados.

Simplemente vaya a Facebook y abra las herramientas de desarrollador, escriba un personaje en la consola y aparecerá esta advertencia. No importa lo que pones, no se ejecutará.

¿Cómo es esto posible?

Incluso bloquearon el autocompletado en la consola:

Ingrese la descripción de la imagen aquí

Derek 朕 會 功夫
fuente
21
Solo por diversión: console.log = function () {}
tnt-rox
¿Encontró la solución de cómo bloquearon la función de autocompletar en la consola?
Akshay Hegde
1
@AkshayHegde Fue un efecto secundario causado por el bloqueo de cualquier ejecución de código de las herramientas de desarrollo.
Derek 朕 會 功夫
@Derek 朕 會 功夫 ¿puedes compartir el código?
Akshay Hegde
solo para tu información, ya no está bloqueado en Chrome.
John Lord

Respuestas:

2438

Soy ingeniero de seguridad en Facebook y esto es mi culpa. Estamos probando esto para que algunos usuarios vean si puede ralentizar algunos ataques en los que se engaña a los usuarios para que peguen código JavaScript (malicioso) en la consola del navegador.

Para ser claros: tratar de bloquear a los hackers del lado del cliente es una mala idea en general; Esto es para proteger contra un ataque específico de ingeniería social .

Si terminó en el grupo de prueba y está molesto por esto, lo siento. Traté de hacer que la antigua página de exclusión (ahora página de ayuda ) sea lo más simple posible, sin dejar de ser lo suficientemente aterradora como para detener al menos a algunas de las víctimas.

El código real es bastante similar al enlace de @ joeldixon66 ; el nuestro es un poco más complicado sin ninguna buena razón.

Chrome envuelve todo el código de la consola en

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

... entonces el sitio redefine console._commandLineAPIpara lanzar:

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

Esto no es suficiente (¡pruébalo!) , Pero ese es el truco principal.


Epílogo: El equipo de Chrome decidió que derrotar la consola del JS del lado del usuario era un error y solucionó el problema , lo que invalidaba esta técnica. Posteriormente, se agregó protección adicional para proteger a los usuarios de self-xss .

Alf
fuente
10
Chrome hizo una actualización, pero este tipo hizo una solución nuevamente: kspace.in/blog/2014/06/21/…
Roger Gajraj
3
@Alf, su página de exclusión ahora muestra la página de ayuda sin ninguna posibilidad de desactivar esta protección.
arm.localhost
168
No rompa las herramientas de desarrollador debido a la estupidez de algunos usuarios. "Soluciones" como esta me hacen arder con rabia de un millón de soles.
Jonathan Dunlap
85
Creo que Google necesita lanzar una versión "segura" de Chrome, no DevTools, y obligar a cualquier persona en las actualizaciones automáticas a cambiar a esta versión solo una vez. Cualquier desarrollador que realmente note la diferencia y necesite DevTools debe descargar la versión "aterradora". De hecho, etiquételos como "Miedo" y "Seguro" directamente en la página de descarga y disuada a los darwinianos de hacerse daño al declarar explícitamente que "Es probable que esté aquí porque un ataque de ingeniería social le indicó que descargue la versión Miedo; por favor no lo haga". hacer esto." ¡Dios los bendiga, desarrolladores de FB por ser tan creativos!
MonkeyZeus
11
@ n00b Ese mensaje de advertencia es solo a console.log.
gcampbell
91

Encontré la secuencia de comandos de la consola de Facebook usando las herramientas de desarrollador de Chrome. Aquí está el script con cambios menores para facilitar la lectura. He eliminado los bits que no podía entender:

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

Con esto, el autocompletado de la consola falla en silencio mientras que las declaraciones escritas en la consola no se ejecutarán (se registrará la excepción).

Referencias

Salman A
fuente
48

No pude lograr que activara eso en ninguna página. Una versión más robusta de esto lo haría:

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

console.log('test');

Para aplicar estilo a la salida: Colores en la consola de JavaScript

Edit Thinking @ joeldixon66 tiene la idea correcta: deshabilitar la ejecución de JavaScript desde la consola «::: KSpace :::

Será
fuente
genial, pero aún así anula el mismo window.console.log = function(){//empty}y usa console.log
super genial
32

Además de redefinir console._commandLineAPI, hay otras formas de entrar en InjectedScriptHost en los navegadores WebKit, para evitar o alterar la evaluación de las expresiones ingresadas en la consola del desarrollador.

Editar:

Chrome ha solucionado esto en una versión anterior. - que debe haber sido antes de febrero de 2015, ya que creé la esencia en ese momento

Así que aquí hay otra posibilidad. Esta vez nos conectamos, un nivel por encima, directamente en InjectedScriptlugar de InjectedScriptHostoponernos a la versión anterior.

Lo cual es bastante bueno, ya que puedes usar el parche directamente en InjectedScript._evaluateAndWraplugar de tener que confiar, InjectedScriptHost.evaluateya que eso te da un control más preciso sobre lo que debería suceder.

Otra cosa bastante interesante es que podemos interceptar el resultado interno cuando se evalúa una expresión y devolverla al usuario en lugar del comportamiento normal.

Aquí está el código, que hace exactamente eso, devuelve el resultado interno cuando un usuario evalúa algo en la consola.

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

Es un poco detallado, pero pensé ponerle algunos comentarios

Entonces, normalmente, si un usuario, por ejemplo, evalúa [1,2,3,4], esperaría el siguiente resultado:

ingrese la descripción de la imagen aquí

Después de que monkeypatching InjectedScript._evaluateAndWrapevalúa la misma expresión, da el siguiente resultado:

ingrese la descripción de la imagen aquí

Como puede ver, la pequeña flecha izquierda, que indica la salida, todavía está allí, pero esta vez obtenemos un objeto. Donde el resultado de la expresión, la matriz [1,2,3,4]se representa como un objeto con todas sus propiedades descritas.

Recomiendo tratar de evaluar esta y aquella expresión, incluidas las que generan errores. Es bastante interesante.

Además, echa un vistazo a la is - InjectedScriptHost- objeto. Proporciona algunos métodos para jugar y obtener un poco de información sobre los aspectos internos del inspector.

Por supuesto, puede interceptar toda esa información y aún así devolver el resultado original al usuario.

Simplemente reemplace la declaración de retorno en la ruta else por una console.log (res)siguiente a return res. Entonces terminarías con lo siguiente.

ingrese la descripción de la imagen aquí

Fin de Editar


Esta es la versión anterior que fue corregida por Google. Por lo tanto, ya no es posible.

Uno de ellos está enganchado Function.prototype.call

Chrome evalúa la expresión ingresada al callusar su función eval con InjectedScriptHostasthisArg

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

Teniendo en cuenta esto, se puede escuchar a la thisArgdel callser evaluatey obtener una referencia al primer argumento ( 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);  
        }
    };
}

Podría, por ejemplo, arrojar un error, que la evaluación fue rechazada.

ingrese la descripción de la imagen aquí

Aquí hay un ejemplo donde la expresión ingresada se pasa a un compilador CoffeeScript antes de pasarla a la evaluatefunción.

Moritz Roessler
fuente
25

Netflix también implementa esta característica

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

Simplemente anulan console._commandLineAPIpara arrojar un error de seguridad.

Fizer Khan
fuente
24

Esto es realmente posible ya que Facebook pudo hacerlo. Bueno, no las herramientas reales de desarrollador web, sino la ejecución de Javascript en la consola.

Vea esto: ¿Cómo deshabilita Facebook las herramientas de desarrollador integradas del navegador?

Sin embargo, esto realmente no hará mucho, ya que hay otras formas de eludir este tipo de seguridad del lado del cliente.

Cuando dice que es del lado del cliente, sucede fuera del control del servidor, por lo que no hay mucho que pueda hacer al respecto. Si se pregunta por qué Facebook sigue haciendo esto, esto no es realmente por seguridad sino para proteger a los usuarios normales que no conocen JavaScript del código (que no saben leer) en la consola. Esto es común para los sitios que prometen el servicio de auto-me gusta u otros bots de funcionalidad de Facebook después de hacer lo que le piden que haga, donde en la mayoría de los casos, le dan un fragmento de javascript para ejecutar en la consola.

Si no tienes tantos usuarios como Facebook, entonces no creo que sea necesario hacer lo que Facebook está haciendo.

Incluso si deshabilita Javascript en la consola, es posible ejecutar javascript a través de la barra de direcciones.

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

y si el navegador deshabilita javascript en la barra de direcciones, (cuando pega código en la barra de direcciones en Google Chrome, elimina la frase 'javascript:') pegar javascript en uno de los enlaces a través del elemento de inspección aún es posible.

Inspeccionar el ancla:

ingrese la descripción de la imagen aquí

Pegar código en href:

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

La conclusión es la validación del lado del servidor y la seguridad debe ser lo primero, luego el lado del cliente después.

Jomar Sevillejo
fuente
11

Chrome cambió mucho desde que Facebook podía desactivar la consola ...

Según marzo de 2017, esto ya no funciona.

Lo mejor que puede hacer es deshabilitar algunas de las funciones de la consola, por ejemplo:

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(){};
}
Alpha2k
fuente
9

Mi manera simple, pero puede ayudar a otras variaciones sobre este tema. Enumere todos los métodos y modifíquelos a inútiles.

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

Internamente, devtools inyecta un IIFE nombrado getCompletionsen la página, llamado cuando se presiona una tecla dentro de la consola de Devtools.

Mirando la fuente de esa función , utiliza algunas funciones globales que pueden sobrescribirse.

Al usar el Errorconstructor, es posible obtener la pila de llamadas, que incluirá getCompletionscuando Devtools lo llame.


Ejemplo:

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

samdd
fuente
Eso es bastante bueno, pero también bloquea la página.
Derek 朕 會 功夫
@Derek 朕 會 功夫 Única forma (que he encontrado) de suprimir más entradas del usuario
samdd
Me pregunto si puedes lanzar un error en lugar de usar un bucle infinito. Editar: Probado, no funciona.
Derek 朕 會 功夫
@Derek 朕 會 功夫 está en un bloque de prueba. Probablemente podría anular las funciones sobre el bloque, pero solo evitaría la finalización automática (no la evaluación)
samdd
2

Una solución simple!

setInterval(()=>console.clear(),1500);
Mohmmad Ebrahimi Aval
fuente
1
¿Cómo deshabilita esto console.log()?
Rojo
1
console.log()ya no importa cuando la consola se limpia constantemente :)
Mohmmad Ebrahimi Aval
esta es una mala idea. el hacker puede rastrear desde su terminal y ver todos los registros.
GFxJamal
44
y si
marca
0

Yo seguiría el camino de:

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

  },
  set: function() {

  }
});
Zibri
fuente
-2

Esta no es una medida de seguridad para que el código débil se deje desatendido. Siempre obtenga una solución permanente para el código débil y asegure sus sitios web correctamente antes de implementar esta estrategia

Según mi conocimiento, la mejor herramienta sería agregar múltiples archivos javascript que simplemente cambien la integridad de la página a la normalidad al actualizar o reemplazar el contenido. Deshabilitar esta herramienta de desarrollador no sería la mejor idea, ya que omitirlo siempre está en duda, ya que el código es parte del navegador y no un servidor de representación, por lo que podría romperse.

Si debe js file oneverificar los <element>cambios en elementos importantes js file twoy js file threecomprobar que este archivo existe por período, tendrá una restauración de integridad completa en la página dentro del período.

Tomemos un ejemplo de los 4 archivos y muestre lo que quiero decir.

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

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

Ahora, esto es solo para mostrar que también funciona en todos los archivos y etiquetas

   #heading {
   background-color:red;
   }

Si reúne todos estos archivos y crea el ejemplo, verá la función de esta medida. Esto evitará algunas inyecciones imprevistas si la implementa correctamente en todos los elementos importantes de su archivo de índice, especialmente cuando trabaja con PHP.

La razón por la que elegí volver a cargar en lugar de volver al valor normal por atributo es el hecho de que algunos atacantes podrían tener otra parte del sitio web ya configurada y lista, y disminuye la cantidad de código. La recarga eliminará todo el trabajo duro del atacante y probablemente irá a jugar a un lugar más fácil.

Otra nota: esto podría convertirse en una gran cantidad de código, así que manténgalo limpio y asegúrese de agregar definiciones a su lugar para facilitar las ediciones en el futuro. También configure los segundos a su cantidad preferida ya que los intervalos de 1 segundo en páginas grandes podrían tener efectos drásticos en las computadoras más antiguas que sus visitantes podrían estar usando


fuente
esto ... este no es un buen enfoque.
RozzA