أصبحت تطبيقات الويب الحديثة ذات أهمية متزايدة لبيانات المستخدم وعمليات الأعمال الحساسة. ومع ذلك، فإن هذه القيمة المتزايدة تجعلها أيضًا أهدافًا للجهات الخبيثة. تعتبر الإجراءات الأمنية الأساسية، مثل استخدام HTTPS، نقطة بداية بالتأكيد؛ ولكنها ليست كافية بمفردها. تسمح لك "رؤوس الأمان" الخاصة ببروتوكول HTTP، وهو بروتوكول الاتصال بين متصفحات الويب والخوادم، بإنشاء طبقة دفاع إضافية من خلال التأثير على سلوك المتصفح مع تطبيقك.

في هذه المقالة، سنتناول أهم رؤوس أمان HTTP التي ستجعل تطبيقات الويب الخاصة بك أكثر مرونة ضد الهجمات الشائعة، وكيفية تكوينها، ولماذا يجب عليك استخدامها، مع أمثلة تعليمات برمجية عملية.

1. HSTS (HTTP Strict Transport Security): دائمًا HTTPS

HSTS هي سياسة أمان توجه متصفحات الويب للاتصال بنطاق معين فقط عبر HTTPS. يمنع هذا المستخدمين من الوصول عن طريق الخطأ عبر HTTP أو التحول إلى HTTP في هجوم الرجل في المنتصف (MITM).

كيف يعمل؟ بمجرد أن يرسل الخادم هذا الرأس، يقوم المتصفح تلقائيًا بإعادة توجيه جميع الطلبات المستقبلية لهذا النطاق إلى HTTPS للمدة المحددة (max-age)، حتى لو كتب المستخدم HTTP.

مثال التنفيذ (Nginx):

server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri; # إعادة توجيه HTTP إلى HTTPS
}

server {
    listen 443 ssl;
    server_name example.com www.example.com;

    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;

    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
    # ... تكوينات أخرى ...
}

max-age: المدة التي يجب أن يتذكرها المتصفح لهذه السياسة (بالثواني). عادة ما تستخدم سنة واحدة (31536000 ثانية).

includeSubDomains: يضمن أن هذه السياسة تنطبق أيضًا على جميع النطاقات الفرعية.

preload: بإضافة نطاقك إلى قائمة التحميل المسبق لـ HSTS، ستقوم المتصفحات بإنشاء اتصال آمن بموقعك حتى في الزيارة الأولى. (للإضافة إلى قائمة التحميل المسبق، يجب عليك تسجيل موقعك على hstspreload.org).

2. Content Security Policy (CSP): منع XSS وحقن البيانات

CSP هو رأس أمان قوي يسمح لك بتحديد الموارد (البرامج النصية، الأنماط، الصور، وما إلى ذلك) التي يمكن لصفحة الويب تحميلها. بهذه الطريقة، حتى إذا كان هناك ثغرة أمنية في XSS (Cross-Site Scripting) على موقعك، يمكنك منع تحميل أو تنفيذ التعليمات البرمجية الضارة.

مثال التنفيذ (Nginx):

server {
    # ...
    add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; form-action 'self'; frame-ancestors 'none'; object-src 'none';";
    # ...
}

مثال التنفيذ (Express.js - مع حزمة Helmet):

const express = require('express');
const helmet = require('helmet');
const app = express();

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "https://trusted.cdn.com"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:"],
    fontSrc: ["'self'"],
    formAction: ["'self'"],
    frameAncestors: ["'none'"],
    objectSrc: ["'none'"],
  },
}));

// ... مسارات وبرمجيات وسيطة أخرى ...
app.listen(3000, () => console.log('Server running on port 3000'));

• default-src 'self': بشكل افتراضي، يسمح بتحميل جميع الموارد فقط من نطاقك الخاص.
• script-src: يحدد مصادر البرامج النصية. تجنب استخدام 'unsafe-inline' و 'unsafe-eval'.
• style-src 'unsafe-inline': يسمح بالأنماط المضمنة. في المشاريع الكبيرة، يجب تجنب هذا أيضًا، ولكن في بعض الأحيان يستخدم للتوافق.
• frame-ancestors 'none': يمنع عرض صفحتك داخل أي إطار (iframe) (يساعد في منع Clickjacking).

من المهم تصميم CSP بعناية واختباره أولاً باستخدام رأس Content-Security-Policy-Report-Only.

3. X-Content-Type-Options: منع هجمات MIME-Sniffing

يمنع هذا الرأس المتصفح من "شم" المحتوى عن طريق تجاهل رأس Content-Type للاستجابة. يمنع هذا على وجه التحديد ملفات المستخدم التي تم تحميلها (على سبيل المثال، ملف HTML تم تحميله كصورة) من التنفيذ عن طريق الخطأ بواسطة المتصفح.

يمكن أن تكون قيمته فقط nosniff.

