Chrome, document.domain में बदलाव करने की सुविधा बंद करता है

अगर आपकी वेबसाइट, document.domain को सेट करने पर निर्भर करती है, तो आपको कार्रवाई करनी होगी.

Maud Nalpas
Eiji Kitamura

क्या बदलाव हो रहा है और क्यों?

Chrome 115 से, वेबसाइटें document.domain सेट नहीं कर पाएंगी: Chrome, document.domain को बदला नहीं जा सकने वाला बना देगा. क्रॉस-ऑरिजिन कम्यूनिकेशन के लिए, आपको अन्य तरीकों का इस्तेमाल करना होगा. जैसे, postMessage() या Channel Messaging API.

ध्यान दें कि यह बदलाव धीरे-धीरे रोल आउट किया जाएगा.

हमें उम्मीद है कि अन्य ब्राउज़र भी इस सुविधा को बंद कर देंगे और इसे हटा देंगे. ज़्यादा जानकारी के लिए, ब्राउज़र के साथ काम करने की सुविधा सेक्शन देखें.

document.domain को बदला नहीं जा सकने वाला क्यों बनाया गया है?

document.domain को ऑरिजिन का होस्टनेम पाने या सेट करने के लिए डिज़ाइन किया गया था. कई वेबसाइटें, एक ही साइट के अलग-अलग ऑरिजिन वाले पेजों के बीच कम्यूनिकेशन की अनुमति देने के लिए, document.domain सेट करती हैं.

यह एक आसान तरीका है, लेकिन इससे सुरक्षा से जुड़ा जोखिम पैदा होता है. ऐसा इसलिए, क्योंकि यह एक ही ऑरिजिन की नीति को आसान बना देता है. document.domain से जुड़ी सुरक्षा समस्याओं की वजह से, इसके स्पेसिफ़िकेशन में बदलाव किया गया है. इसमें लोगों को इसका इस्तेमाल न करने की चेतावनी दी गई है.

ज़्यादा जानकारी: document.domain को बदला न जा सकने वाला क्यों बनाया गया है?

आज document.domain का इस्तेमाल कैसे किया गया

कई वेबसाइटें, document.domain सेट करती हैं, ताकि same-site but cross-origin पेजों के बीच कम्यूनिकेशन हो सके.

Same-site लेकिन क्रॉस-ऑरिजिन साइटों का eTLD+1 एक जैसा होता है, लेकिन सबडोमेन अलग-अलग होते हैं.

यहां बताया गया है कि अब तक document.domain का इस्तेमाल कैसे किया गया:

मान लें कि https://parent.example.com पर मौजूद कोई पेज, https://video.example.com से किसी iframe पेज को एम्बेड करता है. इन पेजों का eTLD+1 (example.com) एक ही है, लेकिन सबडोमेन अलग-अलग हैं. जब दोनों पेजों के document.domain को 'example.com' पर सेट किया जाता है, तो ब्राउज़र दोनों ऑरिजिन को एक ही ऑरिजिन के तौर पर मानता है.

https://parent.example.com के लिए document.domain सेट करें:

// Confirm the current origin of "parent.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

https://video.example.com के लिए document.domain सेट करें:

// Confirm the current origin of "video.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

अब https://video.example.com के ख़िलाफ़ https://parent.example.com पर क्रॉस-ऑरिजिन DOM मैनिपुलेशन किया जा सकता है.

वेबसाइटें, document.domain को सेट करती हैं, ताकि एक ही साइट के दस्तावेज़ आसानी से कम्यूनिकेट कर सकें. इस बदलाव से, एक ही ऑरिजिन से जुड़ी नीति में पाबंदियां हट जाती हैं. इसलिए, पैरंट पेज, iframe के दस्तावेज़ को ऐक्सेस कर सकता है और DOM ट्री को ट्रैवर्स कर सकता है. इसके उलट, iframe भी पैरंट पेज के दस्तावेज़ को ऐक्सेस कर सकता है और DOM ट्री को ट्रैवर्स कर सकता है.

