كيفية استخدام 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.
شكرا مرة أخرى على القراءة. ترميز سعيد.