Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

HTML rel=noopener एट्रिब्यूट का उपयोग कैसे करें (सुरक्षा के लिए महत्वपूर्ण)

rel="noopener" एट्रिब्यूट जानने के लिए सबसे महत्वपूर्ण HTML एट्रिब्यूट्स में से एक है क्योंकि यह सीधे target="_blank" एट्रिब्यूट का उपयोग करने वाले एंकर लिंक्स पर एक्सटर्नल लिंक सुरक्षा को प्रभावित करता है।

target="_blank" लिंक्स को नए ब्राउज़र टैब में खोलता है।

rel="noopener" एट्रिब्यूट वाले लिंक का उदाहरण:

<a href="https://www.youtube.com" rel="noopener" target="_blank" >YouTube.com पर लिंक</a >

rel="noopener" कैसे काम करता है

जब आप अपनी वेबसाइट पर एक एक्सटर्नल लिंक में rel="noopener" जोड़ते हैं (target="_blank के साथ), तो यह उस वेबसाइट को विंडो ऑब्जेक्ट के माध्यम से आपके पेज तक पहुंच प्राप्त करने से रोकता है ( window.opener प्रॉपर्टी के माध्यम से)।

अनुवाद: यदि आपके द्वारा संदर्भित पेज में दुर्भावनापूर्ण कोड है, तो यह बैकडोर (window.opener) का उपयोग आपकी वेबसाइट पर आपके उपयोगकर्ता के ब्राउज़र को हाईजैक करने के लिए कर सकता है, और उदाहरण के लिए उन्हें एक खतरनाक फ़िशिंग वेबसाइट पर रीडायरेक्ट कर सकता है जो उनकी जानकारी चुराता है या उनके कंप्यूटर पर मैलवेयर इंस्टॉल करता है।

यही कारण है कि WordPress स्वचालित रूप से rel="noopener" एट्रिब्यूट को उन सभी एक्सटर्नल लिंक्स पर जोड़ देता है जो नए ब्राउज़र टैब में खुलते हैं (target="_blank" एट्रिब्यूट का उपयोग करके) — यह सुरक्षा कारणों से है।

मैं अनुशंसा करता हूं कि आप भी ऐसा ही करें, चाहे आपके पास किसी भी प्रकार की वेबसाइट हो क्योंकि इसका उपयोग करने के अधिक फायदे हैं नुकसान के।

rel="noopener" और SEO

अच्छी खबर, rel="noopener" का आपके SEO पर कोई प्रभाव नहीं पड़ता।

noopener उपयोग करने के नुकसान

मुझे जो एकमात्र नुकसान पता है वह यह है कि rel="noopener" में इंटरनेट एक्सप्लोरर 11 सपोर्ट नहीं है।

मैं इसके बारे में ज्यादा चिंतित नहीं हूं क्योंकि:

  1. IE11 जल्द ही इतिहास बन जाएगा (Microsoft इसे बंद कर रहा है)।
  2. यदि आपका साइट विज़िटर IE11 का उपयोग करता है, तो वे अभी भी आपके लिंक्स पर क्लिक कर सकते हैं, rel="noopener" एट्रिब्यूट बस प्रभावी नहीं होगा।

इसके अलावा, एक जिम्मेदार वेबसाइट मालिक के रूप में, आपको वैसे भी इस बारे में सावधान रहना चाहिए कि आप बाहरी रूप से किससे लिंक करते हैं। उन वेबसाइटों पर अपने उपयोगकर्ताओं को न भेजें जिन पर आप भरोसा नहीं करते, और यह सुरक्षा मुद्दा लगभग न के बराबर हो जाता है।

विकल्प 1: "noreferrer" उपयोग करें

यदि आप इंटरनेट एक्सप्लोरर उपयोगकर्ताओं के बारे में चिंतित हैं, तो आप अपने एंकर लिंक में noreferrer एट्रिब्यूट मान (जो समर्थित है) जोड़ सकते हैं जैसे:

<a href="https://www.youtube.com" rel="noopener noreferrer" target="_blank" >YouTube.com पर लिंक</a >

"noreferrer" एट्रिब्यूट रेफरर (आप) को HTTP हेडर से रेफरल जानकारी हटाकर टारगेट वेबसाइट (जिससे आप लिंक करते हैं) को जानकारी भेजने से रोकता है।

rel="noreferrer" वेबसाइट एनालिटिक्स पर प्रभाव डालेगा क्योंकि जिन वेबसाइटों से आप लिंक करते हैं वे नहीं जान पाएंगे कि आप उनसे लिंक करते हैं, जो आपके साथ उनके किसी विशिष्ट व्यावसायिक समझौते को नुकसान पहुंचा सकता है।

इसलिए इसे अपने विवेक पर करें।

rel="noreferrer" और SEO

बहुत से लोग जो मानते हैं उसके विपरीत, rel="noreferrer" सीधे आपके SEO को प्रभावित नहीं करता, कम से कम इसके लिए कोई सबूत नहीं है। लेकिन जैसा कि ऊपर उल्लेख किया गया है, यह डेटा एकत्रीकरण/एनालिटिक्स में हस्तक्षेप करेगा, जो आपकी विशिष्ट स्थिति के आधार पर अन्य/अप्रत्यक्ष तरीकों से आपको नुकसान पहुंचा सकता है।

noreferrer या noopener को nofollow एट्रिब्यूट के साथ भ्रमित न करें (जो 100% SEO को प्रभावित करेगा)।

विकल्प 2: target="_blank" का उपयोग न करें

आप अपने एंकर लिंक्स पर target="_blank" एट्रिब्यूट का उपयोग करना बंद कर सकते हैं, और फिर आपको इसमें से किसी के बारे में चिंता करने की ज़रूरत नहीं है।

target="_blank" के बिना आपकी वेबसाइट पर हर लिंक उपयोगकर्ता को उस वेबसाइट पर ले जाएगा जिससे आप लिंक करते हैं जैसे ही वे उस पर क्लिक करते हैं।

हालांकि, ध्यान रखें कि target="_blank" का उपयोग न करके यह आपके SEO को नकारात्मक रूप से प्रभावित कर सकता है, विशेष रूप से आपकी बाउंस दर।

मेरी राय में यह विशेष रूप से ट्यूटोरियल के अंदर करना एक बुरा विचार है, जहां उपयोगकर्ता आपके द्वारा संदर्भित वेबसाइट पर किसी चीज़ से विचलित हो सकता है और आपकी साइट के बारे में भूल सकता है।

आप तर्क दे सकते हैं कि यदि केवल एक एक्सटर्नल लिंक आपके पाठक को आपकी सामग्री भूलने पर मजबूर कर देता है, तो शायद यह पहली जगह में इतना अच्छा नहीं है। यह सच हो सकता है, लेकिन यह भी हो सकता है कि लोग आमतौर पर आसानी से विचलित हो जाते हैं, और अक्सर उनके लाभ के लिए नहीं।

यह एक ब्लैक एंड व्हाइट विषय नहीं है और मैं वैकल्पिक दृष्टिकोणों के लिए खुला हूं।

संसाधन

एक्सटर्नल लिंक्स के साथ सुरक्षा मुद्दों के बारे में और पढ़ें

  1. HTML में रिक्वायर्ड एट्रिब्यूट का उपयोग कैसे करें? HTML में रिक्वायर्ड एट्रिब्यूट का उपयोग कैसे करें?

    HTML में required एट्रिब्यूट का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि फॉर्म सबमिट होने से पहले एलिमेंट भरा जाना चाहिए। यदि फ़ील्ड भरा नहीं है और सबमिट बटन क्लिक किया जाता है, तो एक त्रुटि उत्पन्न होती है, जो फॉर्म सबमिशन को विफल कर देती है। त्रुटि होगी: कृपया इस फ़ील्ड को भरें।required एट्र

  1. HTML में मल्टीपल एट्रिब्यूट का उपयोग कैसे करें? HTML में मल्टीपल एट्रिब्यूट का उपयोग कैसे करें?

    HTML में multiple एट्रिब्यूट उपयोगकर्ता को एक से अधिक मान दर्ज करने की अनुमति देता है। यह एक बूलियन एट्रिब्यूट है और इसे <input> के साथ-साथ <select> एलिमेंट पर उपयोग किया जा सकता है।HTML फॉर्म में मल्टीपल फ़ाइल अपलोड की अनुमति देने के लिए, multiple एट्रिब्यूट का उपयोग करें। multiple एट्र

  1. HTML में लिस्ट एट्रिब्यूट का उपयोग कैसे करें? HTML में लिस्ट एट्रिब्यूट का उपयोग कैसे करें?

    HTML में, हम <datalist> एलिमेंट का उपयोग प्री-डिफाइंड विकल्पों की एक सूची निर्दिष्ट करने के लिए करते हैं। यह सूची एक इनपुट एलिमेंट के लिए है। list एट्रिब्यूट इस <datalist> एलिमेंट को संदर्भित करता है। HTML5 ने list एट्रिब्यूट पेश किया।list एट्रिब्यूट एक <datalist> एलिमेंट को संदर्भ