كيفية فتح رابط في تبويب جديد باستخدام HTML: دليل شامل ومُحسّن

تُعد التبويبات (Tabs) في متصفحات الويب ميزة رائعة بلا شك، فهي تمكّن المستخدمين من إنجاز مهام متعددة وتصفح العديد من الصفحات في آن واحد دون فقدان التركيز. لقد أصبحت هذه الميزة منتشرة لدرجة أن النقر على رابط غالبًا ما يؤدي إلى فتحه في تبويب جديد. إذا كنت تتساءل عن كيفية تحقيق ذلك في روابط موقعك الخاص، فقد وصلت إلى المكان الصحيح.

عنصر الربط الأساسي: <a>

لإنشاء رابط تشعبي (Hyperlink) على صفحة الويب، يجب عليك استخدام عنصر الربط (Anchor Element) الذي يُرمز له بالوسم <a>. يتم تغليف النص أو الصورة التي ترغب في جعلها قابلة للنقر بهذا الوسم، ثم يتم تحديد وجهة الرابط باستخدام السمة href التي تأخذ قيمة عنوان URL المستهدف.

<p>تفضل بزيارة <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

عند النقر على الرابط في المثال أعلاه، سيقوم المتصفح افتراضيًا بفتح الصفحة المستهدفة في نفس النافذة أو التبويب الحالي. هذا هو السلوك الافتراضي لمعظم المتصفحات. لفتح الرابط في تبويب جديد، سنحتاج إلى استكشاف سمات أخرى لعنصر <a>.

التحكم في وجهة الرابط: سمة target

تُحدد سمة target كيفية استجابة المتصفح عند النقر على الرابط. لفتح رابط في تبويب جديد (أو نافذة جديدة، اعتمادًا على إعدادات المتصفح لدى المستخدم)، ما عليك سوى تعيين قيمة السمة target إلى _blank.

<p>تفضل بزيارة <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>

الآن، عندما ينقر المستخدم على هذا الرابط، سيتم فتحه في تبويب جديد، مما يحافظ على صفحتك الأصلية مفتوحة في التبويب السابق، ويوفر تجربة تصفح سلسة.

اعتبارات أمنية هامة عند استخدام target="_blank"

على الرغم من فائدة فتح الروابط في تبويبات جديدة، إلا أن استخدام target="_blank" بمفرده قد يفتح بابًا لثغرات أمنية محتملة. لذلك، أوصي بشدة بإضافة السمة rel مع القيم "noopener noreferrer" إلى عنصر <a> في كل مرة تستخدم فيها target="_blank".

<p>تفضل بزيارة <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

تُحدد سمة rel العلاقة بين صفحتك وعنوان URL المرتبط. تعيينها على noopener noreferrer يهدف إلى منع نوع من هجمات التصيد الاحتيالي المعروفة باسم Tabnabbing، والتي سنشرحها بالتفصيل في القسم التالي.

ما هو هجوم Tabnabbing وكيف يعمل؟

يُعد هجوم Tabnabbing، والذي يُشار إليه أحيانًا باسم Reverse Tabnabbing، استغلالًا ذكيًا للسلوك الافتراضي للمتصفح عند استخدام target="_blank". يسمح هذا الهجوم للصفحة التي قمت بالربط إليها (وهي صفحة قد تكون ضارة) بالوصول جزئيًا إلى صفحتك الأصلية عبر واجهة برمجة تطبيقات window.object في المتصفح.

باستخدام Tabnabbing، يمكن للصفحة الضارة التي فتحت في تبويب جديد أن تقوم بإعادة توجيه صفحتك الأصلية (التي لا تزال مفتوحة في التبويب القديم) إلى صفحة تسجيل دخول مزيفة أو أي محتوى ضار آخر. يصعب على معظم المستخدمين ملاحظة هذا التغيير لأن تركيزهم يكون على التبويب الجديد الذي فتح للتو. وعندما يعود المستخدم إلى التبويب الأصلي الذي يحتوي على صفحتك، يجد أمامه صفحة تسجيل الدخول المزيفة وقد يقوم بإدخال بياناته الحساسة دون إدراك الخطر.

هنا تكمن أهمية استخدام rel="noopener noreferrer". فكلمة noopener تمنع الصفحة الجديدة من الوصول إلى كائن window.opener الخاص بصفحتك الأصلية، مما يحول دون قدرتها على التلاعب بصفحتك. أما noreferrer، فيمنع إرسال معلومات المصدر (Referrer) إلى الصفحة الجديدة، مما يعزز خصوصية المستخدم ويقلل من تتبع الروابط.

ملخص شامل لفتح الروابط بأمان في تبويبات جديدة

باختصار، عملية فتح الروابط في تبويبات جديدة باستخدام HTML بسيطة وفعالة، ولكنها تتطلب الانتباه إلى الجانب الأمني. لضمان أفضل تجربة للمستخدم وحماية موقعك، تحتاج إلى استخدام عنصر الربط <a> مع ثلاث سمات أساسية:

• سمة href: تحدد عنوان URL للصفحة التي ترغب في الربط إليها.
• سمة target: تُعين قيمتها إلى _blank لتوجيه المتصفح لفتح الرابط في تبويب أو نافذة جديدة (حسب إعدادات المستخدم).
• سمة rel: تُعين قيمتها إلى "noopener noreferrer" لمنع هجمات Tabnabbing المحتملة وحماية خصوصية المستخدم.

إليك مثال كامل يوضح كيفية تطبيق هذه السمات معًا:

<p>تفضل بزيارة <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

هذا الكود يضمن فتح الرابط في تبويب جديد مع توفير الحماية اللازمة لصفحتك الأصلية ومستخدميك.

الخلاصة التقنية

يُعد التحكم في سلوك الروابط التشعبية أمرًا حيويًا لتحسين تجربة المستخدم (UX) وأمان موقع الويب. فبينما يفضل العديد من المطورين ومالكي المواقع فتح الروابط الخارجية في تبويبات جديدة للحفاظ على زوارهم داخل موقعهم، فإن إهمال الجانب الأمني المتمثل في سمة rel="noopener noreferrer" قد يعرض الموقع والمستخدمين لمخاطر أمنية مثل Tabnabbing. يجب أن يكون دمج هذه السمة ممارسة معيارية عند استخدام target="_blank"، ليس فقط للامتثال لأفضل ممارسات الويب، بل أيضًا لبناء الثقة مع المستخدمين وضمان بيئة تصفح آمنة. إن الاهتمام بالتفاصيل التقنية الدقيقة كهذه يعكس احترافية المطور ويساهم بشكل مباشر في جودة الموقع وقبوله من قبل محركات البحث ومنصات الإعلانات مثل Google AdSense.