🚀

【Next.js和訳】Advanced Features/Security Headers

2021/10/02に公開・約3,600字

Next.js

tech

この記事について

この記事は、Advanced Features/Security Headersの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Security Headers

アプリケーションのセキュリティを向上させるために、next.config.js で headers を使用すると、アプリケーション内のすべてのルートに HTTP レスポンスヘッダを適用することができます。

next.config.js

// どのヘッダーをリストに加えるかを選択することができます。
// 以下に詳細を説明します。
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
}