next secure headers

رؤساء الأمن التالي

⛑ يضع رؤوس استجابة آمنة لـ Next.js. ؟

 // /next.config.js

module . exports = {
  async headers ( ) {
    return [ {
      source : "/(.*)" ,
      headers : createSecureHeaders ( {
        contentSecurityPolicy : {
          directives : {
            defaultSrc : "'self'" ,
            styleSrc : [ "'self'" , "https://stackpath.bootstrapcdn.com" ] ,
          } ,
        } ,
        forceHTTPSRedirect : [ true , { maxAge : 60 * 60 * 24 * 4 , includeSubDomains : true } ] ,
        referrerPolicy : "same-origin" ,
      } )
    } ] ;
  } ,
} ; 

جدول المحتويات

• جدول المحتويات
• سمات
  • لماذا تستخدم رؤساء الآثار التالية بدلاً من الخوذة؟
    • رؤساء الأمن التاليين مقابل الخوذة
• بداية سريعة
  • متطلبات
  • تثبيت
  • يثبت
    • استخدام createSecureHeaders في next.config.js (الموصى بها)
    • استخدم withSecureHeaders في مكونات الصفحة
• قواعد
  • forceHTTPSRedirect
  • frameGuard
  • noopen
  • nosniff
  • xssProtection
  • contentSecurityPolicy
  • expectCT
  • referrerPolicy
• API
  • createSecureHeaders
  • withSecureHeaders
  • createHeadersObject
• وصفات
  • كيفية إزالة رأس X-by-by
  • يتجاوز الرؤوس في صفحة معينة باستخدام withSecureHeaders
• المساهمة في رؤساء الأمن القادمين
• رخصة

سمات

سمات	ما يمكنك فعله
⚛ مصمم لـ Next.js	استخدم لـ next.config.js أو مكونات الصفحة في /pages
القواعد التطبيقية الافتراضية	ساعد مشروعك حتى لو لم يكن لديك معرفة
؟ اكتب آمنة	يمكنك استخدام مع TypeScript

لماذا تستخدم رؤساء الآثار التالية بدلاً من الخوذة؟

يشبه رؤساء الأمن في المرحلة التالية خوذة ، والتي تحدد رؤوس استجابة HTTP المتعلقة بالأمان لـ Express.js.

Next.js يدعم لاستخدامها في أطر Node.js مثل Express.js. حتى تتمكن من استخدام الخوذة مع مشروع Next.js الخاص بك إذا قمت بإنشاء خادم مخصص ، لكن فريق تطوير Next.js لا يوصي خادمًا مخصصًا. أيضًا ، يعملون على التنفيذ حتى يكون من الممكن استخدام Next.js بدون خادم مخصص. في الواقع ، يدعم Next.js 9 التوجيه الديناميكي ، لذلك لا نحتاج إلى إنشاء خادم مخصص من أجل تنفيذه باستخدام مثل الاتجاهات التالية ، والذي يتطلب خادمًا مخصصًا.

 // /next.config.js
const { createSecureHeaders } = require ( "next-secure-headers" ) ;

module . exports = {
  async headers ( ) {
    return [ { source : "/(.*)" , headers : createSecureHeaders ( ) } ] ;
  } ,
} ;

إذا كنت ترغب في استخدام الخوذة ، فهذا يتطلب استخدام خادم مخصص مقابل طريقة موصى بها. لحل هذه المشكلة ، وُلد رئيس الرؤساء في المرحلة التالية. تم تصميم رؤساء الرئاسة التالية لمشروع Next.js حتى تتمكن من تحديد أي رؤوس في next.config.js أو مكونات الصفحة.

رؤساء الأمن التاليين مقابل الخوذة

فيما يلي القواعد التي يمتلكها رؤساء الرغمة في المرحلة التالية والخوذة. إن رؤساء الرئاسة القادمة مستوحاة من الخوذة ، لكن ليس لديها بعض القواعد لسبب ما.

	رؤساء الأمن التالي	خوذة	تعليق
