Contextos de salida y su codificación

Una página web no la lee un solo intérprete. El analizador de HTML lee el cuerpo y los atributos; dentro de un <script> manda el de JavaScript; dentro de style manda el de CSS; dentro de un href la dirección se analiza como URL. Cada uno tiene sus caracteres especiales. En el cuerpo de HTML lo peligroso es < y &; en un atributo entre comillas, la comilla; en un atributo sin comillas, también el espacio; en una cadena de JavaScript, la comilla y la barra invertida; en un parámetro de URL, el ampersand, el igual, la almohadilla y el espacio; en CSS, el punto y coma y los dos puntos.

La regla de la hoja de referencia de OWASP para prevenir XSS es codificar cada dato según el contexto donde se inserta, y MITRE nombra el error de usar la codificación de otro contexto: CWE-838, codificación inapropiada para el contexto de salida. Twig, el motor de plantillas de este portal, trae una estrategia para cada caso en su filtro escape: html, html_attr, js, css y url. |e sin argumento usa html.

Abre el laboratorio y lee ficha-evento.html.twig en la carpeta tinajacoa-eventos. Todas las salidas pasan por |e, es decir, por la estrategia de HTML. Ubica el contexto de cada una: cuerpo, atributo con comillas, atributo sin comillas, parámetro de URL, CSS o JavaScript. Después contrasta con prueba-caracteres.txt: el HTML recibido es idéntico en los siete campos, pero lo que hizo el navegador no.

Repasa los siete puntos de inserción de la ficha y decide en cuáles la estrategia de HTML corresponde a su contexto y en cuáles no. Un atributo href entre comillas que recibe una dirección completa cuenta como contexto de atributo (su problema es otro y lo verás en la tarea siguiente).

Hay un caso donde codificar bien no alcanza. Si un enlace recibe una dirección completa escrita por otra persona, la codificación de atributo impide que el valor se salga de las comillas, pero no decide a dónde lleva el enlace. Un esquema que no sea de navegación web hace que el clic haga otra cosa. Ahí la defensa es de validación: aceptar solo https (y http si el negocio lo pide) al guardar, y además codificar al pintar. Revisa eventos.csv.

La nota de calidad muestra el segundo síntoma del script: el apóstrofo de un nombre real aparece como ' en la tarjeta, porque dentro de un script nadie decodifica las entidades de HTML. El dato queda corrupto aunque no rompa nada.