iframe の sandbox 属性を使う
sandbox 属性は iframe の機能を制限し、悪意のある埋め込みコンテンツが親ページへアクセスするのを防ぎます。
- 1
<iframe> の sandbox 属性は、埋め込みコンテンツに制限を適用します。sandbox がない場合、iframe はスクリプトの実行、親 DOM へのアクセス (同一オリジンの場合)、フォームの送信、プラグインの読み込み、親のナビゲーションが可能です。sandbox="" (値なし) ではすべての制限が適用されます。個々の機能を再有効化するには、allow-scripts、allow-same-origin、allow-forms、allow-popups などの値を追加します。
- 2 HTML ミニファイア →
iframe を含む HTML を圧縮して、sandbox 属性を検査します。各 iframe に適切な sandbox 制限が付いているかを確認してください。信頼できないコンテンツに allow-scripts + allow-same-origin を同時に指定してはいけません。iframe がサンドボックスを突破して親にアクセスできるようになってしまいます。
- 3 HTML エスケープツール →
ユーザー提供の URL は、iframe の src 属性に挿入する前にエスケープしてください。これにより javascript: URL の注入を防げます。許可する URL スキーム (https のみ) とドメインのホワイトリストを使ってください。sandbox を使っていても、allow-scripts が指定されていれば javascript: URL は実行され得ます。
よくある質問
- 最も厳格な sandbox は何ですか？
- sandbox="" (空文字列) はすべての制限を適用します。スクリプトなし、フォームなし、ポップアップなし、同一オリジンアクセスなし、プラグインなし、ナビゲーションなし。これが最も安全です。埋め込みコンテンツに必要な機能だけを追加してください。YouTube の埋め込みなら：sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"。
- allow-scripts + allow-same-origin が危険なのはなぜですか？
- 両方を指定すると、iframe はスクリプトを実行でき、さらに自分自身のオリジンに同一オリジンとしてアクセスできます。iframe が親と同一オリジンであれば、親の DOM (document.parent) にアクセスでき、サンドボックスを完全に突破します。両方を同時に使ってよいのは、信頼できる同一オリジンのコンテンツだけです。サードパーティのコンテンツには、allow-same-origin を外した allow-scripts を使うか、iframe を別オリジン (サブドメイン) で配信してください。