HTML एंटिटी एनकोडिंग कैसे काम करती है
HTML एंटिटी एक कैरेक्टर रेफरेंस है जिसे ब्राउज़र पार्स करके एकल वर्ण में बदल देता है। पाँच आरक्षित HTML वर्ण (<, >, &, ", ') को हमेशा एनकोडिंग की ज़रूरत होती है जब टेक्स्ट HTML के रूप में रेंडर हो; बाकी वैकल्पिक है और डॉक्यूमेंट एनकोडिंग पर निर्भर करता है।
- मोड और स्कोप चुनें. एनकोड मोड इनपुट को एक-एक वर्ण पढ़ता है। डिकोड मोड एंटिटी पैटर्न खोजता है। स्कोप टॉगल तय करता है कि केवल पाँच HTML-सेफ वर्ण एनकोड होंगे, या सभी नॉन-ASCII कोड पॉइंट भी।
- एंटिटी स्टाइल चुनें. नेम्ड एंटिटी (
©) सोर्स में पढ़ने में आसान होती हैं। डेसिमल (©) और हेक्स (©) रेफरेंस हर Unicode कोड पॉइंट को बिना नाम के कवर करते हैं। पुराने ईमेल क्लाइंट और XML पार्सर न्यूमेरिक रूप पसंद करते हैं। - इनपुट को स्कैन करें. एनकोड पर, हम प्रत्येक कोड पॉइंट पढ़कर लगभग 200 सामान्य नेम्ड एंटिटी की टेबल में देखते हैं। मिलान न हो तो न्यूमेरिक फॉलबैक। डिकोड पर, एक रेगेक्स
&name;,&#NNN;और&#xHH;तीनों एक ही पास में मैच करता है। - वर्णों से मैप करें. नेम्ड मैच रिवर्स टेबल से रिज़ॉल्व होते हैं। न्यूमेरिक मैच
String.fromCodePointसे बेस 10 या 16 में। अज्ञात नेम्ड एंटिटी अपरिवर्तित रहती हैं ताकि आंशिक इनपुट बिना नुकसान राउंड-ट्रिप हो। - लाइव मोड. लाइव मोड टॉगल करें और हर कीस्ट्रोक 150ms डिबाउंस के साथ कन्वर्शन फिर से चलाता है। टेम्पलेट में पेस्ट करने से पहले स्निपेट ट्वीक करते समय तुरंत फीडबैक के लिए उपयोगी।
HTML एंटिटी एनकोड क्यों करें
- यूज़र इनपुट को लेआउट तोड़ने से रोकें. जब कोई यूज़र कमेंट बॉक्स में
<टाइप करे और वह सीधे HTML में जाए, तो पेज का बाकी हिस्सा टूट जाता है। आरक्षित वर्णों को पहले एनकोड करने से ब्राउज़र उसे टैग की शुरुआत की बजाय वर्ण के रूप में रेंडर करता है। - एट्रिब्यूट वैल्यू वैलिड रखें. HTML एट्रिब्यूट के अंदर quoted स्ट्रिंग एम्बेड करने के लिए एंबेडेड कोट को
"या'से बदलना ज़रूरी है। अन्यथा पार्सर एट्रिब्यूट जल्दी बंद कर देता है। - स्टोर्ड डेटा में अनजाने HTML को निष्क्रिय करें. लॉग, बग रिपोर्ट और चैट एक्सपोर्ट में अक्सर एंगल ब्रैकेट और एम्परसैंड होते हैं। डॉक्यूमेंटेशन पेज में पेस्ट करने से पहले एंटिटी एनकोडिंग उन्हें टेक्स्ट के रूप में दिखाती है।
- कोड स्निपेट सुरक्षित रूप से शेयर करें. ब्लॉग पोस्ट या ईमेल में
<script>alert(1)</script>जैसा उदाहरण पोस्ट करने के लिए ब्रैकेट एनकोड करने होंगे ताकि स्निपेट दिखे न कि रन हो।
सामान्य अनुप्रयोग
एंटिटी एनकोडिंग हर जगह आती है जहाँ रॉ टेक्स्ट रनटाइम पर HTML में कम्पोज़ होता है — भले ही फ्रेमवर्क आमतौर पर इसे संभालता हो, मैनुअल टूल उन पलों के लिए उपयोगी है जब वह नहीं संभालता।
- सर्वर-रेंडर्ड टेम्पलेट: Jinja2, ERB, Twig और Handlebars डिफ़ॉल्ट ऑटो-एस्केप करते हैं, लेकिन raw ब्लॉक और `safe` मार्कर उसे बंद कर देते हैं — कोडेक से कन्फर्म करें कि एस्केप क्या प्रोड्यूस करता।
- ईमेल और न्यूज़लेटर: कई ESP टेम्पलेटिंग इंजन मर्ज फ़ील्ड ऑटो-एस्केप नहीं करते, इसलिए यूज़र-सप्लाइड नामों में स्मार्ट कोट्स और कॉपीराइट ग्लिफ़ को प्री-एनकोडिंग चाहिए।
- डॉक्यूमेंटेशन और कोड सैंपल: Markdown ब्लॉग पोस्ट या स्टैटिक साइट में HTML टैग उदाहरण पेस्ट करने के लिए ब्रैकेट एनकोड करने होंगे।
एक काम करता उदाहरण
इनपुट में <script>alert('hi')</script> पेस्ट करें — मोड: एनकोड, स्टाइल: नेम्ड, स्कोप: मिनिमल। आउटपुट होगा <script>alert('hi')</script>। स्टाइल न्यूमेरिक हेक्स करें तो वही इनपुट <script>alert('hi')</script> देगा। मोड डिकोड करें, एनकोडेड स्ट्रिंग वापस पेस्ट करें — मूल टैग वापस आ जाता है।
FAQ
HTML एंटिटी क्या होती हैं?
HTML एंटिटी कैरेक्टर रेफरेंस हैं जिन्हें ब्राउज़र पेज पार्स करते समय एकल वर्ण में बदल देता है। तीन रूप हैं: नेम्ड (जैसे & for &), डेसिमल न्यूमेरिक (&), और हेक्स न्यूमेरिक (&)। पाँच आरक्षित HTML वर्णों (<, >, &, ", ') को एनकोडिंग चाहिए जब टेक्स्ट HTML में जाए।
नेम्ड बनाम न्यूमेरिक एंटिटी कब उपयोग करें?
नेम्ड एंटिटी तब उपयोग करें जब सोर्स स्पष्ट पढ़ना हो। न्यूमेरिक (डेसिमल या हेक्स) तब जब कंज्यूमर पुराना या सख्त हो — XML पार्सर, लेगेसी ईमेल क्लाइंट और कुछ फ़ीड रीडर HTML5 नेम्ड एंटिटी का सीमित सबसेट पहचानते हैं, लेकिन न्यूमेरिक रूप सभी पहचानते हैं।
क्या डिकोडिंग & जैसी हेक्स एंटिटी हैंडल करती है?
हाँ। डिकोडर एक रेगेक्स उपयोग करता है जो तीनों एंटिटी रूप एक पास में मैच करता है: &name;, &#NNN;, और &#xHH;। न्यूमेरिक मैच String.fromCodePoint से बेस 10 या 16 में रिज़ॉल्व होते हैं। मिश्रित इनपुट सही डिकोड होता है, और अज्ञात नाम लिटरल टेक्स्ट के रूप में रहते हैं।
क्या यह अनट्रस्टेड इनपुट के लिए सुरक्षित है?
कोडेक स्वयं ब्राउज़र-only है और आपका इनपुट कहीं नहीं भेजता। आउटपुट एम्बेड करना सुरक्षित है या नहीं यह कॉन्टेक्स्ट पर निर्भर है। एंटिटी एनकोडिंग HTML बॉडी और एट्रिब्यूट-वैल्यू कॉन्टेक्स्ट संभालती है। JavaScript, CSS और URL कॉन्टेक्स्ट के लिए अपनी एनकोडिंग नियम चाहिए — अकेली एंटिटी एनकोडिंग वहाँ पर्याप्त नहीं है।
ब्राउज़र-साइड एंटिटी एनकोडिंग यूज़र इनपुट और रेंडर्ड HTML के बीच की सीमा पर काम करती है। स्थानीय रूप से कन्वर्शन करने का मतलब है कि आप जाँच सकते हैं कि आपका फ्रेमवर्क क्या एमिट करता, बिना ओरिजिनल टेक्स्ट किसी थर्ड-पार्टी टूल को भेजे।