الحماية من هجمات Clickjacking: فهم التهديدات وتطبيق أفضل الممارسات الأمنية

في عالم أمن المعلومات، تمثل هجمات Clickjacking — أو ما يُعرف بـ هجمات إعادة توجيه واجهة المستخدم (User Interface Redress Attacks) — أحد الأساليب الخبيثة التي يستغلها المهاجمون لخداع المستخدمين لتنفيذ إجراءات لم يقصدوا القيام بها، مثل حذف الحسابات أو تعديل الإعدادات أو متابعة حسابات غير مرغوبة.

يعتمد هذا النوع من الهجمات على إخفاء عناصر ضارة خلف عناصر واجهة مستخدم شرعية باستخدام تقنيات مثل الإطارات المضمّنة (iframes) والطبقات الشفافة (Transparent Layers).

ولحسن الحظ، توجد استراتيجيات عملية يمكن من خلالها التصدي لهذا التهديد وضمان بيئة استخدام آمنة.

هجوم الـ Clickjacking يمكن أن يؤدي إلى:

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

وتوجد عدة تقنيات أخرى لهجمات الـ Clickjacking، لذلك من المهم لمطوّري الويب فهم هذه الأساليب ومعرفة كيفية حماية المستخدمين من هذا النوع من البرمجيات الخبيثة (Malware).

مثال توضيحي (Demo)
لفهم الفكرة بشكل عملي، يمكن إنشاء عرض توضيحي يبيّن كيف يتم تحميل صفحة مزيفة أو طبقة شفافة فوق صفحة شرعية، وكيف يمكن للمستخدم أن ينقر على عناصر مخفية دون أن يلاحظ.

---

شرح الكود

الكود مكتوب بلغة JavaScript باستخدام مكتبة jQuery، ومهمته تنفيذ إجراء عند الضغط على زر (Button) في الصفحة.

$('button').click(function() {
  alert("Your account has been deleted.");
});

خطوات عمل الكود:

1. $('button')
   • يقوم هذا الجزء بتحديد جميع عناصر الأزرار (Button Elements) في الصفحة باستخدام مكتبة jQuery.
2. .click(function() { ... })
   • هنا يتم إضافة مستمع للحدث (Event Listener) خاص بعملية النقر (Click Event) على أي زر.
   • عند الضغط على الزر، يتم تنفيذ الكود الموجود بين الأقواس {...}.
3. alert("Your account has been deleted.");
   • عند تنفيذ الحدث، تظهر نافذة تنبيه (Alert Box) للمستخدم تحمل الرسالة:
     "Your account has been deleted."
     أي: “تم حذف حسابك.”

ملاحظات:

• هذا الكود مجرد مثال توضيحي، فهو لا يقوم فعليًا بحذف الحساب، بل يعرض رسالة تنبيه فقط.
• إذا استُخدم في سياق هجوم Clickjacking، يمكن استبدال التنبيه بتنفيذ أوامر حقيقية مثل حذف الحساب أو تغيير إعدادات حساسة دون علم المستخدم.

---

مثال على الموقع الخبيث

الآن، لنلقِ نظرة على الموقع الخبيث. جرّب النقر على زر “Click here!”.

ستظهر لك الرسالة: “Your account has been deleted.” أي: “تم حذف حسابك.”

ما فعله هذا المثال من الموقع الخبيث هو تضمين عنصر <iframe> (إطار مضمَّن) داخل صفحة خدمة الويب، ثم جعله شفافًا تمامًا باستخدام خاصية opacity: 0 في CSS.

بعد ذلك، تم وضع زر “Click here!” خلف زر “Delete Account” (حذف الحساب) باستخدام خاصية z-index: -1، والتي تتحكم في ترتيب طبقات العناصر على الصفحة.

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

---

 

حتى وإن كنت — كمستخدم — تنوي النقر على زر “Click here!”، فإنك في الحقيقة نقرت على زر “Delete Account” (حذف الحساب) الخاص بخدمة الويب.

هذه هي الطريقة التي تستخدمها المواقع الخبيثة لخداع المستخدمين وجعلهم ينفذون إجراءات لم يقصدوا القيام بها.

---

حماية منصة Backlog من هجوم الـ Clickjacking

عندما قررنا تطبيق حل لهذه المشكلة، أدركنا أن من الضروري جدًا وضع آلية قوية للحماية من هجمات Clickjacking. وفيما يلي خياران يمكن استخدامهما:

---

الخيار الأول: ضبط ترويسة الاستجابة (Response Header) الخاصة بـ X-Frame-Options

إحدى الطرق لتجنب هجوم الـ Clickjacking هي ضبط ترويسة الاستجابة X-Frame-Options بشكل مناسب، بحيث تمنع المجالات (Domains) الخارجية — غير المصرح لها — من تضمين الصفحة باستخدام عنصر <iframe>.

عند تطبيق ذلك، يمكنك منع تضمين (Embedding) صفحتك داخل نطاقات (Domains) خارجية.

 

القيم المتاحة لخاصية X-Frame-Options

القيمة	الوصف
DENY	رفض أي محاولة لعرض الصفحة داخل إطار (iframe).
SAMEORIGIN	السماح بعرض الصفحة داخل إطار فقط إذا كان من نفس النطاق (Same Domain).
ALLOW-FROM uri (مهجورة)	السماح بعرض الصفحة داخل إطار فقط من نطاق أو رابط (URI) محدد مسبقًا.

ملاحظة: القيمة ALLOW-FROM تعتبر مهجورة (Obsolete) ولا يُنصح باستخدامها في الوقت الحالي بسبب ضعف دعمها في المتصفحات الحديثة.

---

مثال توضيحي

في المثال التالي:

• الإطار الأول (First <iframe>) يستخدم مصدر (Source) يشير إلى رابط لصفحة عادية من صفحات المهام (Issue Page) في منصة Backlog.
• الإطار الثاني (Second <iframe>) يستخدم مصدر يشير إلى رابط نسخة مخصصة من الصفحة صُممت خصيصًا لتضمينها باستخدام إطار (iframe).

---

 

كما تلاحظ، فإن النسخة القابلة للتضمين من صفحة المهام (Embed-able Version of the Issues Page) تُعرض بشكل صحيح، بينما تبقى النسخة العادية فارغة، وذلك لأن الصفحة تم ضبطها على الترويسة X-Frame-Options: SAMEORIGIN، والتي تمنع عرض الصفحة داخل إطار (iframe) إذا لم يكن من نفس النطاق.

ويمكنك التأكد من ذلك عبر فحص ترويسات الاستجابة (Response Headers) الخاصة بالصفحة باستخدام أدوات المطوّر (Developer Tools) في متصفحك.

---

 

هذا الإعداد يحمي المستخدمين من هجوم Clickjacking عن طريق منع أي موقع خبيث من تضمين الصفحة المستهدفة داخل عنصر <iframe>.

---

الخيار الثاني: تجنّب وضع العمليات التفاعلية (Update-type Processes) في الصفحات القابلة للتضمين باستخدام <iframe>

بالنسبة للصفحات التي يمكن تضمينها على جميع المواقع — أي أننا لا نستطيع ضبط خاصية X-Frame-Options لحمايتها جميعًا — يمكننا تقليل خطر هجمات الـ Clickjacking من خلال تعطيل العمليات التفاعلية أو العمليات التي تُحدث تغييرات (Update-type Processes) في هذه الصفحات.

باستخدام هذه التقنية، يمكننا الحد من التفاعل بين المستخدم والصفحة المضمّنة، وبالتالي تقليل عدد الإجراءات التي يمكن أن تنفذها الصفحة نيابة عن المستخدم، مما يخفض خطر استغلالها في هجوم Clickjacking.

أمثلة على العمليات التفاعلية (Update-type Processes):

• إضافة نجمة (Starring) لمهام أو عناصر.
• الرد على التعليقات (Replying to Comments).
• متابعة المستخدمين (Following Users).
• متابعة المهام أو مراقبتها (Watching Tasks).

---

مثال تطبيقي
منصة Twitter تقدّم مثالًا على صفحة قابلة للتضمين، حيث يتم تقييد التفاعل المباشر مع المحتوى المضمّن لتجنب المخاطر الأمنية.

---

 

---

في حالة التغريدات المضمّنة (Embedded Tweets) على منصة Twitter، عند النقر على زر “Follow” (متابعة)، لا يتم تنفيذ العملية مباشرة داخل الإطار (iframe)، بل يتم فتح صفحة جديدة في تبويب (Tab) منفصل في المتصفح، كما في المثال التالي.

هذه الآلية تمنع أي تفاعل مباشر داخل الصفحة المضمّنة، مما يقلّل من احتمالية استغلال هذا التفاعل في هجوم Clickjacking، حيث يتم تنفيذ الإجراء في بيئة منفصلة وآمنة.

---

 

عند وصولك إلى هذه الصفحة، لن تتم عملية المتابعة (Follow) مباشرة، بل لا بد أن تنقر مجددًا على زر “Follow” الموجود في صفحة المستخدم لإكمال العملية.

هذه الصفحة تم إعدادها باستخدام الترويسة X-Frame-Options: SAMEORIGIN، مما يعني أنها لا يمكن استدعاؤها أو عرضها داخل صفحات تقع خارج نطاق (Domain) منصة Twitter.

لولا هذه الحماية، لكان بإمكان المواقع الخبيثة استخدام هجوم Clickjacking لجعل المستخدمين يتابعون حساباتهم دون علمهم.

ولكن بفضل هذه الآلية — حيث يقوم الزر بفتح صفحة جديدة في تبويب منفصل، وهذه الصفحة محمية بإعدادات الترويسة — لا يحتاج المستخدمون للقلق بشأن هذا النوع من الهجمات.

---

منع هجمات Clickjacking

باختصار، يمكن الحماية من هجوم Clickjacking على الصفحات من خلال ما يلي:

1. تجنّب إدراج العمليات التفاعلية (Update-type Processes) في الصفحات القابلة للتضمين باستخدام عنصر <iframe>.
2. تنفيذ العمليات التفاعلية على الصفحات التي تم ضبطها بإعدادات X-Frame-Options للحماية.
3. تعيين قيمة الترويسة X-Frame-Options إلى DENY للمجالات الخارجية غير المصرح لها بتضمين الصفحة، واستخدام SAMEORIGIN فقط في حالة الرغبة بعرض إطار (iframe) داخل التطبيق نفسه.

---

تُعد هجمات Clickjacking من التهديدات التي تتطلب وعيًا أمنيًا وإجراءات وقائية دقيقة، خاصة في المنصات التي تتعامل مع بيانات حساسة أو عمليات تفاعلية مهمة.

ومن خلال ضبط الترويسة X-Frame-Options بشكل مناسب، وتعطيل العمليات التفاعلية في الصفحات القابلة للتضمين، وإتباع أفضل الممارسات في تصميم واجهات المستخدم، يمكن للمؤسسات تقليل المخاطر بشكل كبير.

الحماية ليست خيارًا إضافيًا، بل ضرورة أساسية لضمان ثقة المستخدمين وسلامة البيانات.

كيف أبدأ مسيرتي في مجال الأمن السيبراني وما هو المسار المهني الأنسب لي؟

الأمن السيبراني للشركات الصغيرة والمتوسطة: حماية بياناتك من القراصنة

الدليل الشامل للأمن السيبراني