أمنية صارمة النقل	forceHTTPSRedirect	hsts
X-Frame-Options	frameGuard	frameguard
X-Download-Reptions	noopen	ieNoOpen
X-Content-type-Roptions	nosniff	noSniff
X-XSS الحماية	xssProtection	xssFilter
محتوى الأمن السياسي	contentSecurityPolicy	contentSecurityPolicy
توقع ct	expectCT	expectCt
المرجع سياسي	referrerPolicy	referrerPolicy
X-DNS-Prefetch-Control	-	dnsPrefetchControl	هذا له آثار خصوصية ولكن هذا يحسن الأداء.
سياسة الميزة	-	featurePolicy	سياسة الميزة تعمل على تحسين الأمن ولكنها تعمل بعد.
X-POWER-BY	-	hidePoweredBy	Next.js يدعم إزالة هذا الرأس في next.config.js .
تتعلق بذاكرة التخزين المؤقت	-	nocache	كما قال خوذة ، التخزين المؤقت له الكثير من الفوائد.
X-Prishted-Cross-Domain Policies	-	crossdomain	Adobe Flash هي واحدة من تقنيات الويب القديمة.

بداية سريعة

متطلبات

• NPM أو الغزل
• node.js 10.0.0 أو أعلى
• Next.js 8.0.0 أو أعلى

تثبيت

$ npm install -D next-secure-headers

إذا كنت تستخدم الغزل ، فاستخدم الأمر التالي.

$ yarn add -D next-secure-headers

❗ ل withSecureHeaders . إذا كنت ترغب في استخدام withSecureHeaders ، فيجب عليك التثبيت بدون خيار -D (أي ، التثبيت على أنها dependencies لا devDependencies ).

يثبت

هناك طريقتان لتحديد الرؤوس. أحدهما هو استخدام createSecureHeaders في next.config.js ، والآخر هو استخدام withSecureHeaders في مكونات الصفحة.

استخدام createSecureHeaders في next.config.js (الموصى بها)

❗ Next.js 9.5 أو أعلى مطلوب. تم دعم وظيفة headers منذ التالي.

؟ ل Next.js 10 و I18N. إذا كان مشروعك يستخدم Next.js 10 وطرق I18N المضمنة ، وكنت ترغب في تطبيق قواعد لجميع الصفحات ، فيجب عليك تحديد "/:path*" source الخصائص بدلاً من "/(.*)" . على العكس من ذلك ، إذا لم يستخدم مشروعك طرق I18N حتى إذا كنت تستخدم Next.js 10 ، فيجب عليك تحديد "/(.*)" بدلاً من ذلك. هذه القيود ربما تكون الأخطاء في Next.js.

تستخدم هذه الطريقة وظيفة createSecureHeaders وطريقة تكوين الرأس المدمجة بواسطة Next.js. هذا غير مطلوب أي خوادم ، ويمكن استخدامه في صفحات ثابتة ، ويمكن أن تحتفظ بالتحسين الثابت التلقائي. إذا لم يستخدم مشروعك أي خوادم (باستخدام صفحات ثابتة أو SSG) أو قمت بإنشاء مشروع Next.js للتو ، أوصي بالاحتفاظ بصفحات ثابتة واعتماد هذه الطريقة.

يقوم الاستيراد createSecureHeaders من رؤساء الأمن التاليين واستخدمها في headers Async وظيفة في next.config.js .

 // /next.config.js
const { createSecureHeaders } = require ( "next-secure-headers" ) ;

module . exports = {
  async headers ( ) {
    return [ { source : "/(.*)" , headers : createSecureHeaders ( ) } ] ;
  } ,
} ;

بشكل افتراضي ، يطبق رئيس الرؤساء في المرحلة التالية بعض القواعد. إذا كنت ترغب في تمكين أو تعطيل القواعد ، فيمكنك إعطاء خيارات للوسيطة الأولى للوظيفة.

 module . exports = {
  async headers ( ) {
    return [ {
      source : "/(.*)" ,
      headers : createSecureHeaders ( {
        contentSecurityPolicy : {
          directives : {
            defaultSrc : "'self'" ,
            styleSrc : [ "'self'" , "https://stackpath.bootstrapcdn.com" ] ,
          } ,
        } ,
        forceHTTPSRedirect : [ true , { maxAge : 60 * 60 * 24 * 4 , includeSubDomains : true } ] ,
        referrerPolicy : "same-origin" ,
      } ) ,
    } ] ;
  } ,
} ;

