HTTPセキュリティヘッダー対策した

* 本ページはプロモーションが含まれています

このサイトも、Hugoへ移行してから3年が経過しようとしています。

しばらく放置気味になっていたウェブのHTTPセキュリティヘッダを設定しました。

Webブラウザでのセキュリティ対策を設定するためにWebアプリケーションで使用されるディレクティブで、クロスサイトスクリプティングやクリックジャッキングなどの対策として利用します

今回の記事では、このサイトで利用しているHugo+Netlifyの環境での設定となります
また、設定用語に関しての説明は割愛させていただきます

通常 .htaccessなどで設定する場合

通常、Apache環境下などで.htaccessが利用できる環境であれば、下記のような設定を追記してあげれば良いでしょう
ただし、mod_headersモジュールが有効になっている事が前提となります

# Security Headers
Header always set Content-Security-Policy "upgrade-insecure-requests"
Header always set X-XSS-Protection "1; mode=block"
Header always set X-Content-Type-Options "nosniff"
Header always set Referrer-Policy: "no-referrer-when-downgrade"
Header always set Expect-CT "max-age=7776000, enforce"
Header always append X-Frame-Options "SAMEORIGIN"
Header always set Permissions-Policy "geolocation=(); midi=();notifications=();push=();sync-xhr=();accelerometer=(); gyroscope=(); magnetometer=(); payment=(); camera=(); microphone=();usb=(); xr=();speaker=(self);vibrate=();fullscreen=(self);" 
Header always set Strict-Transport-Security: "max-age=31536000"
# End Security Headers
 

敢えて、最終行に空行を入れている事が大事！
この設定は、WordPressサーバーでも、追記するだけで有効になってます

なお、.htaccessは個別または継承により有効となりますので、システム全体に適用する場合は、Apacheだとhttpd.confやNginxだとdefault.confなどで設定することになります

Hugo+Netlifyでのセキュリティヘッダー

さて、このサイトでのHugoとNetlify環境下では、Netlifyが.htaccessを利用できないので、少し工夫が必要でした

_headers

/static/_headersのファイルを下記の内容で作成
設定内容は自分の環境に合わせて変更してください

/**
Content-Security-Policy = "upgrade-insecure-requests"
Expect-CT = "max-age=7776000, enforce"
Referrer-Policy = "strict-origin-when-cross-origin"
Strict-Transport-Security = "max-age=31536000"
X-Content-Type-Options = "nosniff"
X-Frame-Options = "SAMEORIGIN"
X-XSS-Protection = "1; mode=block"
Permissions-Policy = "geolocation=(); midi=();notifications=();push=();sync-xhr=();accelerometer=(); gyroscope=(); magnetometer=(); payment=(); camera=(); microphone=();usb=(); xr=();speaker=(self);vibrate=();fullscreen=(self);"

netlify.toml

Netlify Playground にて、上記の_headersの内容を記述し、Test rulesのボタンを押すと書式のチェックと下段にnetlify書式が表示されるので、その内容をnetlify.tomlに追記する

netlify.tomlに下記を追記

[[headers]]
for = "/**"
[headers.values]
Content-Security-Policy = "upgrade-insecure-requests"
Expect-CT = "max-age=7776000, enforce"
Permissions-Policy = "geolocation=(); midi=();notifications=();push=();sync-xhr=();accelerometer=(); gyroscope=(); magnetometer=(); payment=(); camera=(); microphone=();usb=(); xr=();speaker=(self);vibrate=();fullscreen=(self);"
Referrer-Policy = "strict-origin-when-cross-origin"
Strict-Transport-Security = "max-age=31536000"
X-Content-Type-Options = "nosniff"
X-Frame-Options = "SAMEORIGIN"
X-XSS-Protection = "1; mode=block"