この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
CX事業本部@大阪の岩田です。CloudFrontに待望のアップデートがあり、CloudFront単体でもレスポンスヘッダーが設定できるようになりました！
これまではCloudFront単体でレスポンスヘッダーを設定することができませんでした。S3 & CloudFrontの構成でSPAを配信するのは非常に一般的な構成ですが、この構成でそのまま脆弱性診断を受けると、セキュリティ関連のヘッダが設定されていないと指摘されるのも「あるある」でした。Lambda@Edge(L@E)やCloudFront Function(CF2)を介入させればオリジンレスポンスやビュワーレスポンスが加工できるので、これまではL@EやCF2でレスポンスヘッダを追加付与するという対応がよく採用されていました。
が、静的なレスポンスヘッダ付与のためにいちいちコードの実行が必要になるというのは、どうも無駄が多いように感じてしまいます。
そこで今回のアップデートです。静的なレスポンスヘッダの付与や上書きに関してはCloudFront単体で実施できるようになったので、静的なレスポンスヘッダ付与のためにL@EやCF2を利用している環境ではL@E/CF2が不要になりました！
概要
レスポンスヘッダを設定するには「レスポンスヘッダポリシー」の作成と、作成した「レスポンスヘッダポリシー」とビヘイビアの紐付けが必要になります。マネコンを確認するとそれぞれ設定項目が増えている事がわかります。
設定可能なレスポンスヘッダー
レスポンスヘッダポリシーにはCORS関連とセキュリティ関連で以下のレスポンスヘッダが設定可能です。
- CORS関連
- Access-Control-Allow-Credentials
- Access-Control-Allow-Headers
- Access-Control-Allow-Methods
- Access-Control-Allow-Origin
- Access-Control-Expose-Headers
- Access-Control-Max-Age
- セキュリティ関連
- Content-Security-Policy
- Referrer-Policy
- Strict-Transport-Security
- X-Content-Type-Options
- X-Frame-Options
- X-XSS-Protection
各ヘレスポンスヘッダーは「オリジンのオーバーライド」という設定も可能で、単純な追加以外にもオリジンレスポンスの上書きも可能になっています。
さらに、上記で事前定義されていないレスポンスヘッダーについてもカスタムヘッダーという形で設定可能です。静的なヘッダー付与/上書きであれば困ることは無さそうです。
マネージドポリシー
レスポンスヘッダポリシーはよくあるユースケースに合わせて以下のマネージドポリシーが定義されています。要件さえ合えば、わざわざポリシーを自作しなくてもマネージドポリシーを設定するだけでOKです。
- CORS-and-SecurityHeadersPolicy
- CORS-With-Preflight
- CORS-with-preflight-and-SecurityHeadersPolicy
- SecurityHeadersPolicy
- SimpleCORS
各マネージドポリシーにどういったレスポンスヘッダが定義されているかの詳細はドキュメントを参照してください。
やってみる
実際にS3をオリジンに設定したビヘイビアに対してレスポンスヘッダポリシーを紐付けてみます。
まずはレスポンスヘッダポリシーの作成です。レスポンスヘッダーポリシー作成画面を開き、事前定義されているヘッダーの設定を一通り有効化、ついでにカスタムヘッダーでX-Hogeというヘッダも追加してみました。
こちらのレスポンスヘッダポリシーとS3をオリジンに指定したビヘイビアに対して紐付けて、CloudFrontにアクセスしてみます。
$ curl https://xxxxxxxxxx.cloudfront.net/ -s -o /dev/null --dump-header - -H "Origin:localhost"
HTTP/2 200
content-type: text/html;charset=UTF-8
content-length: 35
date: Wed, 03 Nov 2021 02:28:50 GMT
last-modified: Mon, 14 Sep 2020 00:13:32 GMT
etag: "90380ba0363de1ea14e83d5acba35896"
accept-ranges: bytes
server: AmazonS3
x-xss-protection: 1; mode=block
x-frame-options: SAMEORIGIN
referrer-policy: same-origin
x-content-type-options: nosniff
strict-transport-security: max-age=31536000
x-hoge: hogehoge
access-control-allow-origin: *
x-cache: Hit from cloudfront
via: 1.1 28560b4527f688db980850ab34924cd4.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT12-C3
x-amz-cf-id: xz_BPHOJZlXqYswCDrKm8KFtkc1dig7X1h5LgAnIbyI9ol7JgyZoDA==
age: 68期待通りCORS関連のヘッダ、セキュリティ関連のヘッダ、カスタムヘッダーで定義したX-Hogeが付与されています。
まとめ
レスポンスヘッダを静的に付与するためだけにL@EやCF2を使っている環境は結構多いと思いますが、今回のアップデートを活用することでL@EやCF2が不要になります。システムの複雑性やコストを下げることができるので、是非レスポンスヘッダポリシーへの移行をご検討下さい。
22