أيضًا ، يمكنك تكوين رؤوس مختلفة بواسطة عناوين URL بعد المستندات الرسمية.

استخدم withSecureHeaders في مكونات الصفحة

❗ الخوادم مطلوبة. بهذه الطريقة تتطلب أي خوادم لأن withSecureHeaders يستخدم getServerSideProps of Next.js.

استخدم وظيفة تم تصديرها لتطبيق Next.js في /pages/_app.tsx . أيضًا ، يمكنك استخدام أي مكونات صفحة في /pages/xxx.tsx بدلاً من ذلك.

 // /pages/_app.tsx
import { withSecureHeaders } from "next-secure-headers" ;

class Application extends App {
  ...
}

export default withSecureHeaders ( ) ( Application ) ;

بشكل افتراضي ، يطبق رئيس الرؤساء في المرحلة التالية بعض القواعد. إذا كنت ترغب في تمكين أو تعطيل القواعد ، فيمكنك إعطاء خيارات للوسيطة الأولى للوظيفة.

 export default withSecureHeaders ( {
  contentSecurityPolicy : {
    directives : {
      defaultSrc : "'self'" ,
      styleSrc : [ "'self'" , "https://stackpath.bootstrapcdn.com" ] ,
    } ,
  } ,
  forceHTTPSRedirect : [ true , { maxAge : 60 * 60 * 24 * 4 , includeSubDomains : true } ] ,
  referrerPolicy : "same-origin" ,
} ) ( Application ) ; 

قواعد

forceHTTPSRedirect

 {
  forceHTTPSRedirect: boolean | [ true , Partial < { maxAge : number ; includeSubDomains : boolean ; preload : boolean } > ] ;
}

القيمة الافتراضية	MDN
[true, { maxAge: 63072000 }]	https://developer.mozilla.org/docs/web/http/headers/strict-transport-security

هذا هو تعيين رأس "النقل الصارم للأمن (HSTS)" وهو منع الهجمات في الوسط أثناء إعادة التوجيه من HTTP إلى HTTPs. لتمكين هذا يوصى بشدة إذا كنت تستخدم HTTPS (SSL) على الخوادم الخاصة بك.

يمكنك أن تقدم true إذا كنت تريد تمكين هذه القاعدة ، أو يمكنك تحديد الخيارات من خلال إعطاء [true, OPTION_OBJECT] . بشكل افتراضي ، فإن هذا يحدد max-age إلى عامين (63،072،000 ثانية).

frameGuard

 {
  frameGuard: false | "deny" | "sameorigin" | [ "allow-from" , { uri : string | URL } ] ;
}

القيمة الافتراضية	MDN
"deny"	https://developer.mozilla.org/docs/web/http/headers/x-frame-options

هذا هو تعيين رأس "خيارات إطار X-Frame" وهو لمنع هجمات النقر. يوصى بشدة بـ "deny" إذا لم تستخدم عناصر الإطار مثل iframe .

noopen

 {
  noopen: false | "noopen" ;
}

القيمة الافتراضية	MDN
"noopen"	https://developer.mozilla.org/docs/web/http/headers/x-download-options

هذا هو تعيين رأس "X-Download-Options" وهو منع فتح الملفات التي تم تنزيلها تلقائيًا لـ IE8+ (هجمات معالجة MIME).

nosniff

 {
  nosniff: false | "nosniff" ;
}

القيمة الافتراضية	MDN
"nosniff"	https://developer.mozilla.org/docs/web/http/headers/x-content-type-options

هذا هو تعيين رأس "خيارات من نوع X-Content" ، ومن لمنع هجمات استنشاق MIME.

xssProtection

 {
  xssProtection: false | "sanitize" | "block-rendering" | [ "report" , { uri : string | URL } ] ;
}

القيمة الافتراضية	MDN
"sanitize"	https://developer.mozilla.org/docs/web/http/headers/x-xss-protection

هذا هو تعيين رأس "X-XSS-Cremting" ، وهو لمنع هجمات XSS.

