2009-07-07 22 views
17

Estoy trabajando con un servicio web que me dará valores como:¿Cómo descomprimir html en javascript?

var text = "<<<&&&"; 

y necesito para imprimir esta parecerse a "< < < & & &" con javascript.

Pero aquí está el truco: no puedo usar HTML interno (de hecho estoy enviando estos valores a una biblioteca de prototipos que crea Nodos de Texto para que no separe mi cadena html cruda. Si edita la biblioteca no se una opción, ¿cómo unescape este html?

necesito undertand el verdadero negocio aquí, ¿cuál es el riesgo de representación no literal de este tipo de cadenas? ¿cómo innerHtml lo hace, y qué otras opciones existen?

EDIT - El problema no se trata de usar javascript normal escape/unescape o incluso implementaciones jQuery/prototype de ellos, sino de los problemas de seguridad que podrían venir de nosotros ing any of this ... alias "Me dijeron que era bastante inseguro usarlos"

(Para aquellos que intentan entender de qué demonios estoy hablando con innerHTML, separando esta extraña cadena, mira este simple ejemplo:

<html> 
<head> 
<title>createTextNode example</title> 

<script type="text/javascript"> 

var text = "&lt;&lt;&lt;&amp;&amp;&amp;"; 
function addTextNode(){ 
    var newtext = document.createTextNode(text); 
    var para = document.getElementById("p1"); 
    para.appendChild(newtext); 
} 
function innerHTMLTest(){ 
    var para = document.getElementById("p1"); 
    para.innerHTML = text; 
} 
</script> 
</head> 

<body> 
<div style="border: 1px solid red"> 
<p id="p1">First line of paragraph.<br /></p> 
</div><br /> 

<button onclick="addTextNode();">add another textNode.</button> 
<button onclick="innerHTMLTest();">test innerHTML.</button> 

</body> 
</html> 

Respuesta

11

Cambiar la cadena de prueba a &lt;b&gt;&lt;&lt;&amp;&amp;&amp;&lt;/b&gt; para obtener un mejor manejo de lo que el riesgo es ... (o mejor, &lt;img src='http://www.spam.com/ASSETS/0EE75B480E5B450F807117E06219CDA6/spamReg.png' onload='alert(document.cookie);'&gt; de galleta-robo de correo no deseado)

Véase el ejemplo en http://jsbin.com/uveme/139/ (basado en el ejemplo, el uso de prototipo para el desempañado.) Intente hacer clic en los cuatro botones diferentes para ver los diferentes efectos. Solo el último es un riesgo de seguridad. (Se puede ver/editar el código fuente en http://jsbin.com/uveme/139/edit) El ejemplo en realidad no robar sus galletas ...

  1. Si el texto proviene de una fuente conocida y segura es no en base a cualquier entrada del usuario, entonces estás a salvo.
  2. Si está utilizando createTextNode para crear un nodo de texto y appendChild para insertar dicho objeto nodo inalterada directamente en el documento, que son seguros.
  3. De lo contrario, debe tomar las medidas adecuadas para garantizar que el contenido inseguro no pueda llegar al navegador de su lector.

Nota: As pointed out by Ben Vinegar Usando createTextNode no es una bala mágica: usarlo para escapar de la cadena, a continuación, utilizando textContent o innerHTML para obtener el texto escapado hacia fuera y haciendo otras cosas con ella no la protege de sus usos posteriores. En particular, el escapeHtml method in Peter Brown's answer below es inseguro si se usa para rellenar atributos.

+0

Esto es realmente útil. Entonces, en resumen, si algo viene de un usuario, ¿debería ser TextNode? – DFectuoso

+0

@DFectuoso: ese es un enfoque, que funciona si no desea que puedan usar ninguna característica HTML. Si, por ejemplo, desea que diseñen su texto, debe descubrir cómo hacerlo de manera segura ... – Stobor

+0

Información interesante sobre cuestiones de seguridad. –

2

funciones de escape y Try unescape disponibles en Javascript

Más detalles: http://www.w3schools.com/jsref/jsref_unescape.asp

+0

Im dijo que la representación no literal html con ese método puede dar lugar a algunos problemas de seguridad graves ... ese tipo de mi punto .... – DFectuoso

+0

Perdón, me olvidé de EDITAR :( – Anuraj

+4

No hay problema, lo hice después de que me respondiste ... ¡no apruebes el voto de este tipo! – DFectuoso

2

Algunas conjeturas de lo que vale la pena.

innerHTML es literalmente el navegador que interpreta hte html.

así que < se convierte en el menos que símbolo porque eso es lo que sucedería si pusiera < en el documento html.

El mayor riesgo de seguridad de cadenas con & es una declaración eval, cualquier JSON podría inutilizar la aplicación. No soy un experto en seguridad pero si las cadenas siguen siendo de lo que debería estar bien.

Esta es otra forma en que innerHTML es seguro de que la cadena no guardada está en camino de convertirse en html, por lo que no hay riesgo de que ejecute el javascript.

1

Siempre que su código esté creando nodos de texto, el navegador NO debe generar ningún daño. De hecho, si inspecciona la fuente del nodo de texto generado utilizando Firebug o la barra de herramientas IE Dev, verá que el navegador está volviendo a escapar de los caracteres especiales.

darle una

"<script>" 

y re-escapa a:

"&lt;script&gt;" 

Hay varios tipos de nodos: Elementos, documentos, texto, atributos, etc.

El peligro es cuando el navegador interpreta una cadena como guión que contiene.La propiedad innerHTML es susceptible a este problema, ya que le indicará al navegador que cree nodos Element, uno de los cuales podría ser un elemento script, o tener Javascript en línea, como los controladores onmouseover. La creación de nodos de texto evita este problema.

+0

Muéstremelo :) – Stobor

+0

Aunque no pude hacer nada malo con '< s cript > alert ('hi'); </script > '- por alguna razón, aunque se insertó la secuencia de comandos, no se estaba ejecutando. Pero la carga de las imágenes era, así que exploté eso en su lugar ... – Stobor

+0

@Stobor - ¿podría decirme a qué se refiere? Tengo curiosidad ... –

1
function mailpage() 
{ mail_str = "mailto:?subject= Check out the " + escape(document.title); 
     mail_str += "&body=" + escape("I thought you might be interested in the " + document.title + ".\n\n"); 
     mail_str += escape("You can view it at " + location.href + ".\n\n"); 
     location.href = mail_str; 
} 
+0

La respuesta que acabo de publicar le permite poner el título de la página real (con & o &) en la línea de asunto. ... y el cuerpo de la página html aparecerá en el cuerpo del correo electrónico. – Jan

5

Una muy buena lectura es http://benv.ca/2012/10/4/you-are-probably-misusing-DOM-text-methods/ que explica por qué la sabiduría convención de usar createTextNode es en realidad no es seguro en absoluto.

Un ejemplo representativo de tomar el artículo anterior del riesgo:

function escapeHtml(str) { 
    var div = document.createElement('div'); 
    div.appendChild(document.createTextNode(str)); 
    return div.innerHTML; 
}; 

var userWebsite = '" onmouseover="alert(\'derp\')" "'; 
var profileLink = '<a href="' + escapeHtml(userWebsite) + '">Bob</a>'; 
var div = document.getElementById('target'); 
div.innerHtml = profileLink; 
// <a href="" onmouseover="alert('derp')" "">Bob</a> 
+0

No es seguro específicamente en el caso de uso de compilar un método 'escapeHtml' que se utiliza para rellenar atributos de elementos. Sin embargo, su punto es el siguiente: si no está 100% seguro del contexto en el que se está utilizando su función, no puede estar seguro de que esta función sea segura. El uso de 'createTextNode' correctamente en una construcción como' document.getElementById ("whereItGoes"). AppendChild (document.createTextNode (unsafe_str)); 'no es lo que está comentando ... – Stobor

Cuestiones relacionadas