【Next.js和訳】Advanced Features/Security Headers
この記事について
株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。
この記事は、Advanced Features/Security Headersの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Security Headers
アプリケーションのセキュリティを向上させるために、next.config.js で headers を使用すると、アプリケーション内のすべてのルートにHTTPレスポンスヘッダを適用することができます。
// どのヘッダーをリストに加えるかを選択することができます。
// 以下に詳細を説明します。
const securityHeaders = []
module.exports = {
async headers() {
return [
{
// これらのヘッダーをアプリケーションのすべてのルートに適用します。
source: '/(.*)',
headers: securityHeaders,
},
]
},
}
オプション
X-DNS-Prefetch-Control
このヘッダーはDNSのプリフェッチを制御し、ブラウザが外部リンク、画像、CSS、JavaScriptなどのドメイン名解決を積極的に行うことを可能にします。このプリフェッチはバックグラウンドで行われるため、参照されるアイテムが必要になるまでに DNS が解決される可能性が高くなります。これにより、ユーザーがリンクをクリックしたときの待ち時間が短縮されます。
{
key: 'X-DNS-Prefetch-Control',
value: 'on'
}
Strict-Transport-Security
このヘッダーは、HTTPではなく、HTTPSでのみアクセスすべきであることをブラウザに通知します。以下の設定を使用すると、現在および将来のすべてのサブドメインは、max-age 2年間、HTTPSを使用します。これにより、HTTPでしか提供されないページやサブドメインへのアクセスがブロックされます。
Vercel にデプロイしている場合は、すべてのデプロイメントにこのヘッダーが自動的に追加されるため、このヘッダーは必要ありません。
{
key: 'Strict-Transport-Security',
value: 'max-age=63072000; includeSubDomains; preload'
}
X-XSS-Protection
このヘッダーは、反映されたクロスサイトスクリプティング（XSS）攻撃を検出すると、ページの読み込みを停止します。インラインJavaScriptの（unsafe-inline）使用を禁止する強力なContent-Security-Policyをサイトが実装している場合、この保護は必要ありませんが、CSPをサポートしていない古いWebブラウザの保護にはなります。
{
key: 'X-XSS-Protection',
value: '1; mode=block'
}
X-Frame-Options
このヘッダーは、サイトを iframe 内で表示することを許可するかどうかを示します。これにより、クリックジャッキング攻撃を防ぐことができます。このヘッダは、最新ブラウザでのサポートが充実しているCSPの frame-ancestors オプションに取って代わられました。
{
key: 'X-Frame-Options',
value: 'SAMEORIGIN'
}
Permissions-Policy
このヘッダーを使用すると、ブラウザで使用できる機能やAPIを制御することができます。以前は Feature-Policy という名前でした。許可オプションの全リストは こちら でご覧いただけます。
{
key: 'Permissions-Policy',
value: 'camera=(), microphone=(), geolocation=(), interest-cohort=()'
}
X-Content-Type-Options
このヘッダは、Content-Type ヘッダが明示的に設定されていない場合に、ブラウザがコンテンツの種類を推測しようとするのを防ぎます。これにより、ユーザーがファイルをアップロードしたり共有したりできるウェブサイトのXSSエクスプロイトを防ぐことができます。例えば、ユーザーが画像をダウンロードしようとすると、実行ファイルのような異なる Content-Type として扱われ、悪意を持たれる可能性があります。このヘッダーは、ブラウザの拡張機能をダウンロードする際にも適用されます。このヘッダーの有効な値は nosniff のみです。
{
key: 'X-Content-Type-Options',
value: 'nosniff'
}
Referrer-Policy
このヘッダーは、現在のウェブサイト（オリジン）から別のウェブサイトに移動する際に、ブラウザが含める情報の量を制御します。それぞれのオプションについては、こちら をご覧ください。
{
key: 'Referrer-Policy',
value: 'origin-when-cross-origin'
}
Content-Security-Policy
このヘッダーは、クロスサイトスクリプティング（XSS）、クリックジャッキング、およびその他のコードインジェクション攻撃の防止に役立ちます。コンテンツセキュリティポリシー（CSP）では、スクリプト、スタイルシート、画像、フォント、オブジェクト、メディア（オーディオ、ビデオ）、iframeなどを含むコンテンツの許可されるオリジンを指定できます。
さまざまなCSPオプションについては、こちら をご覧ください。
{
key: 'Content-Security-Policy',
value: // Your CSP Policy
}
References
関連
詳細については、以下のセクションをお勧めします。
Discussion