إذا قمت بتحديد "sanitize" ، فإن هذا يضع الرأس على "1" وسيقوم المتصفحات بتطهير منطقة غير آمنة. إذا قمت بتحديد "block-rendering" ، فإن هذا يعين الرأس إلى "1; mode=block" وسيحظر المتصفحات صفحة. "حماية X-XSS" تمنع العديد من هجمات XSS ، ولكن يوصى باستخدام سياسة أمان المحتوى مقارنة بهذا.

contentSecurityPolicy

 {
  contentSecurityPolicy :
    | false
    | {
        directives :
          & Partial < {
            childSrc : string | string [ ] ;
            connectSrc : string | string [ ] ;
            defaultSrc : string | string [ ] ;
            fontSrc : string | string [ ] ;
            frameSrc : string | string [ ] ;
            imgSrc : string | string [ ] ;
            manifestSrc : string | string [ ] ;
            mediaSrc : string | string [ ] ;
            prefetchSrc : string | string [ ] ;
            objectSrc : string | string [ ] ;
            scriptSrc : string | string [ ] ;
            scriptSrcElem : string | string [ ] ;
            scriptSrcAttr : string | string [ ] ;
            styleSrc : string | string [ ] ;
            styleSrcElem : string | string [ ] ;
            styleSrcAttr : string | string [ ] ;
            workerSrc : string | string [ ] ;
          } >
          & Partial < {
            baseURI : string | string [ ] ;
            pluginTypes : string | string [ ] ;
            sandbox :
              | true
              | "allow-downloads-without-user-activation"
              | "allow-forms"
              | "allow-modals"
              | "allow-orientation-lock"
              | "allow-pointer-lock"
              | "allow-popups"
              | "allow-popups-to-escape-sandbox"
              | "allow-presentation"
              | "allow-same-origin"
              | "allow-scripts"
              | "allow-storage-access-by-user-activation"
              | "allow-top-navigation"
              | "allow-top-navigation-by-user-activation" ;
          } >
          & Partial < {
            formAction : string | string [ ] ;
            frameAncestors : string | string [ ] ;
            navigateTo : string | string [ ] ;
            reportURI : string | URL | ( string | URL ) [ ] ;
            reportTo : string ;
          } > ;
        reportOnly?: boolean ;
      } ;
}

القيمة الافتراضية	MDN
false	https://developer.mozilla.org/docs/web/http/headers/content-security-policy

هذا هو تعيين رأس "محتوى-أمنية الأمن" أو "المحتوى-تحديد الأمن-التقرير فقط" ، وهو لمنع تحميل وتنفيذ الموارد غير المسموح بها.

إذا أعطيت تقديراً عن reportOnly ، فإن هذا يضع "محتوى محتوى الأمن السياسي للسياسة فقط" للتقييم بدلاً من "محتوى الأمن السياسي".

كما يمكنك تحديد التوجيهات باستخدام أسماء الحالة السلسلة مثل child-src بدلاً من childSrc .

❗ عند تعيين frameAncestors : تأخذ خيارات X-Frame الأولوية. يقول القسم "العلاقة مع خيارات الإطار X" لمواصفات CSP: "إذا تم تسليم مورد بسياسة تتضمن توجيهات تدعى على إطار إطار والتي يكون تصرفها" تنفيذي "، فيجب تجاهل رأس إطار X-Frame" ، ولكن Chrome 40 & Firefox 35 يتجاهل الإطار الموجه ومتابعة X-Frame-Options.

لذلك ، إذا تم تعيين frameAncestors ، فيجب عليك تعيين frameGuard على false .

expectCT

 {
  expectCT: boolean | [ true , Partial < { maxAge : number ; enforce : boolean ; reportURI : string | URL } > ] ;
}

القيمة الافتراضية	MDN
false	https://developer.mozilla.org/docs/web/http/headers/expect-ct

هذا هو تعيين رأس "توقع CT" ، ويقوم بإخبار المتصفحات بتوقع شفافية الشهادة.

referrerPolicy

 {
  referrerPolicy :
    | false
    | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin"
    | ( "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" ) [ ] ;
}

