HTML एंटिटी एन्कोडिंग बनाम URL एन्कोडिंग: प्रमुख अंतर

HTML एंटिटी एन्कोडिंग क्या है?

HTML एंटिटी एन्कोडिंग (जिसे HTML एस्केपिंग भी कहा जाता है) उन वर्णों को, जिनका HTML में विशेष अर्थ होता है, ऐसे एंटिटी रेफरेंस में बदल देती है जिन्हें ब्राउज़र मार्कअप के रूप में समझने के बजाय वास्तविक वर्ण के रूप में दिखाता है। एन्कोड करने के लिए सबसे महत्वपूर्ण वर्ण हैं <, >, &, " और '।

HTML एन्कोडिंग के बिना, <script>alert('XSS')</script> जैसी स्ट्रिंग को ब्राउज़र JavaScript के रूप में चला देगा। एन्कोडिंग के साथ, यह <script>alert('XSS')</script> बन जाती है और एक हानिरहित टेक्स्ट के रूप में दिखाई देती है।

HTML एंटिटीज़ को दो रूपों में लिखा जा सकता है: नामित एंटिटीज़ जैसे &, < और ", या संख्यात्मक एंटिटीज़ जैसे &, < और "। संख्यात्मक एंटिटीज़ वर्ण के Unicode कोड पॉइंट का उपयोग करती हैं और किसी भी Unicode वर्ण को दर्शा सकती हैं।

<!-- HTML एन्कोडिंग से पहले -->
<p>The formula is: x < y & y > z</p>
<!-- ब्राउज़र < को एक टैग की शुरुआत के रूप में समझ लेता है! -->

<!-- HTML एन्कोडिंग के बाद -->
<p>The formula is: x &lt; y &amp; y &gt; z</p>
<!-- ब्राउज़र दिखाता है: x < y & y > z -->

<!-- सामान्य HTML एंटिटीज़ -->
&amp;   → &   (ampersand)
&lt;    → <   (less than)
&gt;    → >   (greater than)
&quot;  → "   (double quote)
&#39;   → '   (single quote / apostrophe)
&nbsp;  →     (non-breaking space)

URL एन्कोडिंग क्या है?

URL एन्कोडिंग (percent-encoding) उन वर्णों को, जो URLs में सुरक्षित नहीं होते, एक प्रतिशत चिह्न के बाद बाइट मान को दर्शाने वाले दो हेक्साडेसिमल अंकों में बदल देती है। इसे RFC 3986 द्वारा परिभाषित किया गया है और यह सुनिश्चित करती है कि URLs में केवल वैध ASCII वर्ण हों जिन्हें इंटरनेट पर सुरक्षित रूप से भेजा जा सके।

