next secure headers
v2.2.0 - Support navigation directives for CSP
// /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を使用しますforceHTTPSRedirectframeGuardnoopennosniffxssProtectioncontentSecurityPolicyexpectCTreferrerPolicycreateSecureHeaderswithSecureHeaderscreateHeadersObjectwithSecureHeadersを使用して、特定のページのヘッダーをオーバーライドします| 特徴 | あなたができること |
|---|---|
| [ next.js]用に設計されています | next.config.jsまたはページコンポーネント/pagesに使用します |
| デフォルトの適用ルール | 知識がなくても、プロジェクトを手伝ってください |
| ？タイプセーフ | TypeScriptで使用できます |
Next-Secure-Headersはヘルメットに似ており、Express.jsのセキュリティに関連するHTTP応答ヘッダーを設定します。
next.jsは、Express.jsなどのnode.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-Secure-Headersはnext.jsプロジェクト用に構築されているため、 next.config.jsまたはページコンポーネントでヘッダーを指定できます。
次のことは、次のセキュアヘッダーが持っているルールとヘルメットが持っていることです。 Next-Secure-Headersはヘルメットに触発されていますが、何らかの理由でいくつかのルールはありません。
| 次のセキュアヘッダー | ヘルメット | コメント | |
|---|---|---|---|
| 厳密な輸送セキュリティ | forceHTTPSRedirect | hsts | |
| Xフレームオプション | frameGuard | frameguard | |
| X-DownLoad-Options | noopen | ieNoOpen | |
| X-Content-Type-Options | nosniff | noSniff | |
| X-XSS保護 | xssProtection | xssFilter | |
| Content-Security-Policy | contentSecurityPolicy | contentSecurityPolicy | |
| expect-ct | expectCT | expectCt | |
| Referrer-Policy | referrerPolicy | referrerPolicy | |
| x-dns-prefetch-control | - | dnsPrefetchControl | これにはプライバシーの影響がありますが、パフォーマンスが向上します。 |
| feature-policy | - | featurePolicy | 機能ポリシーはセキュリティを改善しますが、まだ動作しています。 |
| Xパワー - | - | hidePoweredBy | next.jsは、 next.config.jsでこのヘッダーを削除するためにサポートします。 |
| キャッシュに関連しています | - | nocache | ヘルメットが言ったように、キャッシュには多くの利点があります。 |
| X充填 - クロスドメインポリス | - | crossdomain | Adobe Flashは、古いWebテクノロジーの1つです。 |
$ npm install -D next-secure-headers糸を使用している場合は、次のコマンドを使用してください。
$ yarn add -D next-secure-headers
withSecureHeadersの場合。withSecureHeaders使用する場合は、-Dオプションなしでインストールする必要があります（つまり、devDependenciesではなくdependenciesとしてインストールします）。
ヘッダーを指定するには2つの方法があります。 1つは、 next.config.jsでcreateSecureHeaders使用することです。もう1つは、ページコンポーネントでwithSecureHeaders使用することです。
next.config.jsでcreateSecureHeaders使用する（推奨）dever.JS 9.5以下が必要です。
headers関数はnext.js 9.5からサポートされているため、この方法を使用する場合は、next.js 9.5以降を使用する必要があります。
？ next.js 10およびi18nルートの場合。プロジェクトがnext.js 10および組み込みのi18nルートを使用し、すべてのページにルールを適用する場合は、
"/:path*""/(.*)"ではなくsourceプロパティに指定する必要があります。逆に、next.js 10を使用してもプロジェクトがi18nルートを使用しない場合、代わりに"/(.*)"を指定する必要があります。これらの制限は、next.jsのバグかもしれません。
この方法では、 createSecureHeaders関数とnext.jsによる組み込みヘッダー構成の方法を使用します。これは、サーバーを必要とせず、静的ページで使用でき、自動静的最適化を保持できます。プロジェクトがサーバーを使用していない場合（静的ページまたはSSGを使用）、またはnext.jsプロジェクトを作成したばかりの場合、静的ページを保持してこの方法で採用することをお勧めします。
次のセキュアヘッダーからcreateSecureHeadersをインポートし、 next.config.jsのheaders Async関数で使用します。
// /next.config.js
const { createSecureHeaders } = require ( "next-secure-headers" ) ;
module . exports = {
async headers ( ) {
return [ { source : "/(.*)" , headers : createSecureHeaders ( ) } ] ;
} ,
} ;デフォルトでは、Next-Secure-Headersはいくつかのルールを適用します。ルールを有効または無効にする場合は、関数の最初の引数にオプションを提供できます。
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を使用しますincry serverserversが必要です。この方法では、
withSecureHeadersnext.jsのgetServerSideProps使用するため、サーバーが必要です。
/pages/_app.tsxのnext.jsアプリケーションにエクスポートされた関数を使用します。また、代わりに/pages/xxx.tsxの任意のページコンポーネントで使用できます。
// /pages/_app.tsx
import { withSecureHeaders } from "next-secure-headers" ;
class Application extends App {
...
}
export default withSecureHeaders ( ) ( Application ) ;デフォルトでは、Next-Secure-Headersはいくつかのルールを適用します。ルールを有効または無効にする場合は、関数の最初の引数にオプションを提供できます。
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を2年（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」ヘッダーを設定するためであり、MIMEの嗅覚攻撃を防ぐためです。
xssProtection {
xssProtection: false | "sanitize" | "block-rendering" | [ "report" , { uri : string | URL } ] ;
}| デフォルト値 | MDN |
|---|---|
"sanitize" | https://developer.mozilla.org/docs/web/http/headers/x-xss-pretection |
これは、「X-XSS-Protection」ヘッダーを設定するためであり、XSS攻撃を防ぐためです。
"sanitize"指定すると、ヘッダーが"1"に設定され、ブラウザは安全でない領域を消毒します。 "block-rendering"を指定すると、ヘッダーが"1; mode=block"に設定され、ブラウザはページのレンダリングをブロックします。 「X-XSS-Protection」は多くの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-Reportのみの」ヘッダーを設定し、非安定リソースのロードと実行を防ぐためです。
reportOnlyに真実を与えると、「コンテンツセキュリティポリティ」の代わりに「コンテンツセキュリティポリティレポートのみ」を価値に設定します。
また、 childSrcの代わりにchild-srcなどのチェーンケース名を使用してディレクティブを指定することもできます。
frameAncestorsを設定する場合：x-frame-optionsが優先されます。 CSP Specのセクション「Xフレームオプションとの関係」には次のように述べています。「リソースがフレームアンベストという名前の指令を含むポリシーで配信され、その処分が「執行」される場合、Xフレームオプションヘッダーは無視する必要があります」が、Chrome 40＆Firefox 35はX-Frame-Optionsのディレクターを無視します。したがって、
frameAncestorsを設定する場合は、frameGuardfalseに設定する必要があります。
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 |
これは、「Referrer-Policy」ヘッダーを設定するためであり、他のサーバーからリファラーを取得することを防ぐためです。特定の値をサポートしていないレガシーブラウザの1つ以上の値を指定できます。
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を使用してヘッダーを指定するためのHOCです。この関数をアプリケーション（ /pages/_app.tsx ）およびページコンポーネント（ /pages/xxx.tsx ）に使用できます。これはnext.config.jsで利用できません。
withSecureHeaders ( OPTIONS ) ( APPLICATION_OR_COMPONENT ) ;最初の引数はルールのオプションを受け入れ、返された関数の引数はアプリケーションまたはページコンポーネントを受け入れます。返された値は新しいReactコンポーネントです。
createHeadersObject import { createHeadersObject } from "next-secure-headers" ;
createHeadersObject ( { referrerPolicy : "same-origin" } ) ;
// {
// "Referrer-Policy": "same-origin",
// } createHeadersObjectは、ヘッダーをオブジェクトとして返す関数です。
createHeadersObject ( OPTIONS ) ;最初の引数は、ルールのオプションを受け入れます。
一般に、ハッカーがサーバー情報を取得するのに役立つため、X-Powered-by HTTP応答ヘッダーは応答ヘッダーから削除する必要があります。
Next-Secure-Headersは、X搭載のヘッダーを削除することをサポートしていませんが、Next.JSはサポートしています。
// next.config.js
module . exports = {
poweredByHeader : false ,
} ; next.config.jsのpoweredByHeaderにFALSを与えると、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-Secure-Headersは、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 ) ;これを解決するには、オプションを1つのモジュールとして定義する必要があります。その後、オブジェクトをインポートしてマージする必要があります。
バグレポートとプルリクエストは、https://github.com/jagaapple/next-secure-headersのGithubで大歓迎です。このプロジェクトは、コラボレーションのための安全で居心地の良いスペースであることを目的としており、貢献者は貢献者の契約行動規範を遵守することが期待されています。
開発と貢献の前に、貢献ガイドラインをお読みください。
ライブラリは、MITライセンスの条件の下でオープンソースとして利用できます。
著作権2020ジャガアップル。無断転載を禁じます。