القيمة الافتراضية	MDN
false	https://developer.mozilla.org/docs/web/http/headers/referrer-policy

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

API

createSecureHeaders

 import { createSecureHeaders } from "next-secure-headers" ;

createSecureHeaders ( { referrerPolicy : "same-origin" } ) ;
// [
//   {
//     key: "Referrer-Policy",
//     value: "same-origin",
//   },
// ]

createSecureHeaders هي وظيفة لإرجاع الرؤوس ككائن يتبع تنسيق مثل { key, value } .

 createSecureHeaders ( OPTIONS ) ;

تقبل الحجة الأولى خيارات القواعد.

withSecureHeaders

 import { withSecureHeaders } from "next-secure-headers" ;

export default withSecureHeaders ( { referrerPolicy : "same-origin" } ) ( Page ) ;

withSecureHeaders هو مخصص لتحديد الرؤوس باستخدام getServerSideProps . يمكنك استخدام هذه الوظيفة للتطبيق ( /pages/_app.tsx ) ومكونات الصفحة ( /pages/xxx.tsx ). هذا ليس متاحًا في next.config.js .

 withSecureHeaders ( OPTIONS ) ( APPLICATION_OR_COMPONENT ) ;

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

createHeadersObject

 import { createHeadersObject } from "next-secure-headers" ;

createHeadersObject ( { referrerPolicy : "same-origin" } ) ;
// {
//   "Referrer-Policy": "same-origin",
// }

createHeadersObject هي وظيفة لإرجاع الرؤوس ككائن.

 createHeadersObject ( OPTIONS ) ;

تقبل الحجة الأولى خيارات القواعد.

وصفات

كيفية إزالة رأس X-by-by

بشكل عام ، يجب إزالة رأس استجابة HTTP الذي يعمل بنظام X من رؤوس الاستجابة لأنه يساعد المتسللين على الحصول على معلومات الخادم.

لا يدعم رؤساء الرؤمين في المرحلة التالية إزالة رأس X-By-By ، ولكن Next.js يدعم القيام به.

 // next.config.js
module . exports = {
  poweredByHeader : false ,
} ;

إذا أعطيت false to poweredByHeader في next.config.js ، فإن next.js يزيل الرأس من رؤوس الاستجابة.

يتجاوز الرؤوس في صفحة معينة باستخدام withSecureHeaders

 // /pages/_app.tsx
export default withSecureHeaders ( { referrerPolicy : "same-origin" } ) ( Application ) ;

// /pages/about.tsx
export default withSecureHeaders ( { referrerPolicy : "no-referrer-when-downgrade" } ) ( Page ) ;
// But actually the server responds "same-origin"...

لا يدعم رؤساء الرئاسة التالية لتجاوز رؤوس الاستجابة في مكونات صفحة الطفل بسبب تقييدها من قبل العمارة Next.js.

 // /config/secure-headers.ts
import { withSecureHeaders } from "next-secure-headers" ;

export const secureHeadersDefaultOption : Parameters < typeof withSecureHeaders > [ 0 ] = {
  referrerPolicy : "same-origin" ,
} ;

// /pages/_app.tsx
import { secureHeadersDefaultOption } from "../config/secure-headers" ;

export default withSecureHeaders ( secureHeadersDefaultOption ) ( Application ) ;

// /pages/about.tsx
export default withSecureHeaders ( {
  ... secureHeadersDefaultOption ,
  referrerPolicy : "no-referrer-when-downgrade" ,
} ) ( Page ) ;

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

المساهمة في رؤساء الأمن القادمين

يتم الترحيب بتقارير الأخطاء وطلبات السحب على Github على https://github.com/jagaapple/next-secure-headers. يهدف هذا المشروع إلى أن يكون مساحة آمنة ومرحبة للتعاون ، ومن المتوقع أن يلتزم المساهمون بقواعد سلوك العهد المساهم.

يرجى قراءة الإرشادات المساهمة قبل التطوير والمساهمة.

رخصة

المكتبة متاحة كمصدر مفتوح بموجب شروط ترخيص معهد ماساتشوستس للتكنولوجيا.

حقوق الطبع والنشر 2020 Jaga Apple. جميع الحقوق محفوظة.