XSS mediante innerHTML y cómo prevenirlo

Asignar el.innerHTML = userInput analiza la cadena como HTML. Si userInput contiene etiquetas <script> o atributos de controladores de eventos (onclick, onerror), el navegador los interpreta y ejecuta código controlado por el atacante en la página.

Cualquier código que inserte datos de usuario en HTML —plantillas del servidor o renderizado del lado del cliente— corre el riesgo de sufrir XSS si los datos no se escapan. Las aplicaciones de una sola página que construyen innerHTML a partir de respuestas de API están especialmente expuestas cuando esas respuestas incluyen contenido de usuario.

Un nombre de usuario "Bob<img src=x onerror=alert(1)>" establecido mediante div.innerHTML = `Welcome, ${user}` ejecuta alert(1) cuando la imagen no se puede cargar. El mismo contenido como texto plano, mediante textContent, es inofensivo: el navegador solo ve caracteres, no etiquetas.

textContent establece únicamente texto: los caracteres especiales de HTML aparecen como caracteres literales, nunca como etiquetas. Esta es la herramienta adecuada en el 90 % de los casos. Utilice innerHTML solo cuando realmente necesite mostrar marcado, no texto.

Para crear elementos con datos de usuario, constrúyalos con createElement y textContent: const li = document.createElement("li"); li.textContent = name; ul.appendChild(li);. El resultado es estructuralmente idéntico a innerHTML, pero es seguro frente a XSS por diseño.

Para HTML confiable generado por el servidor (la salida de sus propias plantillas o texto enriquecido saneado por un editor de confianza), innerHTML es adecuado. Nunca lo aplique directamente a datos de fuentes no confiables sin saneamiento.

Si los usuarios envían texto enriquecido (por ejemplo, mediante un editor de comentarios o una conversión de Markdown), sáनेelo antes de establecer innerHTML: el.innerHTML = DOMPurify.sanitize(richHtml). DOMPurify elimina las etiquetas y los atributos peligrosos, pero conserva formatos seguros como <b>, <em> y <a>.

el.insertAdjacentHTML("beforeend", html) analiza cadenas HTML y presenta la misma superficie de XSS que innerHTML. Se aplican las mismas reglas: nunca introduzca datos de usuario directamente; sanee los datos o utilice métodos del DOM. Lo mismo ocurre con document.write, aunque ya no debería utilizarse.

React, Vue, Svelte y Angular escapan de forma predeterminada el texto interpolado; {name} es seguro. Ofrecen mecanismos para omitir ese escape (dangerouslySetInnerHTML en React y v-html en Vue), que conllevan el mismo riesgo de XSS; utilícelos con moderación y saneamiento.

Incluso los valores de atributos pueden ser vectores de ataque: <a href={url}> con url="javascript:alert(1)" se ejecuta al hacer clic. Valide las URL según su esquema (permita únicamente http:, https:, mailto: y tel:) antes de colocar datos de usuario en href, src u otros atributos que contengan URL.

Los navegadores modernos admiten Trusted Types: configure CSP con require-trusted-types-for 'script' y innerHTML rechazará las cadenas sin procesar; solo pasarán los valores envueltos por una política. Esto hace que XSS sea imposible mediante la API, en lugar de depender de la disciplina.

Ninguna capa por sí sola es suficiente. Combine: validación de entradas en el servidor, escape de la salida al renderizar, CSP para bloquear scripts inyectados, Trusted Types para rechazar cadenas sin procesar y una revisión de seguridad para cualquier uso de innerHTML. La defensa en capas resiste un error en cualquiera de ellas.

¿Por qué el.textContent = userInput es seguro frente a XSS, mientras que el.innerHTML = userInput es peligroso?

El uso de innerHTML con entradas del usuario es el vector clásico de XSS. Use textContent para texto, createElement+textContent para estructuras y DOMPurify cuando necesite HTML enriquecido. Valide los esquemas de URL para los valores de los atributos. Combine CSP y Trusted Types para neutralizar los errores que se escapen a la revisión de código. Los frameworks modernos escapan el contenido de forma predeterminada; mantenga al mínimo sus mecanismos de escape inseguros y revíselos.