【Next.js】HTTPレスポンスヘッダ(Security Headers)を設定する
やりたいこと
Security Headerの対応具合を教えてくれるSecurity Headersで自分のサイトを分析したところ、Dというよろしくないスコアが出てしまった。
このままではセキュリティ的によろしくないので適切なHTTPレスポンスヘッダを設定していく。
- Next.js製
- デプロイ先はVercel
- HTTPレスポンスヘッダ周りは何も手を施していない
ちなみに自分のサイトは上記のような状態で、実を言うとデフォルトでもNext.jsもしくはVercelがよしなに設定してくれていると思っていた。
解決法
/** @type {import('next').NextConfig} */
const nextConfig = {
async headers() {
return [
{
source: "/(.*)", // 全てのパス
headers: [
{
key: "<SOME_KEY>",
value: "<SOME_VALUE>",
},
],
},
];
},
};
module.exports = nextConfig;
next.config.js
にて、適用したいパスと任意のHTTPヘッダーのkey
とvalue
を指定する。指定可能なものは公式ドキュメントから確認できる。
/** @type {import('next').NextConfig} */
const nextConfig = {
async headers() {
return [
{
source: "/(.*)", // 全てのパス
headers: [
{
key: "X-DNS-Prefetch-Control",
value: "on",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
{
key: "X-Frame-Options",
value: "sameorigin",
},
{
key: "X-XSS-Protection",
value: "1; mode=block",
},
{
key: "Referrer-Policy",
value: "strict-origin-when-cross-origin",
},
{
key: "Permissions-Policy",
value: "camera=(), microphone=()",
},
{
key: "Content-Security-Policy",
value: "script-src 'self' 'unsafe-inline' www.googletagmanager.com",
},
],
},
];
},
};
module.exports = nextConfig;
今回はひとまずSecurity Headersの基準に沿って上記のように指定した。
CSPではインラインのものとGoogle Analyticsによる計測のためのスクリプトは許可している。
するとスコアがAになったのでひとまず最低限の対応はできた。
{
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "<SOME_KEY>",
"value": "<SOME_VALUE>"
}
]
}
]
}
ちなみにSSG(static export)している場合はnext.config.js
でのheaders
指定が無効になるが、Vercelにデプロイしている場合に限りvercel.json
に設定を追記することで代替できる。