2009-07-07 22 views
17

मैं एक वेब सेवा के साथ काम कर रहा हूँ मुझे दे देंगे कि महत्व देता है जैसे:जावास्क्रिप्ट में HTML को अनदेखा कैसे करें?

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

और मुझे तरह जावास्क्रिप्ट के साथ "< < < & & &" देखने के लिए इस मुद्रित करने के लिए की जरूरत है।

लेकिन यहां पकड़ है: मैं आंतरिक HTML का उपयोग नहीं कर सकता (मैं वास्तव में इस मान को प्रोटोटाइप लाइब्रेरी में भेज रहा हूं जो टेक्स्ट नोड्स बनाता है, इसलिए यह मेरी कच्ची HTML स्ट्रिंग को अनदेखा नहीं करता है। यदि पुस्तकालय संपादित करना नहीं होगा एक विकल्प है, कैसे आप इस एचटीएमएल unescape हैं?

मैं यहाँ असली सौदा undertand करने के लिए, क्या तार के इस प्रकार न छोड़ने का खतरा है की ज़रूरत है? कैसे innerHTML यह करता है? और क्या अन्य विकल्प मौजूद हैं?

संपादित करें - समस्या जावास्क्रिप्ट सामान्य बचने/अनसुलझा या यहां तक ​​कि jQuery/प्रोटोटाइप कार्यान्वयन का उपयोग करने के बारे में नहीं है, लेकिन हमारे द्वारा आने वाले सुरक्षा मुद्दों के बारे में समस्या नहीं है इनमें से किसी को भी ... उर्फ ​​"उन्होंने मुझे बताया कि यह उनका उपयोग करने के लिए बहुत असुरक्षित था"

(जो लोग इस अजीब स्ट्रिंग को अनदेखा करते हुए आंतरिक HTML के साथ बात कर रहे हैं, उनके लिए यह आसान उदाहरण देखें:

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

उत्तर

11

क्या जोखिम है ... पर एक बेहतर संभाल पाने के लिए &lt;b&gt;&lt;&lt;&amp;&amp;&amp;&lt;/b&gt; के लिए अपने परीक्षण स्ट्रिंग बदलें (या बेहतर, के लिए कुकी चोरी स्पैम &lt;img src='http://www.spam.com/ASSETS/0EE75B480E5B450F807117E06219CDA6/spamReg.png' onload='alert(document.cookie);'&gt;)

http://jsbin.com/uveme/139/ पर उदाहरण देखें (अपने उदाहरण पर आधारित है, का उपयोग करते हुए अनदेखा करने के लिए प्रोटोटाइप।) विभिन्न प्रभाव देखने के लिए चार अलग-अलग बटनों पर क्लिक करने का प्रयास करें। केवल अंतिम सुरक्षा सुरक्षा जोखिम है। (आप देख सकते हैं/http://jsbin.com/uveme/139/edit पर स्रोत को संपादित करें) उदाहरण वास्तव में अपने कुकीज़ चोरी नहीं करता है ...

  1. अपने पाठ एक ज्ञात-सुरक्षित स्रोत से आ रहा है, तो और नहीं किसी भी उपयोगकर्ता इनपुट के आधार पर है, तो आप सुरक्षित हैं।
  2. आप createTextNode उपयोग कर रहे हैं कि अनछुए नोड वस्तु अपने दस्तावेज़ में सीधे सम्मिलित करने के लिए एक पाठ नोड और appendChild बनाने के लिए, आप सुरक्षित हैं।
  3. अन्यथा, आपको यह सुनिश्चित करने के लिए उचित उपाय करने की आवश्यकता है कि असुरक्षित सामग्री इसे आपके दर्शक के ब्राउज़र में नहीं ला सके।

नोट: As pointed out by Ben VinegarcreateTextNode का उपयोग करना एक जादुई गोली नहीं है: इसे प्रयोग स्ट्रिंग से बचने के लिए, तो textContent या innerHTML का उपयोग कर भाग निकले पाठ बाहर निकलने के लिए और इसके साथ अन्य कोई काम कर अपने बाद के उपयोगों में आप की रक्षा नहीं करता। Particluar में, गुणों को पॉप्युलेट करने के लिए उपयोग किए जाने पर escapeHtml method in Peter Brown's answer below असुरक्षित है।

+0

यह वास्तव में उपयोगी है। तो, नीचे की रेखा, यदि उपयोगकर्ता से कुछ भी आ रहा है, तो यह टेक्स्ट नोड होना चाहिए ?? – DFectuoso

+0

@DFectuoso: यह एक दृष्टिकोण है, जो काम करता है यदि आप नहीं चाहते हैं कि वे किसी भी HTML सुविधाओं का उपयोग करने में सक्षम हों। यदि, उदाहरण के लिए, आप चाहते हैं कि वे अपने टेक्स्ट को स्टाइल करें, आपको यह पता लगाना होगा कि आप इसे सुरक्षित तरीके से कैसे करते हैं ... – Stobor

+0

सुरक्षा समस्याओं में दिलचस्प अंतर्दृष्टि। –

2

कोशिश भागने और unescape जावास्क्रिप्ट में उपलब्ध

अधिक जानकारी कार्य: http://www.w3schools.com/jsref/jsref_unescape.asp

+0

इम कि कि विधि के साथ एचटीएमएल न छोड़ने कुछ गंभीर सुरक्षा के मुद्दों ... मेरी बात उस तरह .... – DFectuoso

+0

को जन्म दे सकता कहा था क्षमा करें मुझे याद आया कि संपादित करें :( – Anuraj

+4

कोई समस्या नहीं, मैंने जवाब देने के बाद ऐसा किया ... इस लड़के को वोट न दें! – DFectuoso

2

कुछ अटकलबाजी क्या इसके लायक है के लिए।

आंतरिक HTML सचमुच ब्राउज़र एचटी एचटीएमएल की व्याख्या कर रहा है।

तो < प्रतीक से कम हो जाता है क्योंकि अगर आप HTML दस्तावेज़ में < डालते हैं तो ऐसा होगा।

& के साथ स्ट्रिंग का सबसे बड़ा सुरक्षा जोखिम एक eval स्टेटमेंट है, कोई भी JSON एप्लिकेशन असुरक्षित कर सकता है। मैं कोई सुरक्षा विशेषज्ञ नहीं हूं लेकिन अगर स्ट्रिंग्स स्ट्रिंग्स रहती हैं तो आपको ठीक होना चाहिए।

यह एक और तरीका है कि आंतरिक HTML सुरक्षित है अनचाहे स्ट्रिंग एचटीएमएल बनने के रास्ते पर है, इसलिए जावास्क्रिप्ट चलाने का कोई खतरा नहीं है।

1

जब तक आपका कोड टेक्स्ट नोड्स बना रहा हो, ब्राउज़र को कुछ हानिकारक प्रस्तुत नहीं करना चाहिए। वास्तव में, यदि आप फ़ायरबग या आईई देव टूलबार का उपयोग कर जेनरेट किए गए टेक्स्ट नोड के स्रोत का निरीक्षण करते हैं, तो आप देखेंगे कि ब्राउज़र विशेष वर्णों से फिर से भाग रहा है।

यह एक

"<script>" 

देने के लिए और यह यह करने के लिए फिर से निकल जाता है:

"&lt;script&gt;" 

वहाँ नोड्स के कई प्रकार हैं: तत्वों, दस्तावेज, पाठ, गुण, आदि

खतरा तब होता है जब ब्राउजर स्ट्रिंग को एक स्ट्रिंग के रूप में व्याख्या करता है।आंतरिक HTML संपत्ति इस समस्या के लिए अतिसंवेदनशील है, क्योंकि यह ब्राउज़र को एलिमेंट नोड्स बनाने के लिए निर्देश देगा, जिसमें से एक स्क्रिप्ट तत्व हो सकता है, या ऑन-हाउसवेयर हैंडलर जैसे इनलाइन जावास्क्रिप्ट हो सकता है। टेक्स्ट नोड्स बनाना इस समस्या को रोकता है।

+0

मुझे इसे मारो। :) – Stobor

+0

हालांकि, मैं इसे < के साथ कुछ भी खराब नहीं कर सका क्रिप्ट > अलर्ट ('हाय'); </स्क्रिप्ट > '- किसी कारण से लिपि डाली गई थी, लेकिन इसे नहीं चलाया जा रहा था। लेकिन छवियों के लिए अधिभार था, इसलिए मैंने इसका शोषण किया ... – Stobor

+0

@Stobor - क्या आप मुझे दिखा सकते हैं कि आपका क्या मतलब है? मैं उत्सुक हूँ ... –

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

जो उत्तर मैंने अभी पोस्ट किया है, वह आपको विषय पृष्ठ में वास्तविक पृष्ठ शीर्षक (& या &) के साथ रखने की अनुमति देता है। ... और एचटीएमएल पेज का शरीर ईमेल के शरीर में दिखाई देगा। – Jan

5

एक बहुत अच्छा पढ़ा http://benv.ca/2012/10/4/you-are-probably-misusing-DOM-text-methods/ जो बताता है कि क्यों createTextNode का उपयोग करने का सम्मेलन ज्ञान वास्तव में बिल्कुल भी सुरक्षित नहीं है है।

एक प्रतिनिधि उदाहरण जोखिम के ऊपर लेख से ले:

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

यह विशेष रूप से 'escapeHtml' विधि बनाने के उपयोग-मामले में सुरक्षित नहीं है जिसका उपयोग तत्व विशेषताओं को पॉप्युलेट करने के लिए किया जाता है। हालांकि, उनका मुद्दा खड़ा है: यदि आप उस संदर्भ के 100% निश्चित नहीं हैं जिसमें आपका फ़ंक्शन उपयोग किया जा रहा है, तो आप यह सुनिश्चित नहीं कर सकते कि यह कार्य सुरक्षित है। 'CreateTextNode' का उपयोग' document.getElementById ("whereItGoes") जैसे निर्माण में ठीक से करें। AppendChild (document.createTextNode (unsafe_str)); वह वह नहीं है जिस पर वह टिप्पणी कर रहा है ... – Stobor

संबंधित मुद्दे