sandbox属性のデモ

iframe要素の、sandbox属性のデモです。

お使いのブラウザは、sandbox属性に

allow-formsキーワード

キーワードを追加すると、form要素が有効になります。

キーワードあり

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

キーワードなし

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

allow-scriptsキーワード

キーワードを追加すると、JavaScriptが有効になります。

キーワードあり

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

キーワードなし

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

allow-modalsキーワード

キーワードを追加すると、モーダルが有効になります。

キーワードあり

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

キーワードなし

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

allow-popupsキーワード

キーワードを追加すると、新しいウィンドウを開けます。

キーワードあり

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

キーワードなし

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

allow-top-navigationキーワード

キーワードを追加すると、最上位の親ウィンドウを操作できます。具体的には、子ウィンドウのリンクで、親ウィンドウをリンク先に遷移させることができます。

キーワードあり

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

キーワードなし

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

allow-same-originキーワード

キーワードを追加すると、コンテンツがオリジンを持つことを許可します。デモでは、子ウィンドウからこの文字を赤くします。コンテンツがオリジンを持たない場合、同一オリジンポリシーの制限で、別オリジンのコンテンツをJavaScriptで操作することができません。

キーワードあり

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

キーワードなし

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

allow-popups-to-escape-sandboxキーワード

キーワードを追加すると、埋め込みコンテンツから新しく開かれたウィンドウにsandbox属性が継承されません。下記のインラインフレームにはいずれもJavaScriptを許可していません。その状態が引き継がれるか否かを確認して下さい。

キーワードあり

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

キーワードなし

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

allow-orientation-lockキーワード

キーワードを追加すると、端末の向きの操作を許可します。Screen APIに対応しているモバイルブラウザでご確認下さい。

キーワードあり

<iframe src="./allow-orientation-lock.html" allowfullscreen sandbox="allow-scripts allow-orientation-lock"></iframe>

キーワードなし

<iframe src="./allow-orientation-lock.html" allowfullscreen sandbox="allow-scripts"></iframe>

allow-pointer-lockキーワード

キーワードを追加すると、Pointer Lock APIを使用できます。

キーワードあり

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

キーワードなし

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