Jak rozpakować html w javascript?

Pracuję z usługą internetową, która będzie dać mi wartości takich jak:Jak rozpakować html w javascript?

var text = "&lt;&lt;&lt;&amp;&amp;&amp;";

i trzeba wydrukować to wyglądało "< < < & & &" z javascript.

Ale tutaj jest haczyk: nie mogę użyć wewnętrznego HTML (właściwie wysyłam te wartości do biblioteki prototypów, która tworzy węzły tekstowe, więc nie przechwytuje mojego surowego łańcucha html. Jeśli edycja biblioteki nie byłaby opcja, jak byś przywróceniu znaczenia tej html?

muszę undertand real deal tutaj, co to ryzyko unescaping tego rodzaju strun? w jaki sposób innerHTML prawda? i jakie istnieją inne opcje?

EDIT - Problem nie polega na używaniu javascript normalnego escape/unescape lub nawet jQuery/prototypu ich implementacji, ale na kwestiach bezpieczeństwa, które mogą pochodzić od nas którekolwiek z tych ... aka "Powiedzieli mi, że ich używanie jest dość niebezpieczne"

(Dla tych, którzy próbują podszkodzić temu, co do cholery rozmawiam z wewnętrznym HTML-em, odrysowując ten dziwny ciąg, sprawdź ten prosty przykład:

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

Źródło

2009-07-07 DFectuoso

Zmień swój ciąg testowy do <b><<&&&</b> aby uzyskać lepszy uchwyt na co ryzyko jest ... (lub lepiej, <img src='http://www.spam.com/ASSETS/0EE75B480E5B450F807117E06219CDA6/spamReg.png' onload='alert(document.cookie);'> do cookie-kradzież spam)

Patrz przykład na http://jsbin.com/uveme/139/ (oparte na przykład za pomocą prototyp do odsłaniania.) Spróbuj kliknąć cztery różne przyciski, aby zobaczyć różne efekty. Tylko ostatni jest zagrożeniem bezpieczeństwa. (Można przejrzeć/modyfikować źródło w http://jsbin.com/uveme/139/edit) Przykład faktycznie nie kraść ciasteczka ...

Jeśli tekst pochodzi ze znanego źródła i bezpieczne jest nie na podstawie dowolnego wejścia użytkownika, to jesteś bezpieczny.
Jeśli używasz createTextNode stworzyć węzeł tekstowy i appendChild wstawić ten niezmieniony obiekt węzła bezpośrednio do dokumentu, jesteś bezpieczny.
W przeciwnym razie należy podjąć odpowiednie środki, aby zapewnić, że niebezpieczne treści nie dotrą do przeglądarki przeglądarki.

Uwaga: As pointed out by Ben Vinegar Korzystanie createTextNode nie jest cudownym środkiem: wykorzystując go do ucieczki ciąg, a następnie za pomocą textContent lub innerHTML uzyskać uciekł tekst na zewnątrz i robić inne rzeczy z nim nie chroni cię w swoich późniejszych zastosowań. W szczególności numer escapeHtml method in Peter Brown's answer below jest niepewny, jeśli jest używany do wypełniania atrybutów.

Źródło

2009-07-07 05:16:43 Stobor

Jest to naprawdę przydatne. Tak więc, jeśli coś pochodzi od użytkownika, to powinien to być TextNode ?? – DFectuoso

@DFectuoso: To jest jedno podejście, które działa, jeśli nie chcesz, aby mogły korzystać z jakichkolwiek funkcji HTML. Jeśli, na przykład, chcesz, aby stylizował ich tekst, musisz dowiedzieć się, jak to zrobić bezpiecznie ... – Stobor

Interesujący wgląd w kwestie bezpieczeństwa. –

Spróbuj escape i unescape funkcje dostępne w JavaScript

Więcej szczegółów: http://www.w3schools.com/jsref/jsref_unescape.asp

Źródło

2009-07-07 02:13:33 Anuraj

Im powiedziano, że unescaping html z tej metody może prowadzić do poważnych problemów bezpieczeństwa ... że niby mojego punktu .... – DFectuoso

Przepraszam, że przegapiłem EDIT :( – Anuraj

Nie ma problemu, zrobiłem to po tym, jak odpowiedziałeś ... nie głosuj na tego faceta! – DFectuoso

Niektóre domysły na co warto.

innerHTML to dosłownie przeglądarka interpretująca hte html.

więc < staje się mniej niż symbolem, ponieważ tak się stanie, jeśli umieścisz < w dokumencie HTML.

Największe zagrożenie bezpieczeństwa ciągów znaków z & jest eval oświadczenie, każdy JSON może spowodować, że aplikacja jest niepewna. Nie jestem ekspertem od zabezpieczeń, ale jeśli łańcuchy pozostają ciągami, to powinieneś być w porządku.

To jest kolejny sposób, że innerHTML jest bezpieczny, że ciąg znaków bez znaków jest na drodze do uzyskania html, więc nie ma ryzyka, że uruchomi javascript.

Źródło

2009-07-07 03:37:07

Dopóki twój kod tworzy węzły tekstowe, przeglądarka NIE powinna renderować niczego szkodliwego. W rzeczywistości, jeśli sprawdzasz źródło wygenerowanego węzła tekstowego za pomocą Firebug lub paska narzędzi IE Dev, zobaczysz, że przeglądarka ponownie ucieka z znaków specjalnych.

nadać mu

"<script>"

i ponownie ucieka go:

"&lt;script&gt;"

Istnieje kilka typów węzłów: Elements, Dokumenty, Tekst, atrybuty itp

Niebezpieczeństwo polega na tym, że przeglądarka interpretuje ciąg znaków jako zawierający skrypt.Własność innerHTML jest podatna na ten problem, ponieważ poleci przeglądarce utworzenie węzłów Elementów, z których jeden może być elementem skryptu lub wbudowanej Javascript, takiej jak obsługa instrukcji onmouseover. Tworzenie węzłów tekstowych omija ten problem.

Źródło

2009-07-07 05:15:54

Przejdź do mnie. :) – Stobor

Chociaż, nie mogłem sprawić, żeby zrobiło się coś złego z '< s cript > alert ("cześć"); </script > '- z jakiegoś powodu, chociaż skrypt został wstawiony, nie był uruchamiany. Ale załadowanie obrazów było, więc zamiast tego wykorzystałem to ... – Stobor

@Stobor - czy mógłbyś mi pokazać, co masz na myśli? Jestem ciekawy ... –

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

Źródło

2011-08-31 17:10:45 Jan

Właśnie wysłana odpowiedź pozwala na umieszczenie aktualnego tytułu strony (z & lub &) w temacie. ... a treść strony html pojawi się w treści wiadomości e-mail. – Jan

Bardzo dobry odczyt jest http://benv.ca/2012/10/4/you-are-probably-misusing-DOM-text-methods/ co wyjaśnia dlaczego mądrość konwencja korzystania createTextNode faktycznie nie zabezpieczyć w ogóle.

Reprezentatywny przykład wziąć z artykułu powyżej ryzyka:

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>

Źródło

2012-10-05 03:43:12

Nie jest to bezpieczne szczególnie w przypadku użycia metody 'escapeHtml', która służy do wypełniania atrybutów elementów. Jednak jego punkt widzenia: jeśli nie jesteś w 100% pewien kontekstu, w którym używana jest twoja funkcja, nie możesz być pewien, że ta funkcja jest bezpieczna. Użycie 'createTextNode' poprawnie w konstrukcji typu' document.getElementById ("whereItGoes"). AppendChild (document.createTextNode (unsafe_str)); 'nie jest tym, o czym komentuje ... – Stobor

Jak rozpakować html w javascript?

Odpowiedz

Powiązane problemy