عرض مصدر Next.js/security headers

<noinclude>{{DISPLAYTITLE:ترويسات الأمان في Next.js}}</noinclude>
تُستخدم الترويسات <code>headers</code> في ملف التهيئة <code>next.config.js</code> لتطبيق ترويسات استجابة HTTP على جميع الوجهات في تطبيقك لتحسين مستوى الأمان فيه.<syntaxhighlight lang="javascript">
// next.config.js

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

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

== الترويسات المتاحة للاستخدام في Next.js ==
إليك بعض الترويسات التي يمكنك إضافتها إلى تطبيقك:

=== X-DNS-Prefetch-Control ===
تتحكم هذه الترويسة بالإحضار المسبق لبيانات خادم [https://academy.hsoub.com/devops/networking/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%A3%D8%B3%D9%85%D8%A7%D8%A1-%D8%A7%D9%84%D9%86%D8%B7%D8%A7%D9%82%D8%A7%D8%AA-%D9%81%D9%8A-%D8%B4%D8%A8%D9%83%D8%A9-%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA-r573/ DNS] مما يتيح للمتصفح تحديد أسماء النطاقات للروابط الخارجية مسبقًا مثل ملفات [[CSS]] وملفات [[JavaScript]] وغيرها. تُنفَّذ هذه العملية خلف الستار، وهكذا يُرجح أن تكون أسماء النطاقات DNS جاهزة في الوقت الذي يطلب فيه التطبيق هذه العناصر، ويقلل ذلك التأخير الحاصل عند طلب الرابط.<syntaxhighlight lang="javascript">
{
  key: 'X-DNS-Prefetch-Control',
  value: 'on'
}
</syntaxhighlight>

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

إن كنت ستنشر التطبيق على [https://vercel.com/docs/edge-network/headers#strict-transport-security Vercel]، لن تحتاج إلى هذه الترويسة فهي تُضاف تلقائيًا إلى كل التوزيعات إلا في الحالة التي تُصرِّح فيها عن الترويسات <code>headers</code> في ملف الإعداد <code>next.config.js</code>.<syntaxhighlight lang="javascript">
{
  key: 'Strict-Transport-Security',
  value: 'max-age=63072000; includeSubDomains; preload'
}
</syntaxhighlight>

=== X-XSS-Protection ===
توقِف هذه الترويسة تحميل الصفحات عندما تستشعر بوجود هجمات XSS منعكسة (ReflectedCross site scripting). وعلى الرغم من أن هذا النوع من الحماية غير ضروري عندما تتبنى المواقع ترويسة <code>Content-Security-Policy</code> بإعدادات قوية تعطّل استخدام شيفرة سطرية (<code>'unsafe-inline'</code>)، إلا أنها تُعد عامل حماية للمتصفحات الأقدم التي لا تدعم الترويسة CSP.<syntaxhighlight lang="javascript">
{
  key: 'X-XSS-Protection',
  value: '1; mode=block'
}
</syntaxhighlight>

=== X-Frame-Options ===
تحدد هذه الترويسة إذا ما كان مسموحًا للصفحة أن تعرض عناصر الإطارات الخارجية <code>iframe</code>، وتستخدم هذه الترويسة لإيقاف هجمات الاختطاف بالنقر clickjacking attacks. حلت الترويسة <code>frame-ancestors</code> مكانها حاليًا والتي تعُد أفضل دعمًا في المتصفحات الحديثة.<syntaxhighlight lang="javascript">
{
  key: 'X-Frame-Options',
  value: 'SAMEORIGIN'
}
</syntaxhighlight>

=== Permissions-Policy ===
تسمح لك هذه الترويسة عبر [https://www.w3.org/TR/permissions-policy-1/ خياراتها] بالتحكم بالميزات والواجهات البرمجية التي تُستخدم في المتصفح، وعرفت سابقًا بالاسم <code>Feature-Policy</code>. <syntaxhighlight lang="javascript">
{
  key: 'Permissions-Policy',
  value: 'camera=(), microphone=(), geolocation=(), interest-cohort=()'
}
</syntaxhighlight>

=== X-Content-Type-Options ===
تمنع هذه الترويسة المتصفح من تخمين نوع المحتوى <code>Content-Type</code> إن لم يكن محددًا صراحة. وهكذا يمكن أن يمنع استخدام هذه الترويسة انتشار سكربتات XSS في المواقع التي تسمح للمستخدمين برفع ومشاركة الملفات. فإن حاول مستخدم مثلًا تنزيل صورة وتعامل معها المتصفح على أنها محتوى من نوع آخر كأن تكون ملفًا تنفيذيًا، سيبدو الأمر مثيرًا للشكوك. تثطبق هذه الترويسة أيضًا على إضافات المتصفحات، ولها قيمة واحدة فقط هي <code>nosniff</code>.<syntaxhighlight lang="javascript">
{
  key: 'X-Content-Type-Options',
  value: 'nosniff'
}
</syntaxhighlight>

=== Referrer-Policy ===
تتحكم هذه الترويسة عبر [https://scotthelme.co.uk/a-new-security-header-referrer-policy/ خياراتها] بكمية المعلومات التي يحملها المتصفح عند الانتقال من الموقع الحالي إلى آخر.<syntaxhighlight lang="javascript">
{
  key: 'Referrer-Policy',
  value: 'origin-when-cross-origin'
}
</syntaxhighlight>

=== Content-Security-Policy ===
تساعد هذه الترويسة في منع حقن السكربتات ذات الأصل المشترك (هجمات XSS)، وهجمات الاختطاف بالنقر وغيرها من هجمات حقن الشيفرة. تحدد هذه الترويسة [https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP الأصول المسموحة] عند تحميل محتوى يضم سكربتات أو أوراق تنسيق أو صور أو خطوط كتابة أو كائنات أو وسائط (صوت، فيديو) أو الإطارات الخارجية iframes وغيرها.

بإمكانك كتابة توجيهات الترويسة CSP باستخدام قالب نصي:<syntaxhighlight lang="javascript">
//قبل تعريف ترويسات الأمان
//باستخدام القالب النصي التالي Content Security Policy أضف توجيهات 

const ContentSecurityPolicy = `
  default-src 'self';
  script-src 'self';
  child-src example.com;
  style-src 'self' example.com;
  font-src 'self';  
</syntaxhighlight>عندما يستخدم التوجيه كلمة مفتاحية مثل <code>self</code>، عليك تغليفها ضمن إشارتي تنصيص مفردتين <code><nowiki>''</nowiki></code>. ولا بد من استبدال محرف السطر الجديد المستخدم في القالب النصي بنص فارغ كما يلي: <syntaxhighlight lang="javascript">
{
  key: 'Content-Security-Policy',
  value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim()
}
</syntaxhighlight>

== المصادر ==

* الصفحة [https://nextjs.org/docs/advanced-features/security-headers Security Headers] من توثيق Next.js الرسمي.