AWS Amplify でホスティング中の Web システムをクリックジャッキング攻撃に利用されないためにセキュリティヘッダーを設定する
2024.09.30いわさです。
最近 AWS Amplify で Web システムをホスティングしています。
その中で運用環境での利用を考えたときにセキュリティ周りも考慮する必要があるのですが、「クリックジャッキング攻撃」というものをご存知でしょうか。
詳細は上記ページで解説されているとおりなのですが、ダミーページ上に iframe を使って攻撃対象のページを重ねることで実現しています。
そのため iframe での読み込みを制限することによって攻撃対策とすることが可能です。
X-Frame-Options ヘッダフィールドを出力することで、対応ブラウザの場合は iframe での読み込みを禁止あるいは、特定オリジンでのみの表示を許可することが出来ます。
Amplify でホスティングした場合、デフォルトで特に X-Frame-Options が設定されていないのですが、カスタムヘッダーを設定する機能があるため、運用環境ではこういったセキュリティヘッダーの実装を行うことが可能です。
今回こちらのヘッダーを設定する機会がありカスタムヘッダー機能を使ってみましたので紹介します。
デフォルトのレスポンスヘッダーを確認する
まずは適当な Amplify アプリケーションをデプロイします。QuickStart のものです。
こちらでのレスポンスを確認してみましょう。
特に X-Frame-Options は存在していませんね。
% curl -I https://main.ds9f7nfnrd5xv.amplifyapp.com/
HTTP/2 200
content-type: text/html
content-length: 464
date: Mon, 23 Sep 2024 05:25:04 GMT
server: AmazonS3
accept-ranges: bytes
etag: "2cbda4e9583b46d3d7b198e7b4b93194"
last-modified: Mon, 23 Sep 2024 05:18:31 GMT
cache-control: public, max-age=0, s-maxage=31536000
x-cache: Hit from cloudfront
via: 1.1 e3bf3ad0515cd9cbbc3b83df8bda55da.cloudfront.net (CloudFront)
x-amz-cf-pop: KIX50-P3
alt-svc: h3=":443"; ma=86400
x-amz-cf-id: dE_8B8OdV4EyQmUl5MfzDTRV2BwoOE5MSKUYV2xe1I94_3s-Tz6M1g==
age: 5
ではこれを iframe で読み込んでみます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="https://main.ds9f7nfnrd5xv.amplifyapp.com/" frameborder="0"></iframe>
</body>
</html>
読み込むことが出来ました。まぁ当たり前なのですが。
セキュリティヘッダーを設定してみる
では X-Frame-Options ヘッダーを設定しましょう。
対象ブラウザや許容される値などは以下を参考にします。
また、Amplify でのカスタムヘッダー設定方法については以下のドキュメントでも紹介されており、今回の X-Frame-Options がセキュリティヘッダーとして登場しています。
設定方法ですが、Amplify コンソールのアプリケーションメニュー「カスタムヘッダーとキャッシュ」から設定するのが簡単です。あるいはコード上に customHttp.yml ファイルを配置することで、コンソールの設定を上書きすることも可能です。
パスパターンに応じたヘッダー追加の条件を設定することも可能ですが、今回は次のように設定しました。同一オリジン内以外は拒否する制限をします。
編集内容を保存した後にレスポンスを再度確認してみましょう。
% curl -I https://main.ds9f7nfnrd5xv.amplifyapp.com/
HTTP/2 200
content-type: text/html
content-length: 464
date: Mon, 23 Sep 2024 06:02:12 GMT
server: AmazonS3
accept-ranges: bytes
etag: "2cbda4e9583b46d3d7b198e7b4b93194"
last-modified: Mon, 23 Sep 2024 05:18:31 GMT
cache-control: public, max-age=0, s-maxage=31536000
x-frame-options: SAMEORIGIN
x-cache: Miss from cloudfront
via: 1.1 1deccaa2fd17e307c8c129d38a10f3ac.cloudfront.net (CloudFront)
x-amz-cf-pop: KIX50-P3
alt-svc: h3=":443"; ma=86400
x-amz-cf-id: eYd5Aq0t8wSIz-PXk4HX8D1Qs8ZpfxqiThi4UyHqxG8S4l6i9whPhQ==
x-frame-options ヘッダーの追加を確認することが出来ました。
異なるドメインのダミーページ上で iframe 読み込みを試してみます。
読み込めずエラーとなっていますね。良さそうですね。
さいごに
本日は AWS Amplify でホスティング中の Web システムをクリックジャッキング攻撃に利用されないためにセキュリティヘッダーを設定してみました。
Amplify であれば簡単に共通のセキュリティヘッダーが実装可能でした。
セキュリティヘッダー周りは実装忘れがちですね。以下などを参考に実装してみたいと思います。
