<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-navigationallow-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-originallow-top-navigation を指定して、フレーム内のコンテンツが最上位のブラウジング・コンテキストを操作できるようにしています。この指定により、target="_top" が指定されたリンクを有効にすることができます。

<iframe src="example.html" sandbox="allow-same-origin allow-top-navigation"></iframe>

次の例では、allow-same-originallow-modals を指定して、フレーム内のコンテンツが alert()confirm()prompt() を使用できるようにしています。

<iframe src="example.html" sandbox="allow-same-origin allow-modals"></iframe>

セキュリティ上の注意点

仕様書MDNに重要な注意事項として記載されていますが、フレーム内のコンテンツが親文書と同一オリジンの場合に、sandbox属性に allow-same-originallow-scripts を同時に指定すると、埋め込まれた文書でsandbox属性を削除することが可能になってしまうそうです [?]。(詳しくは上記のリンク先をご確認ください)

そのため、上記の組み合わせは避けるようにしてください。

旧HTMLからの変更点
  • HTML5.2:sandbox属性の値に allow-presentation が追加されました。
  • HTML LS:sandbox属性の値に allow-modalsallow-orientation-lockallow-popups-to-escape-sandboxallow-top-navigation-by-user-activationallow-downloadsallow-top-navigation-to-custom-protocols が追加されました。

使用例

値を入れずに指定した例
  • インラインフレーム内のリンク(メニューに戻る)には target="_top" が指定されているため、sandbox属性に対応しているブラウザではこのリンクは無効となります。

<iframe src="iexample_sandbox.html" sandbox></iframe>

表示例
allow-same-origin と allow-top-navigation を指定した例
  • 上記例と同じ文書を埋め込んでいます。この例ではallow-same-originallow-top-navigation を指定しているので、sandbox属性に対応しているブラウザでもこのリンクが機能します。

<iframe src="iexample_sandbox.html" sandbox="allow-same-origin allow-top-navigation"></iframe>

表示例