GoogleマップやYouTubeの埋め込みなど、外部サービスをiframeで読み込んでいる場合、脆弱性診断でそれらが引っ掛かることがあります。
各サービスからコピーできる埋め込みソースでは脆弱性の対策ができてないことが多く、セキュリティ対策としてsandbox属性を追記する必要があります。
脆弱性の対応として、GoogleマップとYouTubeの埋め込みでsandbox属性を付ける機会があったので、必要な属性値ふくめ備忘録として紹介してみます。
sandbox属性
sandbox属性は、iframeなどHTMLの埋め込み要素にセキュリティ制限をかけることができる属性です。
値を空の状態で指定すると、すべての制限を適用します。
<iframe src="〇〇〇〇" sandbox></iframe>
値を空にしてsandbox属性を追加すると、様々なセキュリティの制限が掛かることになり、だいたいのサービスは正常に表示されなくなってしまうので、属性値を使って必要なものを許可する必要があります。
sandbox属性では必要な制限のみ許可することができるようになっていて、以下のような属性値を指定してコントロールします。
| allow-forms | フォームの送信を許可します。 |
|---|---|
| allow-modals | モーダルダイアログの表示を許可します。 |
| allow-downloads | ダウンロードを許可します。 |
| allow-scripts | スクリプトの実行を許可します。 |
| allow-pointer-lock | ポインターロック API の使用を許可します。 |
| allow-orientation-lock | 画面の向きをロックできるようにします。 |
| allow-presentation | プレゼンテーションリクエストを許可します。 |
| allow-popups | ポップアップウィンドウの表示を許可します。 |
| allow-popups-to-escape-sandbox | ポップアップウィンドウがサンドボックスを抜け出せるようにします。 |
| allow-same-origin | 同一オリジンからのリクエストを許可します。 |
| allow-top-navigation | トップレベルナビゲーションを許可します。 |
| allow-top-navigation-by-user-activation | ユーザーアクティベーションによるトップレベルナビゲーションを許可します。 |
| allow-downloads-without-user-activation | ユーザーアクティベーションなしにダウンロードを許可します。 |
| allow-storage-access-by-user-activation | ユーザーアクション（クリックなど）によって localStorage や sessionStorage にアクセスできるようにします。 |
| allow-top-navigation-to-custom-protocols | カスタムプロトコルに対するトップレベルナビゲーションを許可します。 |
各属性値は半角スペースで区切って複数指定することが可能です。
Googleマップ埋め込みで制限許可が必要な属性値
Googleマップの埋め込みコードのiframeにsandbox属性を値を空の状態で指定すると、Googleマップは表示されなくなってしまいます。
マップを表示する許可や、マップ上のリンクをクリックする許可をする必要があり、半角スペースで区切って複数の属性値を指定する必要があります。
Googleマップを埋め込む際にsandbox属性で必要な値は下記の4つです。
- ・allow-scripts：スクリプトの実行を許可します。
- ・allow-popups：ポップアップウィンドウの表示を許可します。
- ・allow-popups-to-escape-sandbox：ポップアップウィンドウがサンドボックスを抜け出せるようにします。
- ・allow-same-origin：同一オリジンからのリクエストを許可します。
これらを繋げて指定すると以下のようになります。
<iframe src="〇〇〇〇" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"></iframe>
YouTube動画埋め込みで制限許可が必要な属性値
YouTubeの埋め込みコードのiframeもsandbox属性を値を空の状態で指定すると、YouTube埋め込み動画は表示されなくなってしまいます。
Googleマップ同様に、動画を表示する許可や、操作ボタンなどをクリックする許可について、属性値を複数指定する必要がありますが、許可する制限の内容が変わります。
YouTubeを埋め込む際にsandbox属性で必要な値は下記の5つです。
- ・allow-scripts：スクリプトの実行を許可します。
- ・allow-popups：ポップアップウィンドウの表示を許可します。
- ・allow-popups-to-escape-sandbox：ポップアップウィンドウがサンドボックスを抜け出せるようにします。
- ・allow-same-origin：同一オリジンからのリクエストを許可します。
- ・allow-top-navigation：トップレベルナビゲーションを許可します。
これらを繋げて指定すると以下のようになります。
<iframe src="〇〇〇〇" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-top-navigation"></iframe>
ほかの外部サービスやツールをiframeで埋め込む際も、使用するもの毎に許可する属性値の種類が変わります。
脆弱性診断をする予定のないサイトでも、ページ上にGoogleマップやYouTubeなどの外部サービスをiframeで埋め込む場合は、基本的にsandbox属性を付けるようにしておくのも良いかと思います。
sandbox属性を設定する際にぜひ。。。