पब्लिश होने की तारीख: 12 जून, 2025
एट्रिब्यूट में < और > को एस्केप करने के लिए, 20 मई, 2025 को एचटीएमएल स्पेसिफ़िकेशन को अपडेट किया गया था. इससे, म्यूटेशन एक्सएसएस (mXSS) से जुड़ी जोखिम को रोकने में मदद मिलती है. यह बदलाव Chrome 138 में किया गया था. इसे 28 मई, 2025 को बीटा वर्शन के तौर पर लॉन्च किया गया था. यह 24 जून, 2025 से स्टेबल वर्शन बन जाएगा.
इस पोस्ट में, एचटीएमएल एट्रिब्यूट के एस्केप किए गए बदलाव से वेब डेवलपर पर पड़ने वाले असर और संभावित रुकावटों के बारे में बताया गया है. इस बदलाव के पीछे सुरक्षा से जुड़ी वजहों के बारे में, Security Engineering ब्लॉग पर मौजूद इससे जुड़ी पोस्ट में बताया गया है.
क्या बदलाव हुए
मान लें कि आपके पास एक <div> एलिमेंट है, जिसके एट्रिब्यूट data-content की वैल्यू "<u>hello</u>" है. div.outerHTML को पढ़ने पर क्या होता है?
पहले, आपको यह एचटीएमएल दिखता था:
<div data-content="<u>hello</u>"></div>
बदलाव करने के बाद, आपको यह एचटीएमएल दिखेगा:
<div data-content="<u>hello</u>"></div>
पहले, एट्रिब्यूट में < या > को एस्केप नहीं किया जाता था. अब, इन दोनों वर्णों को हमेशा एस्केप किया जाता है.
क्या परिवर्तित नहीं हुआ है
इस बदलाव से, सीरियलाइज़ेशन के दौरान एचटीएमएल फ़्रैगमेंट को स्ट्रिंग में बदलने के तरीके में खास तौर पर बदलाव होता है. इसका असर सिर्फ़ उन स्थितियों पर पड़ता है जहां innerHTML या outerHTML प्रॉपर्टी को ऐक्सेस किया जाता है या किसी एलिमेंट पर getHTML() तरीका लागू किया जाता है. ये कार्रवाइयां मौजूदा DOM स्ट्रक्चर को लेती हैं और टेक्स्ट के तौर पर एचटीएमएल दिखाती हैं.
इस बदलाव से, एचटीएमएल पार्स करने की प्रोसेस पर कोई असर नहीं पड़ेगा. नीचे दिया गया एचटीएमएल देखें:
<div id="div1" data-content="<u>hello</u>"></div>
<div id="div2" data-content="<u>hello</u>"></div>
दोनों div को एक ही तरह से पार्स किया जाएगा और दोनों मामलों में
div.dataset.content, "<u>hello</u>" दिखाएगा.
क्या नहीं टूटेगा?
अगर एट्रिब्यूट की वैल्यू पाने के लिए, किसी भी DOM API का इस्तेमाल किया जाता है, जैसे कि
getAttribute,
getAttributeNS,
dataset या
attributes, तो वे पहले की तरह ही डिकोड की गई वैल्यू दिखाएंगे. खास तौर पर, < और > को डिकोड करके.
नीचे दिए गए उदाहरण पर ध्यान दें. इसमें सभी console.log लाइनें "<u>" को लॉग करेंगी:
<div data-content="<u>"></div>
const div = document.querySelector("div");
// All of the following will log "<u>"
console.log(div.getAttribute("data-content"));
console.log(div.dataset.content);
console.log(div.attributes['data-content'].value);
क्या-क्या खराब हो सकता है?
एट्रिब्यूट पाने के लिए innerHTML और outerHTML
अगर किसी एट्रिब्यूट की वैल्यू निकालने के लिए innerHTML या outerHTML का इस्तेमाल किया जाता है, तो आपका कोड काम नहीं कर सकता. यहां दिया गया उदाहरण थोड़ा मुश्किल है, लेकिन इसे समझने की कोशिश करें:
<div data-content="<u>"></div>
const div = document.querySelector("div");
const content = div.outerHTML.match(/"([^"]+)"/)[1];
console.log(content);
इस बदलाव के बाद, यह कोड अलग तरह से काम करेगा. पहले,
content की वैल्यू "<u>" होती, लेकिन अब यह "<u>" है.
ध्यान दें कि रेगुलर एक्सप्रेशन की मदद से एचटीएमएल को पार्स करने का सुझाव नहीं दिया जाता. अगर आपको किसी एट्रिब्यूट की वैल्यू चाहिए, तो पिछले सेक्शन में बताए गए DOM API का इस्तेमाल करें.
शुरू से आखिर तक के टेस्ट
अगर आपके पास ऐसी सीआई/सीडी पाइपलाइन है जहां एचटीएमएल जनरेट करने के लिए Chromium का इस्तेमाल किया जाता है और आपने एचटीएमएल की तुलना स्टैटिक वैल्यू से करने के लिए टेस्ट लिखे हैं, तो किसी भी एट्रिब्यूट में < या > होने पर ये टेस्ट काम नहीं कर सकते.
यह एक सामान्य गड़बड़ी है—आपको अनुमानित वैल्यू अपडेट करनी होगी, ताकि सभी < और > वर्ण, < और >, में बदल जाएं.
खास जानकारी
इस ब्लॉग पोस्ट में, एचटीएमएल स्पेसिफ़िकेशन में हुए एक बदलाव के बारे में बताया गया है. इस बदलाव की वजह से, ब्राउज़र एट्रिब्यूट में < और > को एस्केप करना शुरू कर देंगे. इससे, सुरक्षा को बेहतर बनाने के लिए, म्यूटेशन एक्सएसएस के कुछ इंस्टेंस को रोका जा सकेगा.
यह बदलाव, 24 जून, 2025 से सभी उपयोगकर्ताओं के लिए, Chromium (138 वर्शन) और Firefox (140 वर्शन) पर उपलब्ध होगा. यह सुविधा, Safari 26 के बीटा वर्शन में भी शामिल है. इसे सितंबर 2025 के आस-पास रिलीज़ किया जाना चाहिए.
अगर आपको लगता है कि इस बदलाव की वजह से आपकी वेबसाइट काम नहीं कर रही है और इसे ठीक करने का आसान तरीका नहीं है, तो कृपया https://issues.chromium.org/ पर जाकर गड़बड़ी की शिकायत करें.