【Next.js和訳】Advanced Features/Security Headers
この記事について
この記事は、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