iframeのサンドボックスとPermissions Policy

iframe 内の信頼できないコンテンツ（サードパーティ製ウィジェット、ユーザーが送信した HTML のプレビュー、埋め込みゲーム）に、ブラウザーのすべての機能へのアクセスを許可すべきではありません。sandbox 属性は iframe が実行できる操作を制限し、悪意のあるコンテンツだった場合の被害を抑えます。

値を指定しない <iframe sandbox src="..."> は、すべての制限を適用します。スクリプト、フォーム、ポップアップ、トップレベルのナビゲーション、プラグインが無効になり、一意のオリジンとして扱われます。これを出発点とし、埋め込みコンテンツに必要なものだけを追加してください。

sandbox トークンを使うと、特定の機能を再び有効にできます。sandbox="allow-scripts allow-same-origin" は、スクリプトの実行と同一オリジンへのアクセスを許可します。各トークンは 1 つの制限を緩和するため、iframe が実際に必要とする最小限のセットだけを組み合わせてください。

allow-scripts は JS を有効にします。allow-forms はフォーム送信を有効にします。allow-popups は window.open を有効にします。allow-same-origin は iframe を一意のオリジンとして扱わないようにします（localStorage に必要です）。allow-top-navigation は親ウィンドウのナビゲーションを許可します。

自分のオリジンでホストしている iframe に対して allow-scripts と allow-same-origin を組み合わせると、iframe は自身の sandbox を削除する機能を含め、オリジンへの完全なアクセス権を持つようになります。信頼できるコンテンツの場合にのみ組み合わせ、信頼できないコンテンツでは allow-same-origin を省略してください。

Permissions Policy（以前の Feature Policy）は、ページとその iframe が使用できるブラウザー API（カメラ、マイク、位置情報、フルスクリーン、自動再生など）を制御します。親ページに設定すると、Permissions-Policy: geolocation=() によってどこでも位置情報をブロックできます。

iframe の allow 属性は、その iframe に対する親のポリシーを上書きします。<iframe allow="camera; microphone"> を指定すると、親ページのデフォルトポリシーで拒否されていても、iframe 内でそれらの API を使用できます。

仕様で定められる一覧は変化し続けています。カメラ、マイク、位置情報、加速度計、ジャイロスコープ、磁力計、決済、USB、MIDI、フルスクリーン、自動再生、ピクチャーインピクチャーなど、さらに数十種類があります。一覧を監査し、ページで必要としないものはすべて明示的に拒否してください。

Permissions-Policy は、CSP の report-uri と同様に、設定したエンドポイントへ違反を報告します。移行中にこれを利用してください。厳格なポリシーを有効にし、何が壊れるかを確認してから、正当な機能に必要な範囲だけ段階的に緩和します。

機密性の高いページでは、Cross-Origin-Opener-Policy: same-origin と Cross-Origin-Embedder-Policy: require-corp を設定してください。これによりページがクロスオリジンのウィンドウから分離され、Spectre 型のタイミング攻撃から保護されるとともに、SharedArrayBuffer が使用可能になります。

Sandbox、Permissions Policy、CSP、COOP/COEP を組み合わせて保護を重ねます。それぞれが異なる種類の攻撃から守ります。サードパーティ製コンテンツの埋め込みは十分にリスクが高いため、単一の緩和策では不十分です。1 つが回避されても別の対策で検出できるよう、組み合わせてください。

Chrome DevTools の Network パネルと Issues パネルを使って、sandbox と権限に関する違反を見つけてください。多くの違反は何も表示されずに発生します（API が単に undefined を返すか、Promise を reject します）。明示的な報告エンドポイントを用意すると、本番環境で違反を発見しやすくなります。

iframe ではデフォルトで sandbox を有効にし、コンテンツに必要なトークンだけを追加してください。信頼できないコンテンツでは allow-scripts と allow-same-origin の組み合わせを避けてください。Permissions Policy で強力な API をサイト全体で拒否し、iframe の allow 属性で例外を許可してください。CSP と COOP/COEP も組み合わせて、多層防御を実現します。