مثال التنفيذ (Nginx):

server {
    # ...
    add_header X-Content-Type-Options nosniff always;
    # ...
}

مثال التنفيذ (Express.js - مع حزمة Helmet):

app.use(helmet.noSniff());

4. X-Frame-Options: حماية Clickjacking

يتحكم هذا الرأس في ما إذا كان يمكن عرض صفحة الويب الخاصة بك ضمن <frame> أو <iframe> أو <embed> أو <object>. يمنع هذا الموقع الخبيث من تضمين صفحتك داخل موقعه الخاص وتقليد تفاعل المستخدم مع العناصر على صفحتك (Clickjacking).

• DENY: لا يمكن عرض الصفحة في أي إطار (iframe).
• SAMEORIGIN: يمكن عرض الصفحة فقط في الإطارات (iframes) من نفس المصدر (نفس النطاق).
• ALLOW-FROM uri: يمكن عرض الصفحة فقط في الإطارات (iframes) من uri المحدد (دعم محدود من قبل المتصفحات الحديثة، يوصى باستخدام frame-ancestors في CSP بدلاً من ذلك).

مثال التنفيذ (Nginx):

server {
    # ...
    add_header X-Frame-Options DENY always;
    # ...
}

مثال التنفيذ (Express.js - مع حزمة Helmet):

app.use(helmet.frameguard({ action: 'deny' })); // أو 'sameorigin'

5. Referrer-Policy: منع تسرب معلومات المحيل

يتحكم هذا الرأس في محتوى رأس Referer (المحيل) الذي يرسله المتصفح عند تقديم طلب إلى موقع آخر (على سبيل المثال، بالنقر فوق رابط أو تحميل صورة). يمنع هذا تسرب المعلومات الحساسة إلى أطراف ثالثة إذا مرت في عنوان URL.

• no-referrer: يتم إزالة رأس المحيل بالكامل.
• no-referrer-when-downgrade: لا يتم إرسال رأس المحيل عند الانتقال من HTTPS إلى HTTP.
• origin: يتم إرسال نطاق المصدر فقط.
• same-origin: يتم إرسال رأس المحيل فقط للطلبات التي تتم من نفس المصدر.
• strict-origin-when-cross-origin: لا يتم إرسال رأس المحيل عند الانتقال من HTTPS إلى HTTP، يتم إرسال عنوان URL الكامل لطلبات نفس المصدر، ويتم إرسال المصدر فقط لطلبات عبر المصدر. (يوصى به في معظم الحالات.)

مثال التنفيذ (Nginx):

server {
    # ...
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    # ...
}

مثال التنفيذ (Express.js - مع حزمة Helmet):

app.use(helmet.referrerPolicy({ policy: 'strict-origin-when-cross-origin' }));

6. Permissions-Policy (المعروفة سابقًا باسم Feature-Policy): التحكم في ميزات المتصفح

يسمح لك هذا الرأس بالتحكم في ما إذا كان يمكن لصفحة الويب أو المحتوى المضمن (iframe) استخدام ميزات واجهات برمجة تطبيقات (APIs) معينة في المتصفح. يعزز خصوصية المستخدم عن طريق منع الاستخدام الضار للميزات الحساسة مثل الكاميرا والميكروفون والموقع.

مثال التنفيذ (Nginx):

server {
    # ...
    add_header Permissions-Policy "microphone=(), camera=()"; # تعطيل الميكروفون والكاميرا بالكامل.
    # add_header Permissions-Policy "geolocation=(self 'https://trusted.example.com')"; # يسمح بطلبات تحديد الموقع الجغرافي فقط من مصدره الخاص و trusted.example.com.
    # ...
}

مثال التنفيذ (Express.js - مع حزمة Helmet):

app.use(helmet.permissionsPolicy({
  features: {
    camera: ['none'],
    microphone: ['none'],
    geolocation: ["'self'", 'https://trusted.example.com'], // مثال
  },
}));

self: يسمح بالوصول من مصدره الخاص.

*: يسمح بالوصول من جميع المصادر.

none أو (): لا يسمح بالوصول من أي مصدر.

يمكنك أيضًا تحديد عناوين URL محددة.

الخاتمة

تشكل رؤوس أمان HTTP خط دفاع قويًا لتطبيقات الويب الحديثة الخاصة بك. يؤدي التكوين الصحيح لهذه الرؤوس إلى تعزيز تطبيقك بشكل كبير ضد XSS، Clickjacking، MIME-sniffing، والعديد من متجهات الهجوم الأخرى. تذكر أن الأمان عملية مستمرة، وبالإضافة إلى تنفيذ هذه الرؤوس، يجب عليك أيضًا الحفاظ على ممارسات الترميز الخاصة بك آمنة. إن المراجعة المنتظمة لوضع الأمان في تطبيقك واتباع أفضل الممارسات هو المفتاح لحماية أصولك الرقمية.