Clickjacking، المعروف أيضًا باسم معالجة واجهة المستخدم، هو نوع من الهجوم حيث تخدع الجهات الفاعلة الخبيثة المستخدمين للنقر على شيء مختلف عما يرونه عن طريق تضمين صفحات الويب داخل إطارات iframe. يمكن أن يؤدي هذا إلى إجراءات غير مصرح بها وتهديد أمان المستخدم. في هذه المدونة، سوف نستكشف كيفية منع هجمات Clickjacking باستخدام JavaScript وتكوينات الخادم لـ Apache وNginx، بالإضافة إلى أمثلة سهلة الاستخدام.

فهم Clickjacking

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

مثال في العالم الحقيقي

فكر في سيناريو يقوم فيه المهاجم بتضمين إطار iframe مخفي من موقع مصرفي في صفحة ويب موثوقة. عندما ينقر المستخدم على زر يبدو غير ضار، فقد يكون في الواقع يسمح بإجراء معاملة مصرفية.

إليك مثال على صفحة معرضة للخطر:

    
    
    


    
Welcome to Our Site
    Click Me
    

منع Clickjacking مع جافا سكريبت

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

1. خرق إطار جافا سكريبت
يتضمن كسر الإطار استخدام جافا سكريبت لاكتشاف ما إذا كان موقع الويب الخاص بك قد تم تحميله داخل إطار iframe ثم الخروج منه.

مثال:

    
    
    
    


    
Secure Site
    
This site is protected from clickjacking attacks.

في هذا المثال، يتحقق JavaScript مما إذا كانت النافذة الحالية (window.self) ليست النافذة العلوية (window.top). إذا لم يكن الأمر كذلك، فإنه يعيد توجيه النافذة العلوية إلى عنوان URL للنافذة الحالية، مما يؤدي بشكل فعال إلى الخروج من إطار iframe.

2. تحسين خرق الإطار باستخدام مستمعي الأحداث
يمكنك تحسين تقنية كسر الإطار بشكل أكبر عن طريق استخدام مستمعي الأحداث للتحقق بشكل مستمر مما إذا كانت صفحتك مؤطرة.

مثال:

    
    
    
    


    
Secure Site
    
This site is protected from clickjacking attacks.

في هذا المثال، يتم استدعاء وظيفة منع Clickjacking على أحداث DOMContentLoaded وتحميلها وتغيير حجمها لضمان الحماية المستمرة.

الحماية من جانب الخادم

على الرغم من أن أساليب JavaScript مفيدة، إلا أن تنفيذ الحماية من جانب الخادم يوفر طبقة إضافية من الأمان. فيما يلي كيفية إعداد رؤوس HTTP في Apache وNginx لمنع سرقة النقرات:

1. رأس خيارات الإطار X
يسمح لك رأس X-Frame-Options بتحديد ما إذا كان يمكن تضمين موقعك في إطارات iframe أم لا. هناك ثلاثة خيارات:

DENY: يمنع أي نطاق من تضمين صفحتك.
SAMEORIGIN: يسمح بالتضمين من نفس الأصل فقط.
السماح من URI: يسمح بالتضمين من URI المحدد.
مثال:

X-Frame-Options: DENY

تكوين أباتشي
أضف هذا الرأس إلى تكوين الخادم الخاص بك:

# Apache
Header always set X-Frame-Options "DENY"

تكوين Nginx
أضف هذا الرأس إلى تكوين الخادم الخاص بك:

2. أسلاف إطار سياسة أمان المحتوى (CSP)
يوفر CSP نهجًا أكثر مرونة من خلال توجيه أسلاف الإطار، والذي يحدد الأصول الصالحة التي يمكنها تضمين الصفحة باستخدام إطارات iframe.

مثال:

Content-Security-Policy: frame-ancestors 'self'

تكوين أباتشي
أضف هذا الرأس إلى تكوين الخادم الخاص بك:

مثال:

# Apache
Header always set Content-Security-Policy "frame-ancestors 'self'"

تكوين Nginx
أضف هذا الرأس إلى تكوين الخادم الخاص بك:

# Nginx
add_header Content-Security-Policy "frame-ancestors 'self'";

خاتمة

يعد Clickjacking تهديدًا خطيرًا لأمن الويب، ولكن من خلال تطبيق تقنيات كسر إطار JavaScript والحماية من جانب الخادم مثل X-Frame-Options ورؤوس Content-Security-Policy، يمكنك حماية تطبيقات الويب الخاصة بك بشكل فعال. استخدم الأمثلة المقدمة لتعزيز أمان موقعك وتوفير تجربة أكثر أمانًا لمستخدميك.