Prácticamente, se considera riesgo a todo dato introducido por un usuario, es nuestro deber como programador validar y sanitizar los datos para asegurar la integridad de la información y la seguridad del sistema.
El uso de la propiedad innerHTML
deberá ser bajo un ambiente sumamente controlado y aún así es preferible utilizar otros métodos para la creación y adición de contenido (seguir leyendo).
Carlos Souza (@caike) en su gist titulado «XSS attack demo with innerHTML» nos brinda una clara idea de como es un código diseñado para ataque XSS:
// Comentarios traducidos.
// Probado en Chrome, Firefox y Safari.
// El siguiente código no lanzará una alerta.
target.innerHTML = "<script> alert('XSS Attack'); </script>";
// El siguiente código, lanzará una alerta.
target.innerHTML = "<img src=x onerror=\"alert('XSS Attack')\" >";
¿Qué alternativas existen? La respuesta puede ser amplia, pero buscaré resumirla lo más posible, ya que va en función del objetivo buscado:
- Si se desea mostrar texto dentro de un nodo, se recomienda la propiedad
textContent
: debido a que dicha propiedad se encarga de validar y sanitizar el contenido en caso de que hubiere código HTML y entre éste una alguna etiqueta script
.
- Si se buscas tener una alta interacción entre creación/edición de elementos (en el DOM), podría usarse un motor de plantillas como mustache.js que ya tiene una gran cantidad de herramientas que nos apoyan a dicha operación de forma segura.
- Si estás usando la librería de jQuery, podrías utilizar la función
.html( htmlString )
como sustituto, ya que se puede ver en este código el filtro que aplican antes de insertarlo al DOM.
- Si se crearán y añadirán elementos al DOM, utilizar las funciones de creación de elementos y adición (¡lo sé! es más pesado y más código, pero más seguro).
- Si la interacción con el DOM será controlada, se puede usar de forma discreta la propiedad
innerHTML
(dejar esta opción como último recurso).
Referencias adicionales:
...In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack....
— DOM Elements: React.
...an attacker might control into innerHTML normally causes an XSS vulnerability. For example, code contained in a tag...
— Angular - Security