¿Por qué no se ejecuta <script>? (Entidades HTML y defensa XSS)

Si escribes <script>alert('hacked');</script> en un cuadro de comentarios en un sitio web, ¿qué sucede?

En la mayoría de los sitios web seguros, el script no se ejecuta; en cambio, la cadena de texto se muestra exactamente como se escribió.

Los navegadores normalmente interpretan < como el inicio de una etiqueta. Entonces, ¿cómo saben mostrarlo como texto en lugar de ejecutarlo como código?

El secreto reside en las Entidades HTML.

1. El Dilema de los Caracteres Reservados

En HTML, caracteres como <, >, & y " tienen significados especiales. Estos se llaman Caracteres Reservados.

Si deseas escribir la ecuación "3 < 5" en tu contenido y la escribes tal cual, el navegador podría confundirse, tratando de interpretar lo que sigue a < como una etiqueta.

Por lo tanto, necesitamos un código especial para representar estos caracteres reservados "literalmente".

2. Entidades HTML Comunes

Las Entidades HTML comienzan con & y terminan con ;.

• < (Menor que) -> <
• > (Mayor que) -> >
• & (Ampersand) -> &
• " (Comilla doble) -> "
• ' (Comilla simple) -> ' (o ')
• Espacio ->   (Espacio de no separación)

Cuando ves < en la pantalla, el código fuente HTML real es probablemente <.

3. Defensa contra XSS (Cross Site Scripting)

Las Entidades HTML son cruciales para la seguridad.

XSS es un ataque donde un hacker inyecta scripts maliciosos en un sitio web para robar cookies de usuario o realizar acciones dañinas.

Sin embargo, si el servidor convierte (escapa) < a < y > a > al guardar o mostrar la entrada del usuario, ¿qué sucede?

El navegador ve <script> y decide: "Esto es solo texto, no una etiqueta", y lo renderiza como texto sin ejecutar el script. Esta es la defensa más fundamental y poderosa contra XSS.

Conclusión

Los marcos de frontend modernos como React o Vue escapan automáticamente los datos por defecto al renderizar.

Sin embargo, al usar características como dangerouslySetInnerHTML, esta defensa automática se desactiva. En tales casos, debes asegurarte de que se haya aplicado la conversión de entidades HTML.

Una simple conversión de caracteres actúa como un escudo que protege tu sitio web de la piratería.