<iframe sandbox=""></iframe>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ / パルパブル・コンテンツ
利用場所 エンベッディッド・コンテンツが置ける場所
内容 テキスト iframe要素の本文参照

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 ポップアップを許可する
  • sandbox属性の値(キーワード)は、大文字と小文字は区別されません。また、半角スペースで区切って複数のキーワードを指定することができます。

sandbox属性を指定すると、そのインラインフレーム内のコンテンツに次のような制限がかけられます。(一部の制限は、キーワードの指定によって解除することが可能です)

<iframe src="example.html" sandbox></iframe>
  • そのインラインフレーム内のコンテンツは、(同じドメイン内の文書であったとしても)別ドメインの文書として扱われます。(allow-same-origin で解除可能)
  • そのインラインフレーム以外のブラウジング・コンテキスト(ウィンドウやフレーム等)を操作できなくなります(そのインラインフレームの子孫フレームは操作可能)。
  • 最上位のウィンドウを操作できなくなります。(allow-top-navigation で解除可能)
  • プラグインを無効化します。
  • フォームの送信を無効化します。(allow-forms で解除可能)
  • スクリプトの実行を無効化します。(allow-scripts で解除可能)
  • Pointer Lock APIが無効化します。(allow-pointer-lock で解除可能)
  • ポップアップが無効化します。(allow-popups で解除可能)

制限を緩める

上記の制限を緩めたい場合は、sandbox属性の値に以下のキーワードを指定します。

allow-same-origin を指定すると、インラインフレーム内の文書が親文書と同じドメインを持つものとして扱われます。(ただし、実際に同じドメインを持つ場合に限ります)

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

allow-top-navigation を指定すると、インラインフレーム内のコンテンツが最上位のウィンドウを操作できるようになります。この指定により、例えば target="_top" が指定されたリンクを有効にすることができます。

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

allow-forms を指定すると、インラインフレーム内のコンテンツがフォーム送信を行えるようになります。

<iframe src="example.html" sandbox="allow-forms"></iframe>

allow-scripts を指定すると、インラインフレーム内のコンテンツがスクリプトを実行できるようになります。(ただし、ポップアップは阻止されます)

<iframe src="example.html" sandbox="allow-scripts"></iframe>

allow-pointer-lock を指定すると、Pointer Lock APIの使用が許可されます。

<iframe src="example.html" sandbox="allow-pointer-lock"></iframe>

allow-popups を指定すると、ポップアップが有効になります。

<iframe src="example.html" sandbox="allow-popups"></iframe>

複数のキーワードを指定したい場合は、次のように半角スペースで区切って記述します。

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

使用例

値を入れずに指定した例
  • インラインフレーム内のリンク(メニューに戻る)には、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>

表示例