टैब्स महान हैं, है ना? वे हम सभी में मल्टीटास्कर को एक ही समय में ऑनलाइन कार्यों का एक गुच्छा संभालने की अनुमति देते हैं।
टैब्स अब इतने आम हैं कि, जब आप किसी लिंक पर क्लिक करते हैं, तो संभावना है कि यह एक नए टैब में खुलेगा।
यदि आपने कभी सोचा है कि अपने लिंक्स के साथ ऐसा कैसे करें, तो आप सही जगह पर आए हैं।
एंकर एलिमेंट
वेब पेज पर एक लिंक बनाने के लिए, आपको एक एलिमेंट (टेक्स्ट, एक तस्वीर, आदि) को एंकर (<a>) एलिमेंट में लपेटना होगा और इसके href एट्रिब्यूट को उस URL पर सेट करना होगा जिससे आप लिंक करना चाहते हैं।
<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>Check out freeCodeCamp.
यदि आप ऊपर दिए गए लिंक पर क्लिक करते हैं, तो ब्राउज़र वर्तमान विंडो या टैब में लिंक खोलेगा। यह हर ब्राउज़र में डिफ़ॉल्ट व्यवहार है।
एक लिंक को नए टैब में खोलने के लिए, हमें एंकर एलिमेंट के अन्य एट्रिब्यूट्स में से कुछ को देखने की आवश्यकता होगी।
टार्गेट एट्रिब्यूट
यह एट्रिब्यूट ब्राउज़र को बताता है कि लिंक को कैसे खोलना है।
एक लिंक को नए टैब में खोलने के लिए, बस target एट्रिब्यूट को _blank पर सेट करें:
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>अब जब कोई लिंक पर क्लिक करता है, तो यह एक नए टैब में खुलेगा, या संभवतः एक नई विंडो में, व्यक्ति की ब्राउज़र सेटिंग्स के आधार पर।
target="_blank" के साथ सुरक्षा चिंताएं
मैं दृढ़ता से अनुशंसा करता हूं कि जब भी आप target एट्रिब्यूट का उपयोग करें, तो एंकर एलिमेंट में हमेशा rel="noreferrer noopener" जोड़ें:
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>इसके परिणामस्वरूप निम्नलिखित आउटपुट होता है:
Check out freeCodeCamp.
rel एट्रिब्यूट आपके पेज और लिंक किए गए URL के बीच संबंध सेट करता है। इसे noopener noreferrer पर सेट करना टैबनैबिंग के रूप में ज्ञात फ़िशिंग के एक प्रकार को रोकने के लिए है।
टैबनैबिंग क्या है?
टैबनैबिंग, जिसे कभी-कभी रिवर्स टैबनैबिंग कहा जाता है, एक शोषण है जो target="_blank" के साथ ब्राउज़र के डिफ़ॉल्ट व्यवहार का उपयोग window.object API के माध्यम से आपके पेज तक आंशिक पहुंच प्राप्त करने के लिए करता है।
टैबनैबिंग के साथ, एक पेज जिससे आप लिंक करते हैं, आपके पेज को एक नकली लॉगिन पेज पर रीडायरेक्ट कर सकता है। अधिकांश उपयोगकर्ताओं के लिए इसे नोटिस करना कठिन होगा क्योंकि फोकस उस टैब पर होगा जो अभी खुला है - आपके पेज वाले मूल टैब पर नहीं।
फिर जब कोई व्यक्ति आपके पेज वाले टैब पर वापस स्विच करता है, तो वे नकली लॉगिन पेज देखेंगे और अपने लॉगिन विवरण दर्ज कर सकते हैं।
यदि आप इस बारे में अधिक जानने में रुचि रखते हैं कि टैबनैबिंग कैसे काम करता है और बुरे अभिनेता शोषण और rel एट्रिब्यूट के साथ क्या कर सकते हैं, तो एलेक्स युमाशेव के लेख और OWASP के इस लेख को देखें।
यदि आप एक सुरक्षित कार्यशील उदाहरण देखना चाहते हैं, तो इस पेज और इसके GitHub रेपो को शोषण और rel एट्रिब्यूट के बारे में अधिक जानकारी के लिए देखें।
सारांश में
HTML का उपयोग करके एक लिंक को नए टैब में खोलना आसान है। आपको बस तीन महत्वपूर्ण एट्रिब्यूट्स के साथ एक एंकर (<a>) एलिमेंट की आवश्यकता है:
hrefएट्रिब्यूट उस पेज के URL पर सेट है जिससे आप लिंक करना चाहते हैंtargetएट्रिब्यूट_blankपर सेट है, जो ब्राउज़र को लिंक को नए टैब/विंडो में खोलने के लिए कहता है, ब्राउज़र की सेटिंग्स के आधार परrelएट्रिब्यूटnoreferrer noopenerपर सेट है, आपके द्वारा लिंक किए गए पेजों से संभावित दुर्भावनापूर्ण हमलों को रोकने के लिए
फिर से, यहां एक पूर्ण कार्यशील उदाहरण है:
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>जिसके परिणामस्वरूप ब्राउज़र में निम्नलिखित आउटपुट होता है:
Check out freeCodeCamp.
फिर से पढ़ने के लिए धन्यवाद। हैप्पी कोडिंग।
