2009-07-07 16 views
17

Sto lavorando con un servizio web che mi darà valori come:Come rimuovere un html in javascript?

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

E ho bisogno di stampare questo per apparire come "< < < & & &" con javascript.

Ma ecco il trucco: non è possibile utilizzare l'HTML interno (in realtà sto inviando questi valori a una libreria prototipo che crea nodi di testo in modo che non annulli la stringa html non elaborata. un'opzione, come si dovrebbe unescape questo html?

ho bisogno di undertand il vero affare qui, qual è il rischio di unescaping questo tipo di stringhe? come fa innerHTML lo fa? e ciò che esiste altre opzioni?

EDIT - Il problema non consiste nell'usare javascript normal escape/unescape o anche jQuery/prototype implementazioni di essi, ma sui problemi di sicurezza che potrebbero venire da noi un po 'di tutto questo ... alias "Mi hanno detto che era piuttosto insicuro usarli"

(Per coloro che cercano di capire cosa diavolo sto dicendo con innerHTML senza sfuggire questa strana stringa, dai un'occhiata a questo semplice esempio:

<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> 

risposta

11

Cambia la stringa di prova per &lt;b&gt;&lt;&lt;&amp;&amp;&amp;&lt;/b&gt; per ottenere un handle meglio su ciò che il rischio è ... (o meglio, &lt;img src='http://www.spam.com/ASSETS/0EE75B480E5B450F807117E06219CDA6/spamReg.png' onload='alert(document.cookie);'&gt; per cookie-furto di spam)

vedere l'esempio a http://jsbin.com/uveme/139/ (sulla base di esempio, utilizzando prototipo per il senza escape.) Prova a fare clic sui quattro pulsanti per vedere i diversi effetti. Solo l'ultimo è un rischio per la sicurezza. (È possibile visualizzare/modificare l'origine a http://jsbin.com/uveme/139/edit) L'esempio in realtà non rubare i cookie ...

  1. Se il testo proviene da un noto sicura fonte ed è non sulla base di qualsiasi input dell'utente, quindi sei al sicuro.
  2. Se si utilizza createTextNode per creare un nodo di testo e appendChild per inserire l'oggetto nodo inalterato direttamente nel documento, siete al sicuro.
  3. In caso contrario, è necessario prendere le misure adeguate per garantire che i contenuti non sicuri non ce la fa il browser del visualizzatore.

Nota: As pointed out by Ben Vinegar utilizzo createTextNode non è una bacchetta magica: usarlo per sfuggire alla stringa, quindi utilizzando textContent o innerHTML per ottenere il testo scappato fuori e fare altre cose con esso non protegge nei vostri usi successivi. In particolare, lo escapeHtml method in Peter Brown's answer below non è sicuro se utilizzato per popolare gli attributi.

+0

Questo è veramente utile. Quindi, in fondo, se c'è qualcosa proveniente da un utente, dovrebbe essere TextNode ?? – DFectuoso

+0

@DFectuoso: questo è un approccio, che funziona se non si desidera che siano in grado di utilizzare le funzionalità HTML. Se, per esempio, vuoi che siano loro a scrivere il loro testo, devi capire come farlo in modo sicuro ... – Stobor

+0

Interessanti informazioni sui problemi di sicurezza. –

2

Prova di fuga e unescape funzioni disponibili in Javascript

Maggiori dettagli: http://www.w3schools.com/jsref/jsref_unescape.asp

+0

Im detto che unescaping html con quel metodo può portare ad alcuni seri problemi di sicurezza ... questo genere di mio punto .... – DFectuoso

+0

Spiacente ho mancato che EDIT :( – Anuraj

+4

Nessun problema, l'ho fatto dopo aver risposto ... Non Answer questo ragazzo – DFectuoso

2

Alcuni congetture per quello che vale.

innerHTML è letteralmente il browser che interpreta hte html.

così < diventa il simbolo di minore becuase è quello che accadrebbe se si mette < nel documento HTML.

Il più grande rischio per la sicurezza delle stringhe con & è un'istruzione eval, qualsiasi JSON potrebbe rendere l'applicazione non sicura. Non sono un esperto di sicurezza, ma se le stringhe rimangono stringhe di quanto dovresti essere ok.

Questo è un altro modo in cui innerHTML è sicuro che la stringa senza escape è sul suo modo di diventare html, quindi non c'è il rischio che esegua il javascript.

1

Fintantoché il codice sta creando nodi di testo, il browser NON deve rendere nulla di dannoso. Infatti, se controlli l'origine del nodo di testo generato usando Firebug o IE Dev Toolbar, vedrai che il browser sta rieseguendo l'escape dei caratteri speciali.

dargli un

"<script>" 

e ri-sfugge a:

"&lt;script&gt;" 

Ci sono diversi tipi di nodi: Elementi, documenti, testo, attributi, ecc

Il pericolo è quando il browser interpreta una stringa come contenente uno script.La proprietà innerHTML è suscettibile a questo problema, dal momento che istruirà il browser per creare nodi Element, uno dei quali potrebbe essere un elemento di script, o di avere in linea JavaScript, come i gestori onmouseover. La creazione di nodi di testo elude questo problema.

+0

Mi picchia. :) – Stobor

+0

Anche se non sono riuscito a fare qualcosa di male con '< s cript > alert ('ciao'); </script > '- per qualche motivo sebbene lo script sia stato inserito, non è stato eseguito. Ma l'onload per le immagini era, quindi ho sfruttato quello invece ... – Stobor

+0

@Stobor - potresti mostrarmi cosa intendi? Sono curioso ... –

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 risposta che ho appena postato consente di inserire il titolo della pagina effettiva (con & o &) nella riga dell'oggetto. ... e il corpo della pagina html apparirà nel corpo dell'email. – Jan

5

Una buona lettura è http://benv.ca/2012/10/4/you-are-probably-misusing-DOM-text-methods/ che spiega il motivo per cui la saggezza convenzione di usare createTextNode in realtà non è affatto sicuro.

un esempio rappresentativo prendere dal suddetto articolo del rischio:

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

Non è sicuro in particolare nel caso d'uso della costruzione di un metodo 'escapeHtml' che viene utilizzato per popolare gli attributi dell'elemento. Tuttavia, il suo punto è: se non sei sicuro al 100% del contesto in cui viene utilizzata la tua funzione, non puoi essere sicuro che questa funzione sia sicura. L'uso di 'createTextNode' correttamente in una costruzione come' document.getElementById ("whereItGoes"). AppendChild (document.createTextNode (unsafe_str)); 'non è ciò che sta commentando ... – Stobor

Problemi correlati