यह एक आसान तरीका है. हालांकि, इससे सुरक्षा से जुड़ा जोखिम बढ़ जाता है.

document.domain से जुड़ी सुरक्षा समस्याएं

document.domain से जुड़ी सुरक्षा चिंताओं की वजह से, इसकी खास बातों में बदलाव किया गया है. इसमें लोगों को इसे इस्तेमाल न करने की चेतावनी दी गई है.

उदाहरण के लिए, जब दो पेज document.domain सेट करते हैं, तो वे एक ही ऑरिजिन के होने का दावा कर सकते हैं. यह खास तौर पर तब ज़रूरी होता है, जब ये पेज अलग-अलग सबडोमेन के साथ शेयर की गई होस्टिंग सेवा का इस्तेमाल करते हों. document.domain सेट करने से, उस सेवा से होस्ट की गई सभी अन्य साइटों का ऐक्सेस मिल जाता है. इससे हमलावरों के लिए आपकी साइटों को ऐक्सेस करना आसान हो जाता है. ऐसा इसलिए हो सकता है, क्योंकि document.domain डोमेन के पोर्ट नंबर वाले हिस्से को अनदेखा करता है.

document.domain सेट करने से सुरक्षा पर पड़ने वाले असर के बारे में ज़्यादा जानने के लिए, MDN पर"Document.domain" पेज पढ़ें.

ब्राउज़र के साथ काम करना

मुझे कैसे पता चलेगा कि मेरी साइट पर कोई असर पड़ा है या नहीं?

अगर आपकी वेबसाइट पर इस बदलाव का असर पड़ा है, तो Chrome आपको DevTools के 'समस्याएं' पैनल में इसकी चेतावनी देता है. यह चेतावनी 2022 में जोड़ी गई है. DevTools में सबसे ऊपर दाईं ओर मौजूद, पीले रंग के फ़्लैग पर ध्यान दें.

DevTools में समस्या की चेतावनी का स्क्रीनशॉट

Chrome से हटाए जाने वाले सभी एपीआई का पता लगाने के लिए, अपनी साइट को LightHouse deprecated API audit के ज़रिए भी चलाया जा सकता है.

अगर आपने Reporting API सेट अप किया है, तो Chrome ने आपको इस सुविधा के बंद होने की सूचना देने के लिए, इसके बंद होने की रिपोर्ट भेजी हैं. Reporting API का इस्तेमाल कैसे करें, इस बारे में ज़्यादा जानें. इसके लिए, रिपोर्ट इकट्ठा करने वाली मौजूदा सेवाओं का इस्तेमाल करें या अपने हिसाब से कोई समाधान बनाएं.

मैं इस बदलाव को कैसे देखूं?

यह बदलाव धीरे-धीरे रोल आउट किया जाएगा. इसकी शुरुआत Chrome 115 से होगी. अगर यह सुविधा आपके Chrome ब्राउज़र में पहले से रोल आउट नहीं हुई है, तो इसे चालू करने के लिए यह तरीका अपनाएं:

  1. chrome://flags/#origin-agent-cluster-default खोलें
  2. चालू करें को चुनें.
  3. Chrome को रीस्टार्ट करें.

मैं किन अन्य विकल्पों का इस्तेमाल कर सकता/सकती हूं?

सबसे अच्छा विकल्प यह है कि document.domain में कोई बदलाव न किया जाए. उदाहरण के लिए, पेज और सभी कॉम्पोनेंट फ़्रेम को एक ही ऑरिजिन पर होस्ट करके. यह सभी ब्राउज़र के सभी वर्शन में काम करता है. हालांकि, इसके लिए किसी ऐप्लिकेशन पर काफ़ी काम करना पड़ सकता है. इसलिए, ऐसे विकल्पों पर भी गौर करना चाहिए जो क्रॉस-ऑरिजिन ऐक्सेस की सुविधा देते हैं.

document.domain के बजाय, postMessage() या Channel Messaging API का इस्तेमाल करना