URL एन्कोडिंग आवश्यक है क्योंकि URLs की एक सख़्त सिंटैक्स होती है जिसमें कुछ वर्ण डिलिमिटर के रूप में काम करते हैं (/, ?, &, #, =)। जब ये वर्ण डेटा में आते हैं (जैसे क्वेरी पैरामीटर के मानों में), तो उन्हें एन्कोड करना ज़रूरी होता है ताकि उन्हें संरचनात्मक तत्वों के रूप में न समझा जाए।

// URL एन्कोडिंग के उदाहरण
space     → %20
&         → %26
=         → %3D
?         → %3F
#         → %23
/         → %2F
+         → %2B

// एन्कोड किए गए क्वेरी पैरामीटर के साथ पूरा URL
https://example.com/search?q=salt%20%26%20pepper
// q का मान "salt & pepper" है

तुलना तालिका

विशेषता	HTML एंटिटी एन्कोडिंग	URL एन्कोडिंग
उद्देश्य	HTML पेजों में सुरक्षित प्रदर्शन	URLs में सुरक्षित संचरण
मानक	HTML/WHATWG विनिर्देश	RFC 3986
फ़ॉर्मैट	&name; या &#number;	%XX (हेक्स बाइट मान)
Space बनता है	  (non-breaking) या ज्यों का त्यों	%20 या +
& बनता है	&	%26
< बनता है	&lt;	%3C
रोकता है	XSS हमले, टूटा हुआ HTML	टूटे हुए URLs, इंजेक्शन हमले
संदर्भ	HTML दस्तावेज़ का बॉडी और एट्रिब्यूट्स	URL पाथ, क्वेरी स्ट्रिंग्स, फ़्रैगमेंट्स
JS फ़ंक्शन	कोई अंतर्निहित नहीं (लाइब्रेरी या DOM APIs का उपयोग करें)	encodeURIComponent()

आपको दोनों की ज़रूरत कब पड़ती है?

ऐसी कई सामान्य स्थितियाँ हैं जहाँ आपको HTML एन्कोडिंग और URL एन्कोडिंग दोनों की ज़रूरत होती है। सबसे आम मामला तब होता है जब आप किसी URL को किसी HTML एट्रिब्यूट के अंदर रखते हैं, जैसे href या src एट्रिब्यूट। सबसे पहले URL को ठीक से URL-एन्कोड किया जाना चाहिए, और फिर परिणाम में मौजूद किसी भी विशेष HTML वर्ण को HTML-एन्कोड किया जाना चाहिए।

<!-- चरण 1: क्वेरी पैरामीटर के मान को URL-एन्कोड करें -->
<!-- मान: "Tom & Jerry" → URL एन्कोडेड: "Tom%20%26%20Jerry" -->

<!-- चरण 2: URL बनाएँ -->
<!-- URL: https://example.com/search?q=Tom%20%26%20Jerry -->

<!-- चरण 3: href एट्रिब्यूट में उपयोग के लिए URL को HTML-एन्कोड करें -->
<a href="https://example.com/search?q=Tom%20%26%20Jerry">
  Search for Tom &amp; Jerry
</a>

<!-- इस मामले में, % सीक्वेंस को HTML एन्कोडिंग की ज़रूरत नहीं है -->
<!-- क्योंकि % कोई विशेष HTML वर्ण नहीं है -->

<!-- लेकिन अगर URL में & एक डिलिमिटर के रूप में हो, तो उसे HTML-एन्कोड करना ज़रूरी है: -->
<a href="https://example.com/search?q=cats&amp;sort=name">
  Search cats sorted by name
</a>
<!-- &amp; के बिना, ब्राउज़र &sort को एक HTML एंटिटी के रूप में समझ सकता है -->

React, Vue और Angular जैसे आधुनिक फ़्रेमवर्क में, जब आप टेम्पलेट एक्सप्रेशन या JSX का उपयोग करते हैं तो HTML एन्कोडिंग अपने आप हो जाती है। हालाँकि, डायनामिक डेटा से URLs बनाते समय URL एन्कोडिंग अब भी स्पष्ट रूप से करनी पड़ती है।

// React - HTML एन्कोडिंग अपने आप होती है, URL एन्कोडिंग नहीं
function SearchLink({ query }) {
  // URL एन्कोडिंग स्पष्ट रूप से करनी चाहिए
  const url = '/search?q=' + encodeURIComponent(query);

  // JSX में HTML एन्कोडिंग अपने आप होती है
  return <a href={url}>Search for {query}</a>;
  // React अपने आप href और टेक्स्ट कंटेंट दोनों को HTML-एन्कोड कर देता है
}

XSS रोकथाम: कहाँ कौन सी एन्कोडिंग इस्तेमाल करें

क्रॉस-साइट स्क्रिप्टिंग (XSS) की रोकथाम के लिए यह ज़रूरी है कि उस संदर्भ के आधार पर सही एन्कोडिंग लागू की जाए जहाँ यूज़र इनपुट रखा जा रहा है। किसी दिए गए संदर्भ में गलत प्रकार की एन्कोडिंग इस्तेमाल करने से कोई सुरक्षा नहीं मिलती।

• HTML बॉडी संदर्भ: HTML एंटिटी एन्कोडिंग का उपयोग करें। इससे <script> जैसे इंजेक्ट किए गए टैग को मार्कअप के रूप में समझे जाने से रोका जाता है।
• HTML एट्रिब्यूट संदर्भ: HTML एंटिटी एन्कोडिंग का उपयोग करें और एट्रिब्यूट के मानों को हमेशा उद्धरण चिह्नों में रखें। बिना उद्धरण वाले एट्रिब्यूट को HTML एन्कोडिंग के बावजूद तोड़ा जा सकता है।
• URL संदर्भ (href, src): डायनामिक हिस्सों के लिए URL एन्कोडिंग का उपयोग करें, और फिर अगर पूरे URL को HTML में रख रहे हैं तो उसे HTML-एन्कोड करें। यह सत्यापित करें कि URL एक सुरक्षित स्कीम (https:) से शुरू होता है ताकि javascript: URLs को रोका जा सके।
• JavaScript संदर्भ: JavaScript स्ट्रिंग एस्केपिंग का उपयोग करें (JSON.stringify या कोई समर्पित लाइब्रेरी)। JavaScript संदर्भ में न तो HTML एन्कोडिंग और न ही URL एन्कोडिंग पर्याप्त है।
• CSS संदर्भ: CSS एस्केपिंग का उपयोग करें। HTML और URL एन्कोडिंग CSS इंजेक्शन से सुरक्षा नहीं देती।

मुख्य सिद्धांत यह है: आउटपुट संदर्भ के लिए एन्कोड करें, इनपुट स्रोत के लिए नहीं। यूज़र इनपुट के एक ही टुकड़े को अलग-अलग एन्कोडिंग की ज़रूरत हो सकती है, यह इस पर निर्भर करता है कि वह रिस्पॉन्स में कहाँ दिखाई देता है। XSS रोकथाम के लिए कभी भी केवल इनपुट वैलिडेशन पर निर्भर न रहें; हमेशा आउटपुट एन्कोडिंग लागू करें।