next secure headers下載 - next secure headers源代碼下載

隔壁的頭

⛑️為Next設置安全的響應標頭。？

 // /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" ,
      } )
    } ] ;
  } ,
} ;

目錄
特徵
- 為什麼要使用臨時頭頭代替頭盔？
  - 隔壁的頭頭與頭盔
快速開始
- 要求
- 安裝
- 設定
  - 在next.config.js中使用createSecureHeaders （建議）
  - 在頁面組件中withSecureHeaders使用
規則
- forceHTTPSRedirect
- frameGuard
- noopen
- nosniff
- xssProtection
- contentSecurityPolicy
- expectCT
- referrerPolicy
API
- createSecureHeaders
- withSecureHeaders
- createHeadersObject
食譜
- 如何刪除X驅動的標頭
- 使用withSecureHeaders覆蓋特定頁面中的標題
為隔壁的頭頭做出貢獻
執照

特徵

特徵	你能做什麼
⚛️為Next.js設計	用於`next.config.js`或`/pages`中的頁面組件
默認應用規則	即使您沒有知識，也可以幫助您的項目
？鍵入安全	您可以與打字稿一起使用

為什麼要使用臨時頭頭代替頭盔？

隔壁標頭類似於頭盔，該頭盔設置了與Express.js安全性相關的HTTP響應標頭。

next.js支持用於在node.js框架（例如express.js）中使用。因此，如果您創建自定義服務器，則可以在Next.js項目中使用頭盔，但是Next.js開發團隊不建議使用自定義服務器。此外，他們正在努力實施，以便在沒有自定義服務器的情況下使用Next.js。實際上，Next.js 9支持動態路由，因此我們不需要構建自定義服務器即可使用諸如Next-Routes之類的諸如需要自定義服務器的諸如Next Routes。

 // /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框架	`frameGuard`	`frameguard`
X-Download-Options	`noopen`	`ieNoOpen`
X-content-type-options	`nosniff`	`noSniff`
X-XSS保護	`xssProtection`	`xssFilter`
內容 - 安全性	`contentSecurityPolicy`	`contentSecurityPolicy`
期望-CT	`expectCT`	`expectCt`
推薦人 - 政策	`referrerPolicy`	`referrerPolicy`
X-dns-prefetch-Control	-	`dnsPrefetchControl`	這具有隱私影響，但這可以提高性能。
功能政策	-	`featurePolicy`	功能策略改善了安全性，但正在工作草案。
X驅動	-	`hidePoweredBy`	Next.js支持在`next.config.js`中刪除此標頭。
與緩存有關	-	`nocache`	正如頭盔所說，緩存有很多好處。
X-Perment-cross域域	-	`crossdomain`	Adobe Flash是舊的Web技術之一。

快速開始

要求

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 ）安裝。

設定

有兩種指定標題的方法。一種是在next.config.js中使用createSecureHeaders ，另一個是在頁面組件中使用withSecureHeaders 。

在`next.config.js`中使用`createSecureHeaders` （建議）

❗️下一條。 js 9.5或更高。自Next.js 9.5以來，已支持headers功能，因此您必須使用Next.js 9.5或更高版本，如果您想使用這種方式。

？對於Next.js 10和I18N路線。如果您的項目使用Next.js 10和內置的I18N路線，並且您想對所有頁面應用規則，則必須將"/:path*"指定到source屬性，而不是"/(.*)" 。相反，如果您的項目不使用I18N路由，即使使用Next.js 10，則必須指定"/(.*)" 。這些限制可能是Next.js中的錯誤。

這種方式使用createSecureHeaders功能和Next.js的內置標頭配置方式。這不需要任何服務器，可以在靜態頁面中使用，並且可以保留自動靜態優化。如果您的項目不使用任何服務器（使用靜態頁面或SSG），或者您剛剛創建了下一個項目。 JS項目，我建議保留靜態頁面並採用這種方式。

導入從隔壁標題中createSecureHeaders ，並在next.config.js中使用headers異步函數。

 // /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使用next.js的getServerSideProps 。

在/pages/_app.tsx中為您的next.js應用程序使用導出功能。另外，您可以在 /pages /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-options”標頭，這是為了防止點擊夾克攻擊。如果您不使用諸如iframe類的框架元素，則強烈建議使用"deny" 。

`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-type-options”標頭，這是為了防止啞劇嗅探攻擊。

`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保護”標頭，這是為了防止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

這是為了設置“ content-security-policy”或“ content-security-policy-policy-polty-portly”標題，這是為了防止加載和執行非允許資源。

如果您忠於reportOnly ，則將“僅限內容”設置為“只有內容”，而不是“ content-security-policy”。

另外，您可以使用鏈案例名稱（例如child-src而不是childSrc ）指定指令。

設置frameAncestors時：X-Frame-Options優先。 Section "Relation to X-Frame-Options" of the CSP Spec says: "If a resource is delivered with a policy that includes a directive named frame-ancestors and whose disposition is "enforce", then the X-Frame-Options header MUST be ignored" , but Chrome 40 & Firefox 35 ignore the frame-ancestors directive and follow the X-Frame-Options header instead.
因此，如果設置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

這是設置“ Expect-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驅動的標頭

通常，應從響應標頭中刪除X驅動的HTTP響應標頭，因為它可以幫助黑客獲取服務器信息。

隔壁的標題不支持刪除X驅動的按標頭，但Next.js支持要做。

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

如果您在next.config.js中向poweredByHeader false，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 ) ;

要解決此問題，您應該將選項定義為一個模塊，然後應導入並合併對象。

為隔壁的頭頭做出貢獻

歡迎在https://github.com/jagaapple/next-secure-headers上的GitHub上的錯誤報告和拉動請求。該項目旨在是一個安全，熱情的協作空間，預計貢獻者將遵守撰稿人契約的行為準則。

請在開發和貢獻之前閱讀貢獻指南。

執照

根據MIT許可證的條款，該圖書館可作為開源。

展開

next secure headers

隔壁的頭

⛑️為Next設置安全的響應標頭。 ？

目錄

特徵

為什麼要使用臨時頭頭代替頭盔？

隔壁的頭頭與頭盔

快速開始

要求

安裝

設定

在next.config.js中使用createSecureHeaders （建議）

在頁面組件中withSecureHeaders使用

規則

forceHTTPSRedirect

frameGuard

noopen

nosniff

xssProtection

contentSecurityPolicy

expectCT

referrerPolicy

API

createSecureHeaders

withSecureHeaders

createHeadersObject

食譜