🚪

Next.jsのHTTPセキュリティヘッダーの設定と種類

2025/05/29に公開

今回はHTTPセキュリティヘッダーについて設定に興味があるので、勉強も兼ねて調査しました。
HTTPセキュリティヘッダーとは、ウェブサーバーからブラウザに送信される追加情報で、ウェブサイトのセキュリティ設定を指示するために使われます。
上記を設定することで、ブラウザに対して特定の動きを制限することができます。
Next.jsでの設定方法を紹介します。

環境

言語: React v19.0.0
フレームワーク:　Next.js v14.1

設定内容

セキュリティヘッダーの設定は、next.config.jsに記載できます。
処理としては、next.config.jsのmodule.exportsで、すべてのパスに対して、
セキュリティヘッダーの内容を含めるように記載します。

next.config.js

/** @type {import('next').NextConfig} */

const headers = require("./headers")

module.exports = {
	reactStrictMode: true,
	swcMinify: true,
	eslint: {
		ignoreDuringBuilds: true,
	},
	env: {
		NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || "",
	},
	async headers() {
		return [
			{
				// 全てのパスに Security Headers を適用する
				source: "/(.*)",
				headers,
			},
		]
	},
}

header.js

module.exports = [
	{
		key: "X-DNS-Prefetch-Control",
		value: "on",
		// ブラウザが外部ドメインのDNS解決を事前に行う機能を制御する
	},
	{
		key: "Strict-Transport-Security",
		value: "max-age=63072000;",
		// HSTS (HTTP Strict Transport Security) を設定し、HTTPS接続を強制する
	},
	{
		key: "X-Content-Type-Options",
		value: "nosniff",
		// ブラウザが MIME タイプを勝手に判別するのを防ぐ (MIME スニッフィング防止)
	},
	{
		key: "Referrer-Policy",
		value: "same-origin",
		// リファラー（参照元URL）の送信ポリシーを制御する
	},
	{
		key: "Permissions-Policy",
		value: "camera=()",
		// 各種ブラウザのAPI権限を制御する
	},
]

設定一覧

設定したHTTPのレスポンスヘッダーについて紹介します。

X-DNS-Prefetch-Control

X-DNS-Prefetch-Controlとは、onにすることでDNS先読みを有効にします。
そうすることで、読み込み時間の短縮を行うことができます。

	{
		key: "X-DNS-Prefetch-Control",
		value: "on",
		// ブラウザが外部ドメインのDNS解決を事前に行う機能を制御する
	},

Strict-Transport-Security

Strict-Transport-Securityでは、HTTPSのみを許可し、次回以降は必ずHTTPSで接続するように指示を与えることができます。
HTTPでの接続はセキュリティリスクが高く、非推奨なので、設定するのはおすすめです。
また、max-age=63072000は、63072000秒は約2年を意味しています。
これは有効期限を表し、その期間が経過すると自動的にHTTPSではなく、通常通りにHTTPでサイトを読み込もうとします。

	{
		key: "Strict-Transport-Security",
		value: "max-age=63072000,
		// HSTS (HTTP Strict Transport Security) を設定し、HTTPS接続を強制する
	},

HSTSの解説
https://hstspreload.org/

X-Content-Type-Options

X-Content-Type-Optionsは、ブラウザがサーバーからのファイルの種類（MIMEタイプ）を勝手に推測しないようにします。
分かりづらいですが、MIMEスニッフィングを防ぐことができます。
MIMEスニッフィングについては調べた方が早いかもしれないですが、簡単に言うと、Content-TypeのMIMEタイプをブラウザが推測することです。
MIMEタイプには、text/plain(プレーンテキスト)、text/html(HTML文章)、text/css(CSS)、image/jpeg(画像)などがあり、MIMEタイプがわからない場合でもMIMEタイプを推定します機能です。
これにより、脆弱性を誘発されることがあるため、「nosniff」を設定し、MIMEスニッフィングを防いでいます。

	{
		key: "X-Content-Type-Options",
		value: "nosniff",
		// ブラウザが MIME タイプを勝手に判別するのを防ぐ (MIME スニッフィング防止)
	},

Referrer-Policy

Referrer-PolicyはHTTPヘッダーで、(Refererヘッダーで送られる) リファラー情報をリクエストにどれだけ含めるかを制御します。
今回の例だとsame-originを設定して、同じドメインだとリファラー情報を送り、違うドメインの場合はリファラー情報を送らないという設定ができます。

	{
		key: "Referrer-Policy",
		value: "same-origin",
		// リファラー（参照元URL）の送信ポリシーを制御する
	},

Permissions-Policy

Permissions-Policyは、サイトのコードがアクセスできるAPIや、特定の機能についてブラウザーの既定の動作を変更するかどうかを制限する「ポリシー」を設定できます。
今回の例だとcameraは一切許可しないという設定を追加します。
ここではcamera以外にも設定できる項目が多くあるので、設定するのもおすすめです。

	{
		key: "Permissions-Policy",
		value: "camera=()",
		// 各種ブラウザのAPI権限を制御する
	},

まとめ

セキュリティヘッダーの設定方法と内容について紹介しました。
ぜひ設定してみてください。