जब target="_blank"
एट्रिब्यूट का इस्तेमाल करके, किसी दूसरी साइट के पेज को लिंक किया जाता है, तो आपकी साइट को परफ़ॉर्मेंस और सुरक्षा से जुड़ी समस्याओं का सामना करना पड़ सकता है:
- दूसरा पेज उसी प्रोसेस पर चल सकता है जिस पर आपका पेज चलता है. अगर दूसरे पेज पर ज़्यादा JavaScript चल रहा है, तो आपके पेज की परफ़ॉर्मेंस पर बुरा असर पड़ सकता है.
- दूसरा पेज,
window.opener
प्रॉपर्टी से आपकेwindow
ऑब्जेक्ट को ऐक्सेस कर सकता है. इससे दूसरे पेज को आपके पेज को किसी नुकसान पहुंचाने वाले यूआरएल पर रीडायरेक्ट करने की अनुमति मिल सकती है.
अपने target="_blank"
लिंक
में rel="noopener"
या rel="noreferrer"
जोड़ने से, इन समस्याओं से बचा जा सकता है.
लाइटहाउस क्रॉस-ऑरिजिन डेस्टिनेशन का ऑडिट कैसे फ़ेल हो जाता है
Lighthouse, क्रॉस-ऑरिजिन डेस्टिनेशन के असुरक्षित लिंक को फ़्लैग करता है:
![लाइटहाउस ऑडिट, जो क्रॉस-ऑरिजिन डेस्टिनेशन के असुरक्षित लिंक दिखा रहा है](https://developer.chrome.com/static/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/image/lighthouse-audit-showing-b1f47b11d85bc.png?authuser=6&hl=hi)
लाइटहाउस, लिंक की पहचान असुरक्षित के तौर पर करने के लिए, इस प्रोसेस का इस्तेमाल करता है:
- वे सभी
<a>
टैग इकट्ठा करें जिनमेंtarget="_blank"
एट्रिब्यूट शामिल है, लेकिनrel="noopener"
याrel="noreferrer"
एट्रिब्यूट नहीं. - एक ही होस्ट वाले लिंक को फ़िल्टर करें.
लाइटहाउस, एक ही होस्ट वाले लिंक को फ़िल्टर कर देता है. इसलिए, अगर किसी बड़ी साइट पर काम किया जा रहा है, तो आपको इस एज केस के बारे में पता होना चाहिए:
अगर किसी पेज पर rel="noopener"
का इस्तेमाल किए बिना आपकी साइट के किसी दूसरे पेज पर target="_blank"
का लिंक मौजूद है, तो इस ऑडिट के परफ़ॉर्मेंस असर अब भी लागू होंगे.
हालांकि, आपको ये लिंक अपने लाइटहाउस नतीजों में नहीं दिखेंगे.
अपनी साइट की परफ़ॉर्मेंस को बेहतर बनाने और सुरक्षा से जुड़े जोखिमों को रोकने का तरीका
अपनी लाइटहाउस रिपोर्ट में दिए गए हर लिंक में, rel="noopener"
या rel="noreferrer"
जोड़ें.
आम तौर पर, target="_blank"
का इस्तेमाल करते समय, हमेशा
rel="noopener"
या rel="noreferrer"
जोड़ें:
<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
</a>
rel="noopener"
, नए पेज कोwindow.opener
प्रॉपर्टी को ऐक्सेस करने से रोकता है. साथ ही, यह पक्का करता है कि यह पेज किसी अलग प्रोसेस में चले.rel="noreferrer"
का असर वही होता है लेकिन यहReferer
हेडर को नए पेज पर भेजे जाने से भी रोकता है. लिंक टाइप "noreferrer" देखें.
ज़्यादा जानकारी के लिए, क्रॉस-ऑरिजिन रिसॉर्स सुरक्षित तरीके से शेयर करें पोस्ट देखें.