ज़्यादातर मामलों में, क्रॉस-ऑरिजिन postMessage() या Channel Messaging API, document.domain की जगह इस्तेमाल किया जा सकता है.

इस उदाहरण में:

  1. https://parent.example.com, iframe में https://video.example.com का अनुरोध करता है, ताकि postMessage() के ज़रिए मैसेज भेजकर DOM में बदलाव किया जा सके.
  2. https://video.example.com को मैसेज मिलते ही, वह डीओएम में बदलाव करता है और पैरंट को इसकी सूचना देता है.
  3. https://parent.example.com से पता चलता है कि यह काम पूरा हो गया है.

https://parent.example.com पर:

// Send a message to https://video.example.com
iframe.postMessage('Request DOM manipulation', 'https://video.example.com');

// Receive messages
iframe.addEventListener('message', (event) => {
  // Reject all messages except ones from https://video.example.com
  if (event.origin !== 'https://video.example.com') return;

  // Filter success messages
  if (event.data === 'succeeded') {
    // DOM manipulation is succeeded
  }
});

https://video.example.com पर:

// Receive messages
window.addEventListener('message', (event) => {
  // Reject all messages except ones from https://parent.example.com
  if (event.origin !== 'https://parent.example.com') return;

  // Do a DOM manipulation on https://video.example.com.

  // Send a success message to https://parent.example.com
  event.source.postMessage('succeeded', event.origin);
});

इसे आज़माएं और देखें कि यह कैसे काम करता है. अगर आपकी कुछ ऐसी खास ज़रूरतें हैं जो postMessage() या Channel Messaging API के साथ काम नहीं करती हैं, तो हमें Twitter पर @ChromiumDev के ज़रिए बताएं. इसके अलावा, Stack Overflow पर document.domain टैग के साथ भी सवाल पूछा जा सकता है.

आखिरी विकल्प के तौर पर, Origin-Agent-Cluster: ?0 हेडर भेजें

अगर आपके पास document.domain को सेट करना जारी रखने की कोई ठोस वजह है, तो टारगेट दस्तावेज़ के साथ Origin-Agent-Cluster: ?0 रिस्पॉन्स हेडर भेजा जा सकता है.

Origin-Agent-Cluster: ?0

Origin-Agent-Cluster हेडर, ब्राउज़र को यह निर्देश देता है कि दस्तावेज़ को ऑरिजिन के हिसाब से बने एजेंट क्लस्टर से मैनेज किया जाना चाहिए या नहीं. Origin-Agent-Cluster के बारे में ज़्यादा जानने के लिए, Origin-Agent-Cluster हेडर की मदद से परफ़ॉर्मेंस आइसोलेशन का अनुरोध करना लेख पढ़ें.

इस हेडर को भेजने पर, आपका दस्तावेज़ document.domain को सेट करना जारी रख सकता है. भले ही, डिफ़ॉल्ट रूप से यह बदलाव न किया जा सके.

इसके अलावा, जिन अन्य दस्तावेज़ों के लिए इस तरह के व्यवहार की ज़रूरत होती है उन्हें भी Origin-Agent-Cluster भेजना होगा. ध्यान दें कि अगर सिर्फ़ एक दस्तावेज़ इसे सेट करता है, तो document.domain का कोई असर नहीं होता.

एंटरप्राइज़ नीति के लिए OriginAgentClusterDefaultEnabled को कॉन्फ़िगर करना

इसके अलावा, आपका एडमिन OriginAgentClusterDefaultEnabled नीति को false पर कॉन्फ़िगर कर सकता है, ताकि आपके संगठन के सभी Chrome इंस्टेंस पर document.domain को डिफ़ॉल्ट रूप से सेट किया जा सके. ज़्यादा जानने के लिए, Chrome Enterprise की नीति की सूची और मैनेजमेंट | दस्तावेज़ पढ़ें.

संसाधन

Acknowledgements

यह फ़ोटो Unsplash से ली गई है, जिसे Finan Akbar ने खींचा है