Todos hemos estado allí. Aterrizó en un sitio web solo para ser abofeteado con un modal que se parecía al siguiente:
Hola oscuridad mi vieja amiga.
Para mí, eso desencadena una reacción instintiva: maldición por darles una página vista, cerrar la pestaña y nunca regresar. Pero también existe ese caso extraño en el que podríamos intentar obtener la información detrás de ese modal. Entonces, el siguiente paso en esta situación es abrir DevTools para eliminar el modo y la superposición, y tal vez algunas otras cosas inútiles que abarrotan la página mientras estamos en eso.
Aquí es donde esa página comienza a incursionar en el mal.
Es posible que no podamos acceder a DevTools a través de “Inspeccionar elemento” porque el menú contextual puede estar deshabilitado. Ese es fácil, solo les toma una línea de código:
addEventListener('contextmenu', e => e.preventDefault(), false);Pero bueno, no hay problema, para eso están los atajos de teclado, ¿verdad? Correcto … a menos que haya un poco de JavaScript en la línea del siguiente en ejecución:
addEventListener('keydown', e => {
if(e.keyCode === 123 /* F12: Chrome, Edge dev tools */ ||
(e.shiftKey && e.ctrlKey && (
e.keyCode === 73 /* + I: Chrome, FF dev tools */ ||
e.keyCode === 67 /* + C: Chrome, FF inspect el */ ||
e.keyCode === 74 /* + J: Chrome, FF console */ ||
e.keyCode === 75 /* + K: FF web console */ ||
e.keyCode === 83 /* + S: FF debugger */ ||
e.keyCode === 69 /* + E: FF network */ ||
e.keyCode === 77 /* + M: FF responsive design mode */)) ||
(e.shiftKey && (
e.keyCode === 118 /* + F5: Firefox style editor */ ||
e.keyCode === 116 /* + F5: Firefox performance */)) ||
(e.ctrlKey && e.keyCode === 85 /* + U: Chrome, FF view source */)) {
e.preventDefault();
}
}, false);Aún así, no se puede hacer nada con los menús del navegador. ¡Eso finalmente traerá DevTools para nosotros! ¡Hurra! Elimina esos horribles nodos y … mira cómo se actualiza la página porque hay un observador de mutaciones atento a tales acciones. Algo parecido al fragmento de código a continuación:
addEventListener('DOMContentLoaded', e => {
let observer = new MutationObserver((records) => {
let reload = false;
records.forEach((record) => {
record.removedNodes.forEach((node) => {
if(node.id === 'overlay' && !validCustomer())
reload = true;
});
if(reload)
window.location.reload(true);
});
});
observer.observe(
document.documentElement, {
attributes: true,
childList: true,
subtree: true,
attributeOldValue: true,
characterData: true
}
);
});“¡Esto es la guerra!” modo activado! Muy bien, ¡solo cambia los estilos modales y superpuestos entonces! Excepto, todos los estilos están en línea, con !important además de eso, no hay forma de que podamos anularlo todo sin tocar eso style atributo.
¡Oh, la! Importancia de todo …
Algunas personas pueden recordar cómo 256 clases anulan una identificación, pero esto ha cambiado en los navegadores WebKit mientras tanto (aunque todavía sucede en Edge y Firefox) y 256 ID nunca podrían anular un estilo en línea de todos modos.
Bueno, solo cambia el style atributo entonces. Sin embargo, otra “sorpresa” aguarda: también hay un poco de JavaScript pendiente de los cambios de atributos:
if(record.type === 'attributes' &&
(record.target.matches &&
record.target.matches('body, #content, #overlay')) &&
record.attributeName === 'style' && !validCustomer())
reload = true;Entonces, a menos que haya algunos estilos que puedan ayudarnos a eliminar la superposición del camino que la persona que codificó esta cosa horrible no pudo configurar en línea, no podemos superar esto modificando style atributos.
Lo primero que debe buscar es el display propiedad como establecer eso para none en la superposición resuelve todos los problemas. Luego está el combo de position y z-index. Incluso si se establecen en línea en la superposición real, si no están en línea en el contenido real debajo de la superposición, entonces tenemos la opción de establecer un valor aún mayor. z-index regla de valor para el contenido y colóquela encima de la superposición. Sin embargo, es muy poco probable que alguien se pierda de configurarlos.
Si compensa (top, right, bottom, left) no están integrados, podrían ayudarnos a quitar la superposición de la página y lo mismo ocurre con margin o translate propiedades. De manera similar, incluso si se establecen en línea en la superposición, pero no en el contenido real y en el padre tanto de la superposición como del contenido, entonces podemos cambiar este padre lateralmente con algo como 100vw y luego vuelva a mostrar solo el contenido.
Al final del día, incluso una combinación de opacity y pointer-events podría funcionar.
Sin embargo, si la persona que codificó la superposición molesta no perdió la configuración de ninguno de estos en línea y tenemos ese poco de JS … no podemos jugar con los estilos en línea sin hacer que la página se vuelva a cargar.
¡Pero espera! Hay algo que puede anular los valores en línea con !important, algo que muchos probablemente se perderán … y eso es @keyframe animaciones! Agregar el siguiente bit de CSS en una nueva o ya existente style elemento trae la superposición y modal detrás del contenido real:
#overlay { animation: a 1s infinite }
@keyframes a { { 0%, to { z-index: -1 } } }Sin embargo, puede haber un poco de JavaScript que nos impida agregar nuevos style o link elementos (para hacer referencia a una hoja de estilo externa) o modificar los ya existentes para incluir el bit de CSS anterior, como se puede ver aquí.
if(record.type === 'characterData' &&
record.target.parentNode.tagName.toLowerCase() === 'style')
reload = true;
record.addedNodes.forEach((node) => {
if(node.matches &&
node.matches('style:not([data-href]), link[rel="stylesheet"]'))
reload = true;
});Vea el Pen Cómo ser malvado (pero no lo hagas) de Ana Tudor (@thebabydino) en CodePen.
Pero si ya existe una hoja de estilo externa, podríamos agregar nuestra parte de CSS allí y guardar para verificar los cambios en una requestAnimationFrame loop, no hay forma de detectar tal cambio (se ha hablado de un observador de mutación de estilo, pero actualmente no tenemos nada por el estilo).
Por supuesto, el animation La propiedad también se puede establecer en línea para none, lo que nos impediría utilizar esta solución.
Pero en ese caso, aún podríamos deshabilitar JavaScript y eliminar la superposición y modal. O simplemente vea la fuente de la página a través del menú del navegador. La conclusión es: si el contenido ya está allí, detrás de la superposición, no hay absolutamente ninguna forma segura de evitar el acceso a él. Pero intentarlo de todos modos es una forma segura de hacer que la gente te maldiga.
Escribí este artículo porque en realidad experimenté algo similar recientemente. Finalmente llegué al contenido. Simplemente tomó más tiempo y me hizo odiar a quienquiera que codificara esa cosa.
Se podría argumentar que estas superposiciones son bastante eficientes cuando se trata de detener a las personas no técnicas, que constituyen la gran mayoría de los visitantes de un sitio web, pero cuando se toman la molestia de intentar evitar que aparezcan DevTools, eliminaciones de nodos, estilo cambios y cosas por el estilo, y empaquetan todo el JavaScript que hace esto en hexadecimal además de todo, no están tratando de detener solo a las personas no técnicas.