كيفية استخدام HTML لفتح ارتباط في علامة تبويب جديدة
علامات التبويب رائعة ، أليس كذلك؟ إنها تسمح لمتعدد المهام فينا جميعًا بالتوفيق بين مجموعة من المهام عبر الإنترنت في نفس الوقت.
أصبحت علامات التبويب شائعة جدًا الآن لدرجة أنه عند النقر فوق ارتباط ، فمن المحتمل أن يتم فتحه في علامة تبويب جديدة.
إذا تساءلت يومًا عن كيفية القيام بذلك باستخدام الروابط الخاصة بك ، فقد وصلت إلى المكان الصحيح.
عنصر المرساة
لإنشاء ارتباط على صفحة ويب ، تحتاج إلى التفاف عنصر (نص ، صورة ، وما إلى ذلك) في عنصر مرساة ( ) وتعيين hrefالسمة الخاصة به إلى عنوان URL الذي تريد الارتباط به.
Check out freeCodeCamp.
تحقق من freeCodeCamp.
إذا نقرت على الرابط أعلاه ، سيفتح المتصفح الرابط في النافذة أو علامة التبويب الحالية. هذا هو السلوك الافتراضي في كل متصفح.
لفتح رابط في علامة تبويب جديدة ، سنحتاج إلى إلقاء نظرة على بعض السمات الأخرى للسمات الأخرى لعنصر الارتساء.
السمة الهدف
تخبر هذه السمة المتصفح بكيفية فتح الرابط.
لفتح ارتباط في علامة تبويب جديدة ، ما targetعليك سوى تعيين السمة على _blank:
Check out freeCodeCamp.
الآن عندما ينقر شخص ما على الرابط ، سيتم فتحه في علامة تبويب جديدة ، أو ربما نافذة جديدة بناءً على إعدادات متصفح الشخص.
مخاوف أمنية مع target="_blank"
أوصي بشدة بأن تضيف دائمًا rel="noreferrer noopener"إلى عنصر الارتساء كلما استخدمت targetالسمة:
Check out freeCodeCamp.
ينتج عن هذا الإخراج التالي:
تحقق من freeCodeCamp.
و relالسمة يحدد العلاقة بين صفحتك وURL المرتبط. تعيين إلى noopener noreferrerلمنع نوع من الخداع المعروفة باسم tabnabbing.
ما هو التبني؟
يعد Tabnabbing ، الذي يُطلق عليه أحيانًا علامة التبويب العكسية ، استغلالًا يستخدم السلوك الافتراضي للمتصفح target="_blank"للوصول جزئيًا إلى صفحتك من خلال window.objectواجهة برمجة التطبيقات.
باستخدام tabnabbing ، قد تتسبب الصفحة التي ترتبط بها في إعادة توجيه صفحتك إلى صفحة تسجيل دخول مزيفة. سيكون من الصعب على معظم المستخدمين ملاحظة ذلك لأن التركيز سيكون على علامة التبويب التي فتحت للتو - وليس علامة التبويب الأصلية بصفحتك.
ثم عندما يعود شخص ما إلى علامة التبويب بصفحتك ، سيرى صفحة تسجيل الدخول المزيفة بدلاً من ذلك وقد يدخل تفاصيل تسجيل الدخول الخاصة به.
إذا كنت مهتمًا بمعرفة المزيد حول كيفية عمل tabnabbing وما يمكن للممثلين السيئين فعله مع الاستغلال ، فراجع مقالة Alex Yumashev وهذه المقالة التي كتبها OWASP.
إذا كنت ترغب في رؤية خزنةمثال عملي ، تحقق من هذه الصفحة و GitHub repo لمزيد من المعلومات حول الاستغلال relوالسمة.
باختصار
من السهل استخدام HTML لفتح ارتباط في علامة تبويب جديدة. أنت فقط بحاجة إلى عنصر anchor ( ) مع ثلاث سمات مهمة:
- يتم
hrefتعيين السمة إلى عنوان URL للصفحة التي تريد الارتباط بها - تم
targetتعيين السمة على_blank، والتي تخبر المتصفح بفتح الرابط في علامة تبويب / نافذة جديدة ، اعتمادًا على إعدادات المتصفح - تم
relتعيين السمةnoreferrer noopenerعلى منع الهجمات الضارة المحتملة من الصفحات التي ترتبط بها
مرة أخرى ، إليك مثال HTML العملي:
Check out freeCodeCamp.
مما ينتج عنه الإخراج التالي في المتصفح:
تحقق من freeCodeCamp.
شكرا مرة أخرى على القراءة. ترميز سعيد.
