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