クリックジャッキング対策をしながら異なるドメインのiframe表示を許可する方法

はじめに

最近、業務の中で自分たちが保有している異なる2つのドメインのWEBサイトの一方を、もう一方にiframeで埋め込み表示する必要がありました。このような埋め込み表示の方法と、その際に考慮すべきセキュリティ対策について調べた内容をまとめていきます。

iframeで埋め込み表示する

ここからは異なる２つのドメインのサイト、サイトA (site-a.com) に サイトB (site-b.com) を埋め込み表示するケースを例に話を進めていきます。

ページ内に他のページを埋め込むには HTML の <iframe> タグを使用します。
iframe についてはご存知の方も多いと思うのでここでは詳細は省略します。
より詳しく知りたい方は以下のMDNのページをご参照ください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe

今回はサイトAにBを埋め込みたいので、サイトAのHTMLに以下のように記載します。

<iframe src="https://site-b.com"></iframe>

とてもシンプルな例ですが基本的にはこれでページを埋め込み表示することができます。
かんたんですね！...と思いきやこのまま無策で安易にサイトを公開すると、とあるセキュリティリスクを抱えてしまいます。

そう、クリックジャッキングのリスクです。

クリックジャッキングのリスク

クリックジャッキングはサイトの利用者に対して意図しない動作を引き起こさせる攻撃手法です。

具体的には、悪意のあるサイトのボタンやリンクの上に、透明化にしたiframeを重ねることで、利用者が実際にクリックしているのは表示されているサイトとは別のサイトのボタンやリンクであるように見せかけます。これにより、利用者は意図せず別のサイトで操作を行ってしまうというものです。

何も対策していない場合、他者が作った悪意あるページに自分のサイトのシェアボタンなどを重ねておくことで利用者は意図せずクリックしてしまう、というようないたずらを仕掛けられる可能性もあります。

自分の趣味ブログ程度であればいたずらを仕掛けられても困りませんが、業務で作るサイトとなると話は別です。しっかりと対策する必要があります。

クリックジャッキングへの対策

X-Frame-Optionsヘッダ

X-Frame-Optionsヘッダは自分のサイトをiframeを通して表示可能とするかを制御するために利用できるHTTPレスポンスヘッダです。

設定できる値としては以下の二つがあります。

• DENY: iframe表示を拒否する
• SAMEORIGIN: 同じオリジン上のiframe表示のみ許可する

クリックジャッキング対策の方法を調べるとこの方法を見かけることも多いですが、実は現在では対策として主流な方法ではありません。特に、古い情報では設定値として ALLOW-FROM uri という指定したオリジン上での表示を許可するものが紹介されていることもありますが、これは現在の主要なブラウザでは廃止されています。

ALLOW-FROMが廃止されているためサイトAにサイトBをiframe表示したいケースではこのヘッダでは対応できず拒否されてしまいます。クリックジャッキングの対策はできますがiframe表示はできません。

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/X-Frame-Options#allow-from_uri

Content-Security-Policyヘッダ

X-Frame-Optionsに代わる現在主流な対策方法がこちらです。

より厳密には Content-Security-Policy （以下、CSP）ヘッダの frame-ancestors ディレクティブを使用した対策方法です。

CSPヘッダには各種攻撃をブラウザのレイヤーで防ぐためのセキュリティポリシーを設定することができ、frame-ancestorsディレクティブを使って自分のサイトを他のサイトがiframe表示可能とするか制御することができます。

例えば、以下のように設定するとiframe表示を拒否します。

Content-Security-Policy: frame-ancestors 'none';

自身と同一ドメインのみ許可したい場合は以下のように設定します。

Content-Security-Policy: frame-ancestors 'self';

サイトAにのみiframe表示を許可したい場合はサイトBのCSPヘッダに以下のように設定します。

Content-Security-Policy: frame-ancestors https://site-a.com;

CSPヘッダのframe-ancestorsディレクティブを使用することでクリックジャッキング対策をしつつ、サイトA上でサイトBをiframe表示することができました。

X-Frame-Optionsヘッダは現在は主流ではなく、代わりにCSPヘッダのframe-ancestorsディレクティブを用いた対策が推奨されています。特別な事情がない限りはこちらを利用するのがよいでしょう。ですがCSPに対応していないレガシーブラウザにおいてはX-Frame-Optionsを用いた対策が必要な場合もあります。サポート対象となるブラウザ環境がCSPをどこまでサポートしているか確認しておくことをおすすめします。

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors

まとめ

• サイトを公開するときはクリックジャッキング攻撃への対策を忘れず実施しましょう
• 異なるドメインのiframe表示はX-Frame-Optionsでは許可できません。代わりにCSP frame-ancestorsディレクティブを利用しましょう
• またモダンブラウザにおいてはX-Frame-Optionsヘッダは現在主流な対策方法ではありません。特別な事情がなければframe-ancestorsディレクティブを利用しましょう