HTTP セキュリティヘッダーを Amazon CloudFront で追加する

https://www.example.com/
HTTP/1.1 200 OK
Connection: keep-alive
Content-Type: text/html; charset=UTF-8
Date: Fri, 23 Aug 2024 03:12:49 GMT
ETag: W/"773-6027e43eccd62"
Last-Modified: Wed, 09 Aug 2023 14:26:28 GMT
Referrer-Policy: strict-origin-when-cross-origin
Server: Apache/2.4.58 (Amazon Linux)
Strict-Transport-Security:max-age=31536000
Transfer-Encoding: chunked
Via: 1.1 ec09137e1a146c0a7d4ba39d013ba29c.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: ATL58-P3
X-Cache: Miss from cloudfront
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
content-encoding: gzip
vary: accept-encoding

これで、CloudFront レスポンスヘッダーポリシーを使用して、Web サイトにセキュリティヘッダーを問題なく設定することができました。

エッジ関数を使用したセキュリティヘッダーの追加

特定のリクエストヘッダーや Cookie が存在する場合、またはクエリ文字列に特定の値が含まれる場合など、特定の条件下でのみセキュリティヘッダーの値を動的に追加または変更する必要がある場合は、CloudFront Functions または Lambda@Edge を使用したエッジでのカスタム関数を利用することができます。CloudFront Functions と Lambda@Edge の違いおよび推奨されるユースケースについては、このデベロッパーガイドをご覧ください。
CloudFront Functions は、CloudFront エッジロケーションで軽量な JavaScript 関数をデプロイして実行するための機能です。CloudFront Functions を使用してセキュリティヘッダーを追加するには、図 6 に示すように CloudFront コンソールで「関数の作成」を選択して関数を作成する必要があります。

図 7 に示すように、関数の名前と説明を入力し、ランタイムを選択します。

セキュリティヘッダーを追加するサンプルコードは、aws-samples の GitHub リポジトリで見つけることができます。本番環境にデプロイする前に、関数をテストしてください。
関数のデプロイには数秒かかります。デプロイが完了したら、関数の関連付け手順に従ってください。これで、CloudFront Functions を使用してセキュリティヘッダーを設定することができました。

Lambda@Edge の使用

状況によっては、CloudFront FunctionsよりもLambda@Edgeの方が適している場合があります。例えば、ビューワーレスポンストリガーにおける別の要件の実装で、Lambda@Edge でのみ利用可能な機能が必要になる場合があります。これには、ネットワーク呼び出し、サードパーティライブラリ、リクエストボディへのアクセスなどが含まれ、CloudFront Functions の使用が制限される可能性があります。
Lambda@Edge 関数を CloudFront に追加するには、このガイドの手順に従ってください。また、Lambda@Edge 関数は Node.js または Python を使用して記述することができます。
以下の Node.js で記述されたサンプルコードは、Lambda@Edge を使用してレスポンスに Strict-Transport-Security、Content-Security-Policy、X-Content-Type-Options、X-Frame-Options、X-XSS-Protection、および Referrer-Policy などのセキュリティヘッダーを追加する方法を示しています。

export const handler = async (event) => {
     // Get contents of response
     const response = event.Records[0].cf.response;
     const headers = response.headers;
     // Set new headers
     headers['strict-transport-security'] = [{key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubdomains; preload'}];
     headers['content-security-policy'] = [{key: 'Content-Security-Policy', value: "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'"}];
     headers['x-content-type-options'] = [{key: 'X-Content-Type-Options', value: 'nosniff'}];
     headers['x-frame-options'] = [{key: 'X-Frame-Options', value: 'DENY'}];
     headers['x-xss-protection'] = [{key: 'X-XSS-Protection', value: '1; mode=block'}];
     headers['referrer-policy'] = [{key: 'Referrer-Policy', value: 'same-origin'}];

     return response;

};

セキュリティヘッダーによるセキュリティ強化の効果を検証する

セキュリティヘッダーを追加する前後に Mozilla Observatory を使用することができます。図 8、9、10、11 に示すように、セキュリティヘッダーを追加した後はスキャンの評価が向上します。
セキュリティヘッダー追加前

また、図 10 と図 11 はセキュリティヘッダー追加後の結果を示しています。

クリーンアップ

この記事の手順に従うことで、レスポンスヘッダーポリシー、CloudFront Functions、Lambda@Edge 関数、および CloudFront ディストリビューションを作成した可能性があります。これらのリソースが不要になった場合は、必ず削除するようにしてください。

まとめ

この記事では、HTTP セキュリティヘッダーとは何か、そして CloudFront レスポンスヘッダーポリシー、CloudFront Functions、および Lambda@Edge を使用してこれらのヘッダーを追加する方法について説明しました。この記事で説明したプロセスに従い、ユースケースに適した方法を選択することで、Web サイトのプライバシーとセキュリティを強化することができます。まず Content-Security-Policy、X-Frame-Options、Strict-Transport-Security などの基本的なヘッダーから始め、アプリケーションの具体的なニーズに応じて段階的に保護を強化していきましょう。開発環境で十分にテストを行い、デプロイ後は互換性の問題が発生していないか監視することを忘れないようにしてください。
セキュリティは継続的なプロセスです。定期的にヘッダーを監査し、新しいセキュリティに関する推奨事項を常に把握しながら、アプリケーションの進化に合わせてポリシーを適宜見直していきましょう。
この記事に記載されているリンクから、上記の機能に関する詳細情報を確認することができます。CloudFront を初めて使用する場合は、こちらのリンクから CloudFront の詳細を確認し、使い始めることができます。

著者について