Para el navegador todo es la misma cadena
Un documento HTML no distingue entre lo que tú consideras «contenido» y lo que consideras «código»: recibe una sucesión de caracteres y decide sobre la marcha. En cuanto encuentra un < da por hecho que empieza una etiqueta y, cuando ve un &, se prepara para leer una entidad. No hay forma de decirle «esto de aquí es literal» salvo una: escribir esos caracteres conflictivos con un nombre alternativo que él sabe traducir de vuelta a un símbolo inofensivo. A eso se le llama escapar, y esta página lo hace en los dos sentidos.
Los cinco caracteres que hay que traducir
- El ampersand & se escribe &
- El signo menor que < se escribe <
- El signo mayor que > se escribe >
- La comilla doble se escribe "
- La comilla simple se escribe '
El orden en que se aplican no es indiferente. El ampersand tiene que ir siempre el primero, porque es el carácter con el que arrancan todas las entidades: si lo dejas para el final, terminarás escapando los ampersands que tú mismo acabas de introducir y el visitante leerá el nombre de la entidad en lugar del símbolo.
Qué pasa cuando no escapas
El comentario que deja de ser un comentario
Imagina un formulario de opiniones y a alguien que, en vez de escribir su valoración, teclea una etiqueta de script. Si tu página inserta ese texto tal cual, el navegador de todos los visitantes lo leerá como marcado auténtico y ejecutará lo que contenga: robar la sesión, redirigir a otro dominio o alterar la página. Es la esencia del cross-site scripting. Escapar el texto desactiva el ataque de raíz, porque la supuesta etiqueta se convierte en unos caracteres que se pintan y ya está.
El dato que viene de fuera no es marcado hasta que tú lo dejas serlo.
El atributo que se abre por la mitad
El otro accidente clásico ocurre dentro de un atributo. Si el valor lleva una comilla doble sin escapar, esa comilla cierra el atributo antes de tiempo y todo lo que venía detrás pasa a interpretarse como atributos nuevos de la etiqueta. De ahí que la lista incluya las comillas: sin ellas el escapado es incompleto justo en el punto más delicado.
Cuándo sí y cuándo no
La regla es escapar en el momento de insertar el dato en la página, no al guardarlo. Si escapas al guardar, tarde o temprano ese contenido acabará en un correo, un PDF o un archivo de exportación arrastrando entidades que allí no pintan nada. No escapes, en cambio, el marcado que generas tú deliberadamente, ni el texto que ya llegó escapado: el doble escape se reconoce al instante porque en pantalla se leen las entidades literales.
Ten presente además que estas cinco sustituciones sirven para el cuerpo del documento y sus atributos, pero no cubren otros contextos. Un valor que va a terminar dentro de código JavaScript, en una hoja de estilos o en el destino de un enlace necesita su propio tratamiento; para las direcciones web, por ejemplo, lo correcto es la codificación de URL.
Enseñar código en una página
El uso más pacífico de esta herramienta no tiene nada que ver con la seguridad: es publicar ejemplos. Cualquier tutorial que muestre etiquetas necesita escaparlas para que se lean en vez de ejecutarse. Pega tu fragmento, cópialo ya escapado y colócalo dentro de tu bloque de código. Y cuando quieras recuperarlo para editarlo, el modo desescapar te devuelve el original.
Si estás preparando contenido para publicar, te vendrán bien el conversor de Markdown a HTML y el generador de slugs. Para revisar estructuras de datos tienes el formateador de JSON y, para probar patrones de validación, el comprobador de expresiones regulares. Lo demás está en herramientas de archivos.