Amazon CloudFrontでのクリックジャッキング対策：非推奨のX-Frame-OptionsからCSP frame-ancestorsへの移行

はじめに

こんにちは。
第一開発事業部の馬場です。

先日とあるプロジェクトにてAmazon CloudFrontのレスポンスヘッダーポリシー機能の使用し、クリックジャッキングと呼ばれる脆弱性の対策を行いました。
その際に従来使用されていたHTTPヘッダーが現在は非推奨ということが判明したため、その内容と現在のベストプラクティスを解説します。

【Amazon CloudFrontとは】
アマゾン ウェブ サービス(AWS) が提供するコンテンツ配信ネットワーク（CDN）のマネージドサービス。
世界中に配置されたエッジロケーションにコンテンツをキャッシュし、ユーザーに最も近いエッジロケーションからコンテンツを配信するサービスです。
ユーザー側はコンテンツを見る際にコンテンツのWebサーバーを直接見るのではなく、間にあるAmazon CloudFrontでキャッシュデータを見る仕組みです。
メリットとしてはパフォーマンスの向上（高速化）、可用性と信頼性の向上（負荷軽減）、セキュリティ強化（暗号化、DDoS攻撃緩和、脆弱性対策）、コスト削減があります。
公式ドキュメント：Amazon CloudFront-低レイテンシーかつ高速な転送速度でコンテンツを安全に配信-

【クリックジャッキングとは】
悪意のあるサイトが透明なiframeタグなどを使ってユーザーを騙し、ボタンのクリックや情報入力などの意図しない操作をさせる攻撃。

非推奨となった機能X-Frame-Optionsについて

当初クリックジャッキング対策としてX-Frame-OptionsというHTTPレスポンスヘッダーの使用を想定していました。
これは自サイトが他サイトからiframeタグなどの埋め込みを許可するかどうかをブラウザに指示する仕組みであり、以下の値が設定できます。

しかしMDN Web DocsのX-Frame-Optionsのブラウザ対応表より現在では多くのブラウザはALLOW-FROMがサポートされていませんでした。
また今後突然動作しなくなる可能性があるため使用は非推奨となっておりました。
その代わりとしてContent-Security-Policy（以下CSP）のframe-ancestorsの使用が推奨されていました。

代替機能CSPのframe-ancestorsについて

上記の理由から現在では柔軟な制御が可能なCSPのframe-ancestorsの使用が推奨されています。

上記よりCSPのframe-ancestorsはX-Frame-Optionsと同じような運用ができ、かつ複数URLの設定も可能となります。
またX-Frame-OptionsのALLOW-FROMは多くのブラウザでサポートされていませんが、MDN Web DocsのCSP: frame-ancestorsのブラウザ対応表よりCSPの該当設定は全ブラウザでサポートされています。

今回のプロジェクトでは、すべてのタグ埋め込みを拒否する必要があったため’none’を用いました。

【CSP frame-ancestorsの設定方法】
①AWSにログインし、Amazon CloudFrontを選択する。
②左部のポリシーを選択し、右部のレスポンスヘッダータブを選択する。
③右部にて対象のカスタムポリシーを選択する。
④編集ボタンをクリックし、Content-Security-Policyにチェックを付けて設定値を入力し、変更を保存ボタンをクリックする。（以下では’none’を設定。）

⑤編集したカスタムポリシーを対象のディストリビューションのビヘイビアに関連付け（アタッチ）します。

【CSP frame-ancestors ‘none’設定後の動作検証】
iframeタグを埋め込んだ場合、接続拒否のエラーメッセージが表示されます。

【Google Chromeでの確認方法】
①自サイトにアクセスし、開発者ツールを起動します。
②開発者ツールでネットワークタブを選択し、ページをリロードした後に左部の名前列からHTMLファイルなどのリクエストを選択します。
③右部のヘッダータブを選択し、レスポンスヘッダー内に「Content-Security-Policy」の項目と値を確認します。

まとめ

・クリックジャッキング対策を行う場合はX-Frame-Optionsではなく、CSPのframe-ancestorsを使うのがベストプラクティスです。
・設定値としては’none’を基本とし、用途に応じて他の値を使い分ける必要があります。