<iframe sandbox=""></iframe>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | エンベッディッド・コンテンツが置ける場所 |
| 内容 | 無し |
iframe要素に sandbox="" を追加すると、フレーム内のコンテンツにセキュリティ上の制限をかけることができます。（コンテンツのサンドボックス化）
<iframe src="example.html" sandbox="allow-same-origin"></iframe>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
sandbox="" |
セキュリティ上の制限 | allow-same-origin |
コンテンツを実際のオリジンからのものとして扱う |
allow-top-navigation |
最上位のブラウジング・コンテキストの操作を許可 | ||
allow-forms |
フォームの送信を許可 | ||
allow-scripts |
スクリプトの実行を許可（ポップアップを除く） | ||
allow-pointer-lock |
Pointer Lock APIを許可 | ||
allow-popups |
ポップアップを許可 | ||
allow-presentation |
Presentation APIを許可 | ||
allow-modals |
 モーダルダイアログの表示を許可 |
||
allow-orientation-lock |
画面方向のロックを許可 |
||
allow-popups-to-escape-sandbox |
サンドボックスが継承されない新規ブラウジング・コンテキストの作成を許可 |
||
allow-top-navigation-by-user-activation |
最上位のブラウジング・コンテキストの操作を許可（ユーザーが操作した場合のみ） |
||
allow-downloads |
ダウンロードの実行を許可 |
||
allow-top-navigation-to-custom-protocols |
カスタムプロトコルを外部のソフトウェアで開けるようにする |
||
- sandbox属性の値（キーワード）は、大文字と小文字は区別されません。また、半角スペースで区切って複数のキーワードを指定することができます。
allow-top-navigationとallow-top-navigation-by-user-activationは内容が重複するため、同時に指定することはできません。（同時に指定した場合はallow-top-navigationのみが適用されます）allow-top-navigationまたはallow-popupsを指定している場合は、allow-top-navigation-to-custom-protocolsを指定することはできません。（内容が重複するため：allow-top-navigationまたはallow-popupsを指定した場合もカスタムプロトコルを開けるようになるため）
値を持たないsandbox属性を指定すると、そのフレーム内のコンテンツに以下のような制限がかけられます。
<iframe src="example.html" sandbox></iframe>
- フレーム内のコンテンツは、（同じオリジン内にあったとしても）別オリジンのコンテンツとして扱われます。（これにより各種の制限がかかります）
- 他のブラウジング・コンテキストに対する操作を制限します。
- フォームの送信を無効化します。
- スクリプトの実行を無効化します。
- プラグインを無効化します。
- ポップアップを無効化します。
- その他、各種の制限を行います。
制限を緩める
上記の制限を緩めたい場合は、sandbox属性の値に特定のキーワードを指定します。
次の例では、allow-same-origin を指定しています。この値を指定すると、フレーム内のコンテンツが実際のオリジンからのものとして扱われるようになります。
- コンテンツが同じオリジンにある場合は同一オリジンのコンテンツ、別のオリジンにある場合は別オリジンのコンテンツとして扱われます。
<iframe src="example.html" sandbox="allow-same-origin"></iframe>
次の例では、allow-same-origin と allow-top-navigation を指定して、フレーム内のコンテンツが最上位のブラウジング・コンテキストを操作できるようにしています。この指定により、target="_top" が指定されたリンクを有効にすることができます。
<iframe src="example.html" sandbox="allow-same-origin allow-top-navigation"></iframe>
次の例では、allow-same-origin と allow-modals を指定して、フレーム内のコンテンツが alert()、confirm()、prompt() を使用できるようにしています。
<iframe src="example.html" sandbox="allow-same-origin allow-modals"></iframe>
セキュリティ上の注意点
仕様書やMDNに重要な注意事項として記載されていますが、フレーム内のコンテンツが親文書と同一オリジンの場合に、sandbox属性に allow-same-origin と allow-scripts を同時に指定すると、埋め込まれた文書でsandbox属性を削除することが可能になってしまうそうです 
。（詳しくは上記のリンク先をご確認ください）
そのため、上記の組み合わせは避けるようにしてください。
- 旧HTMLからの変更点
-
- HTML5.2：sandbox属性の値に
allow-presentationが追加されました。 - HTML LS：sandbox属性の値に
allow-modals、allow-orientation-lock、allow-popups-to-escape-sandbox、allow-top-navigation-by-user-activation、allow-downloads、allow-top-navigation-to-custom-protocolsが追加されました。
- HTML5.2：sandbox属性の値に
使用例
- インラインフレーム内のリンク（メニューに戻る）には
target="_top"が指定されているため、sandbox属性に対応しているブラウザではこのリンクは無効となります。
<iframe src="iexample_sandbox.html" sandbox></iframe>
- 表示例
- 上記例と同じ文書を埋め込んでいます。この例では
allow-same-originとallow-top-navigationを指定しているので、sandbox属性に対応しているブラウザでもこのリンクが機能します。
<iframe src="iexample_sandbox.html" sandbox="allow-same-origin allow-top-navigation"></iframe>
- 表示例