डेवलपर टूल · HTML इकाई एस्केपर
आंतरिक HTML के बिना HTML इकाइयों को डिकोड करना: लुकअप-टेबल डिकोडर कैसे काम करता है
· यह काम किस प्रकार करता है
HTML सुरक्षा एन्कोडिंग
इनरHTML को असाइन करके इकाइयों को डिकोड करने की लोकप्रिय ट्रिक आपके इनपुट को HTML पार्सर के माध्यम से चलाती है, जो बिल्कुल वही है जो आप नहीं चाहते हैं। यह पोस्ट सुरक्षित तालिका-आधारित दृष्टिकोण की व्याख्या करती है और यह नामित, दशमलव और हेक्स संदर्भों को कैसे संभालती है।
डिकोडर जिसने <img onerror> को निष्पादित किया - एक ठोस मामला जहां 'बस इसे डिकोड करें' स्क्रिप्ट निष्पादन बन गया
सामान्य एक-लाइनर element.innerHTML = इनपुट डीकोड & से अधिक कार्य करता है। यदि इनपुट में <img src=x onerror=...> भी शामिल है, तो ब्राउज़र एक छवि तत्व और एक इवेंट-हैंडलर विशेषता बनाता है। यह इस बात पर निर्भर करता है कि वह नोड कैसे संलग्न और लोड किया गया है, यह फ़ॉर्मेटिंग शॉर्टकट को स्क्रिप्ट निष्पादन में बदल सकता है। चिपकाई गई HTML-जैसी स्ट्रिंग तब डेटा बनी रहनी चाहिए जब उसका एकमात्र काम वर्ण संदर्भों को हल करना हो, न कि उसे DOM ट्री में पार्स किया जाना चाहिए।
आंतरिक HTML वास्तव में एक स्ट्रिंग के साथ क्या करता है - पार्सिंग, तत्व निर्माण और ईवेंट हैंडलर विशेषताएँ, न कि केवल इकाई प्रतिस्थापन
आंतरिक HTML HTML पार्सर को आमंत्रित करता है: टैग नोड बन जाते हैं, विशेषताएँ ब्राउज़र अर्थ प्राप्त करती हैं, और बाद में टेक्स्टकंटेंट परिणाम से स्ट्रिप मार्कअप पढ़ता है। एक <strong> टैग जिसे आप शाब्दिक इनपुट के रूप में संरक्षित करना चाहते हैं वह टेक्स्ट फ़ॉर्मेटिंग के रूप में गायब हो सकता है। एक अलग तत्व सामान्य सुरक्षा गारंटी नहीं है; कोड अक्सर उस सबट्री को दोबारा सम्मिलित करता है या परिणामी HTML का कहीं और उपयोग करता है। यदि आपको अविश्वसनीय इनपुट प्रदर्शित करने की आवश्यकता है, तो टेक्स्टकंटेंट असाइन करें और केवल तभी सेनिटाइज़ करें जब आप जानबूझकर HTML रेंडर करना चुनते हैं।
लुकअप-टेबल दृष्टिकोण - &name;, &#NNN के लिए एक नियमित अभिव्यक्ति; और &#xHHH;, और नामों से लेकर पात्रों तक का एक नक्शा
ToolAcre का डिकोडर &name;, { या { फॉर्म का संदर्भ ढूंढने के लिए एक बाउंडेड रेगुलर एक्सप्रेशन का उपयोग करता है। नामांकित संदर्भों को एक व्यावहारिक स्पष्ट तालिका में देखा जाता है, जिसमें amp, lt, gt, उद्धरण और सामान्य टाइपोग्राफी शामिल हैं। किसी अज्ञात नाम का अनुमान लगाने के बजाय उसे लिखित रूप में छोड़ दिया जाता है। यह दृष्टिकोण कोई तत्व नहीं बनाता है और HTML पार्सर को कॉल नहीं करता है; यह बस एक स्ट्रिंग में मान्यता प्राप्त सबस्ट्रिंग को प्रतिस्थापित करता है। तालिका जानबूझकर एक उपसमुच्चय है, सभी HTML नामित वर्ण संदर्भ नहीं।
संख्यात्मक संदर्भों को संभालना - दशमलव और हेक्साडेसिमल कोड बिंदुओं को पार्स करना और उन्हें सूक्ष्म वर्णों सहित स्ट्रिंग में परिवर्तित करना
संख्यात्मक संदर्भ के लिए, &# के बाद दशमलव को पार्स करें या &#x के बाद हेक्साडेसिमल को पार्स करें, फिर संख्यात्मक कोड बिंदु को String.fromCodePoint वाले वर्ण में बदलें। 0x1F600 जैसा सूक्ष्म मान एक इमोजी उत्पन्न करता है, दो स्वतंत्र मुद्रण योग्य वर्ण नहीं। कार्यान्वयन ब्राउज़र की तरह ऐतिहासिक Windows-1252 नियंत्रण-कैटेगरी मानों को भी मैप करता है; शून्य, सरोगेट कोड बिंदु और U+10FFFF से ऊपर के मान एक प्रतिस्थापन वर्ण बन जाते हैं। वह स्पष्ट त्रुटि प्रबंधन एक अमान्य संख्या को डिकोडर को क्रैश होने से बचाता है।
व्यावहारिक उदाहरण: एक स्ट्रिंग को डिकोड करना जो &, © और 😀 को मिलाता है - प्रत्येक मिलान को तालिका या संख्या से हल किया जाता है
शाब्दिक इनपुट &, © और 😀 को डिकोड करें: नामित तालिका के माध्यम से पहला संदर्भ मानचित्र &, दशमलव 169 © बन जाता है, और हेक्स 1F600 😀 बन जाता है। उनके बगल में एक कच्चा <img onerror="alert(1)"> शामिल करें। डिकोडर उस टैग-दिखने वाले अनुक्रम को सामान्य स्ट्रिंग वर्णों के रूप में लौटाता है; यह कोई छवि नहीं बनाता या कोई ईवेंट निष्पादित नहीं करता. बाद में परिणाम को वास्तविक पृष्ठ पर डालते समय, डिकोड की गई स्ट्रिंग को लेने और इसे वापस आंतरिक HTML पर असाइन करने के बजाय एक सुरक्षित टेक्स्ट सिंक का उपयोग करें।
तालिका दृष्टिकोण क्या नहीं करेगा - विरासत अर्धविराम-रहित संदर्भ और पार्सर त्रुटि-पुनर्प्राप्ति विचित्रताएं, जब तक जानबूझकर लागू नहीं किया जाता
लुकअप दृष्टिकोण जानबूझकर HTML पार्सर की विरासत अर्धविराम-रहित पुनर्प्राप्ति नियमों को पुन: उत्पन्न नहीं करता है। अर्धविराम के बिना © अछूता रह सकता है। निश्चित नामित तालिका दो हजार से अधिक HTML5 नामित संदर्भों में से कई को भी छोड़ देती है। वे सीमाएँ एक छोटे पूर्वानुमानित डिकोडर के लिए ईमानदार व्यापार-बंद हैं; केवल स्पष्ट रूप से समाप्त किए गए संदर्भों को स्वीकार करने से एम्परसेंड वाले मनमाने गद्य को मार्कअप के रूप में मानने से बचा जाता है। यदि पूर्ण ब्राउज़र संगतता आवश्यक है तो टूल के प्रलेखित समर्थित नामों की जाँच करें।
इसमें क्या शामिल नहीं है - आप HTML को सेनिटाइज़ करना चाहते हैं, जो एक अलग समस्या है
डिकोडिंग संदर्भ प्रदर्शन के लिए HTML को स्वच्छ नहीं कर रहा है। यदि डिकोड किए गए टेक्स्ट में <script> अनुक्रम है, तो एप्लिकेशन का कोई भिन्न भाग बाद में इसे मार्कअप के रूप में सम्मिलित करता है तो यह खतरनाक बना रहता है। HTML विशेषता, JavaScript स्ट्रिंग और URL जैसे संदर्भों में से प्रत्येक को अपने स्वयं के आउटपुट एन्कोडिंग और नीति की आवश्यकता होती है। ToolAcre पाठ लौटाता है; यह भविष्य के असुरक्षित सिंक को सुरक्षित नहीं बना सकता।
टेकअवे: इनपुट को डेटा के रूप में मानें - HTML इकाई एस्केपर HTML पार्सर के बजाय लुकअप टेबल के साथ कैसे डिकोड करता है, इसलिए आपका इनपुट टेक्स्ट बना रहता है
इनपुट को डेटा मानें. HTML इकाई एस्केपर एक तालिका और कोड-बिंदु अंकगणित के साथ डिकोड करता है, आंतरिक HTML चाल से नहीं, इसलिए मार्कअप-दिखने वाले पेलोड टूल के भीतर निष्क्रिय वर्ण बने रहते हैं। तीन संदर्भों को आज़माएं, फिर डिकोड किए गए टेक्स्ट और आप इसे आगे कैसे उपयोग करने की योजना बना रहे हैं, दोनों का निरीक्षण करें: यदि आप इसे HTML के रूप में पुनः पार्स करते हैं तो सुरक्षा सीमा खो जाती है।