2009-07-07 5 views
17

ich mit einem Web-Service bin arbeiten, die mir geben werden Werte wie:Wie html in Javascript unescape?

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

Und ich brauche diese drucken wie mit javascript „< < < & & &“ zu suchen.

Aber hier ist der Haken: Ich kann nicht innere HTML verwenden (ich sende diese Werte tatsächlich zu einer Prototyp-Bibliothek, die Textknoten erstellt, so dass es nicht meine rohe HTML-Zeichenfolge entblättert. Wenn die Bibliothek nicht bearbeiten wäre eine Option, wie würden Sie diesen hTML unescape?

ich brauche die eigentliche Behandlung hier undertand, was ist das Risiko von URL-Kodierung, diese Art von Strings? wie funktioniert innerHTML- nicht wahr? und welche anderen Möglichkeiten gibt es?

EDIT - Das Problem ist nicht über die Verwendung von Javascript normalen Escape/Unescape oder sogar jQuery/Prototyp-Implementierungen von ihnen, sondern über die Sicherheitsprobleme, die von uns kommen könnten Irgendwelche von diesem ... alias "Sie sagten mir, dass es ziemlich unsicher war, sie zu benutzen"

(Für diejenigen, die versuchen zu verstehen, was zum Teufel ich mit innerHTML diese seltsame Schnur unescaping, überprüfen Sie dieses einfache Beispiel:

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

Antwort

11

Ihren Test-String zu &lt;b&gt;&lt;&lt;&amp;&amp;&amp;&lt;/b&gt; Ändern auf einen besseren Griff zu bekommen, was das Risiko ist ... (oder besser, &lt;img src='http://www.spam.com/ASSETS/0EE75B480E5B450F807117E06219CDA6/spamReg.png' onload='alert(document.cookie);'&gt; für Cookie-Diebstahl Spam)

Siehe Beispiel bei http://jsbin.com/uveme/139/ (basierend auf dem Beispiel mit Prototyp für die Unescaping.) Versuchen Sie, klicken Sie auf die vier verschiedenen Schaltflächen, um die verschiedenen Effekte zu sehen. Nur der letzte ist ein Sicherheitsrisiko. (Sie können sehen/bearbeiten, um die Quelle zu http://jsbin.com/uveme/139/edit) Das Beispiel eigentlich nicht stehlen Cookies ...

  1. Wenn Ihr Text wird von einer bekannten sicheren Quelle kommt und sind nicht basierend auf einer Benutzereingabe, dann sind Sie sicher.
  2. Wenn Sie createTextNode verwenden einen Textknoten und appendChild zu erstellen Objekt, das unverändert Knoten direkt in Ihr Dokument sicher Sie, einzufügen.
  3. Andernfalls müssen Sie geeignete Maßnahmen ergreifen, um sicherzustellen, dass unsichere Inhalte nicht in den Browser Ihres Viewers gelangen können.

Hinweis: As pointed out by Ben VinegarcreateTextNode Verwendung ist keine magische Kugel: es mit der Zeichenfolge zu entkommen, dann textContent oder innerHTML mit aus dem entkam Text zu erhalten und mit ihm zu tun anderen Sachen nicht in Ihrem späteren Gebrauch schützen. Insbesondere ist die escapeHtml method in Peter Brown's answer below unsicher, wenn sie zum Ausfüllen von Attributen verwendet wird.

+0

Das ist wirklich nützlich. Also, unter dem Strich, wenn etwas von einem Benutzer kommt, sollte es TextNode sein ?? – DFectuoso

+0

@DFectuoso: Das ist ein Ansatz, der funktioniert, wenn Sie nicht möchten, dass sie HTML-Funktionen verwenden können. Wenn Sie beispielsweise möchten, dass sie ihren Text formatieren, müssen Sie herausfinden, wie Sie das sicher tun ... – Stobor

+0

Interessanter Einblick in Sicherheitsprobleme. –

2

Try Flucht- und unescape Funktionen in Javascript

Weitere Details: http://www.w3schools.com/jsref/jsref_unescape.asp

+0

Im gesagt, dass mit dieser Methode html URL-Kodierung zu einigen ernsten Sicherheitsproblemen führen kann ... diese Art von meinem Punkt .... – DFectuoso

+0

Tut mir leid, dass ich das verpasst habe EDIT :( – Anuraj

+4

Kein Problem, ich habe es getan, nachdem du geantwortet hast ... stimme nicht ab! – DFectuoso

2

Einige Vermutungen für das, was es wert ist.

innerHTML ist buchstäblich der Browser, der HTML interpretiert.

so < wird das weniger als Symbol, was passiert, wenn Sie < in das HTML-Dokument eingeben.

Das größte Sicherheitsrisiko von Zeichenfolgen mit & ist eine Eval-Anweisung, JSON könnte die Anwendung unsicher machen. Ich bin kein Sicherheitsexperte, aber wenn Strings Strings bleiben, sollten Sie in Ordnung sein.

Dies ist eine andere Möglichkeit, innerHTML ist sicher, die unescaped Zeichenfolge ist auf dem Weg, HTML zu werden, so dass es kein Risiko für die Ausführung des Javascript.

1

Solange Ihr Code Textknoten erstellt, sollte der Browser nichts schädlich machen. Wenn Sie die Quelle des generierten Textknotens mithilfe von Firebug oder der IE Dev Toolbar überprüfen, werden Sie feststellen, dass der Browser die Sonderzeichen zurückgibt.

geben eine

"<script>" 

und es wieder entkommt es an:

"&lt;script&gt;" 

Es gibt verschiedene Typen von Knoten: Elemente, Dokumente, Text, Attribute usw.

Die Gefahr besteht, wenn der Browser einen String als Skript interpretiert.Die Eigenschaft innerHTML ist anfällig für dieses Problem, da sie den Browser anweist, Element-Knoten zu erstellen, von denen einer ein Skriptelement sein kann, oder ein Inline-Javascript wie onmouseover-Handler hat. Das Erstellen von Textknoten umgeht dieses Problem.

+0

Beat mich dazu :) – Stobor

+0

Obwohl ich konnte es nicht machen etwas schlechtes mit '< s cript > Warnung ('Hallo'); </script > '- aus irgendeinem Grund, obwohl das Skript eingefügt wurde, wurde es nicht ausgeführt. Aber das Onload für die Bilder war, also habe ich das ausgenutzt ... – Stobor

+0

@Stobor - könntest du mir zeigen, was du meinst? Ich bin neugierig ... –

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

Die Antwort, die ich gerade gepostet habe, ermöglicht es Ihnen, den tatsächlichen Seitentitel (mit entweder & oder &) in die Betreffzeile einzufügen. ... und der Text der HTML-Seite wird im Text der E-Mail angezeigt. – Jan

5

Eine sehr gute Lese ist http://benv.ca/2012/10/4/you-are-probably-misusing-DOM-text-methods/ was erklärt, warum eigentlich nicht die Konvention Weisheit createTextNode der Verwendung überhaupt sichern.

Ein repräsentatives Beispiel aus dem Artikel nehmen oberhalb des Risikos:

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

Es ist nicht sicher speziell im Anwendungsfall der Erstellung einer 'escapeHtml'-Methode, die verwendet wird, um Elementattribute zu füllen. Sein Punkt ist jedoch: Wenn Sie sich nicht 100% sicher sind, in welchem ​​Kontext Ihre Funktion verwendet wird, können Sie nicht sicher sein, dass diese Funktion sicher ist. Die Verwendung von 'createTextNode' in einer Konstruktion wie' document.getElementById ("whereItGoes"). AppendChild (document.createTextNode (unsafe_str)); 'ist nicht das, was er kommentiert ... – Stobor