sandbox属性

iframe要素のsandbox属性は、iframe要素をサンドボックス化する任意属性。サンドボックスとは、セキュリティ制限した領域のこと。公園の砂場を想像すると分かりやすい。

ブラウザ対応

構文

サンドボックス化

<iframe src="URL" sandbox></iframe>

下記のリストにあるようなセキュリティ制限を施し、サンドボックス化する。

  • 親ドキュメントとiframe要素内のドキュメントを、別起源のドキュメントとして扱う。
  • iframe要素内のドキュメントからの、iframe要素以外のブラウジング・コンテキスト（親ドキュメントや新規ドキュメント）に対する操作を無効化。
  • iframe要素内のドキュメントのフォームを無効化。
  • iframe要素内のドキュメントのスクリプトを無効化。

セキュリティ制限の一部を解除

<iframe src="URL" sandbox="解除キーワード"></iframe>
解除キーワード
allow-same-origin
親ドキュメントとiframe要素内のドキュメントを、同一起源のドキュメントとして扱う。
allow-top-navigation
iframe要素内のドキュメントからの、親ドキュメントに対する操作を許可。
allow-forms
iframe要素内のドキュメントのフォームを有効化。
allow-scripts
iframe要素内のドキュメントのスクリプトを有効化。

半角スペース区切りで、複数の解除キーワードを指定することもできる。

サンプルコード

サンドボックス化

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

iframe要素内のドキュメントからの親ドキュメントの操作を許可

<iframe src="sample.html" sandbox="allow-top-navigation"></iframe>

複数の解除キーワード

<iframe src="sample.html" sandbox="allow-top-navigation allow-scripts"></iframe>

サンプル

HTMLソースコード

<p>sandboxなし： <iframe src="sample-iframe-sandbox.html" style="vertical-align: middle;"></iframe></p>
<p>sandboxあり： <iframe src="sample-iframe-sandbox.html" sandbox style="vertical-align: middle;"></iframe></p>
<p>sandbox="allow-top-navigation"： <iframe src="sample-iframe-sandbox.html" sandbox="allow-top-navigation" style="vertical-align: middle;"></iframe></p>

実際の表示

sandboxなし：

sandboxあり：

sandbox="allow-top-navigation"：

サンプルの動作について

  • 「sandboxなし」の場合、target="_blank"もtarget="_top"も動作する。
  • 「sandboxあり」の場合、target="_blank"もtarget="_top"も動作しない。
  • 「sandbox="allow-top-navigation"」の場合、target="_blank"は動作しないが、target="_top"は動作する。