ترويسات الأمان في Next.js

تُستخدم الترويسات headers في ملف التهيئة next.config.js لتطبيق ترويسات استجابة HTTP على جميع الوجهات في تطبيقك لتحسين مستوى الأمان فيه.

// next.config.js

// يمكنك اختيار الترويسات التي تضيفها إلى القائمة
// بعد أن تتعلم المزيد تاليًا
const securityHeaders = []

module.exports = {
  async headers() {
    return [
      {
        // طبِّق هذه الترويسة على جميع وجهات تطبيقك
        source: '/:path*',
        headers: securityHeaders,
      },
    ]
  },
}

الترويسات المتاحة للاستخدام في Next.js

إليك بعض الترويسات التي يمكنك إضافتها إلى تطبيقك:

الترويسة X-DNS-Prefetch-Control

تتحكم هذه الترويسة بالإحضار المسبق لبيانات خادم DNS مما يتيح للمتصفح تحديد أسماء النطاقات للروابط الخارجية بشكل مسبق مثل ملفات التنسيقات المورَّثة CSS وملفات JavaScript وغيرها. تُنفَّذ هذه العملية خلف الستار، وهكذا يُرجح أن تكون أسماء النطاقات DNS جاهزة في الوقت الذي يطلب فيه التطبيق هذه العناصر، ويقلل ذلك التأخير الحاصل عند طلب الرابط.

{
  key: 'X-DNS-Prefetch-Control',
  value: 'on'
}

الترويسة Strict-Transport-Security

تخبر هذه الترويسة المتصفحات بضرورة استخدام برتوكول HTTPS بدلًا من HTTP. ويحدد الإعداد التالي أن جميع النطاقات الفرعية الحالية والمستقبلية ستستخدم بروتكول HTTPS خلال فترة زمنية أقصاها max-age سنتان. وبهذا الإعداد سيُمنع المتصفح من الدخول إلى الصفحات أو النطاقات التي تُخدِّم الطلبات من خلال بروتوكول HTTP.

إن كنت ستنشر التطبيق على Vercel، لن تحتاج إلى هذه الترويسة فهي تُضاف تلقائيًا إلى كل التوزيعات إلا في الحالة التي تُصرِّح فيها عن الترويسات headers في ملف الإعداد next.config.js.

{
  key: 'Strict-Transport-Security',
  value: 'max-age=63072000; includeSubDomains; preload'
}

الترويسة X-XSS-Protection

توقِف هذه الترويسة تحميل الصفحات عندما تستشعر بوجود هجمات XSS منعكسة (ReflectedCross site scripting). وعلى الرغم من أن هذا النوع من الحماية غير ضروري عندما تتبنى المواقع ترويسة Content-Security-Policy بإعدادات قوية تعطّل استخدام شيفرة سطرية ('unsafe-inline')، إلا أنها تُعد عامل حماية للمتصفحات الأقدم التي لا تدعم الترويسة CSP.

{
  key: 'X-XSS-Protection',
  value: '1; mode=block'
}

الترويسة X-Frame-Options

تحدد هذه الترويسة إذا ما كان مسموحًا للصفحة أن تعرض عناصر الإطارات الخارجية iframe، وتستخدم هذه الترويسة لإيقاف هجمات الاختطاف بالنقر clickjacking attacks. حلت الترويسة frame-ancestors مكانها حاليًا والتي تعُد أفضل دعمًا في المتصفحات الحديثة.

{
  key: 'X-Frame-Options',
  value: 'SAMEORIGIN'
}

الترويسة Permissions-Policy

تسمح لك هذه الترويسة عبر خياراتها بالتحكم بالميزات والواجهات البرمجية التي تُستخدم في المتصفح، وعرفت سابقًا بالاسم Feature-Policy.

{
  key: 'Permissions-Policy',
  value: 'camera=(), microphone=(), geolocation=(), interest-cohort=()'
}

الترويسة X-Content-Type-Options

تمنع هذه الترويسة المتصفح من تخمين نوع المحتوى Content-Type إن لم يكن محددًا صراحة. وهكذا يمكن أن يمنع استخدام هذه الترويسة انتشار سكربتات XSS في المواقع التي تسمح للمستخدمين برفع و مشاركة الملفات. فإن حاول مستخدم مثلًا تنزيل صورة وتعامل معها المتصفح على أنها محتوى من نوع آخر كأن تكون ملفًا تنفيذيًا، سيبدو الأمر مثيرًا للشكوك. تثطبق هذه الترويسة أيضًا على توسيعات المتصفحات، ولها قيمة واحدة فقط هي nosniff.

{
  key: 'X-Content-Type-Options',
  value: 'nosniff'
}

الترويسة Referrer-Policy

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

{
  key: 'Referrer-Policy',
  value: 'origin-when-cross-origin'
}

الترويسة Content-Security-Policy

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

بإمكانك كتابة توجيهات الترويسة CSP باستخدام قالب نصي:

//قبل تعريف ترويسات الأمان
//باستخدام القالب النصي التالي Content Security Policy أضف توجيهات 

const ContentSecurityPolicy = `
  default-src 'self';
  script-src 'self';
  child-src example.com;
  style-src 'self' example.com;
  font-src 'self';

عندما يستخدم التوجيه كلمة مفتاحية مثل self، عليك تغليفها ضمن إشارتي تنصيص مفردتين ''. ولا بد من استبدال محرف السطر الجديد المستخدم في القالب النصي بنص فارغ كما يلي:

{
  key: 'Content-Security-Policy',
  value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim()
}

المصادر

• الصفحة Security Headers من توثيق Next.js الرسمي.