Sandboxed iframes
sandbox は HTMLIFrameElement インターフェイスの読み取り専用プロパティで、内部のコンテンツの動作に関する追加の制限を示す DOMTokenList を返します。
これは <iframe> 要素の sandbox 属性を反映します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 5 | 12 | 17 | 5 | 18 | 4 | |
| HTML 属性 | ||||||
sandbox | 5 | 12 | 17 | 5 | 18 | 4 |
| その他 | ||||||
html.elements.iframe.sandbox.allow-downloads `sandbox="ダウンロードを許可"` | 83 | 83 | 82 | 17 | 83 | 17 |
html.elements.iframe.sandbox.allow-forms `sandbox="allow-forms"` | 5 | 79 | ≤49 | 5 | 18 | 4 |
html.elements.iframe.sandbox.allow-modals `sandbox="allow-modals"` | 46 | 79 | 49 | 11.1 | 46 | 11.3 |
html.elements.iframe.sandbox.allow-popups `sandbox="許可ポップアップ"` | 17 | 12 | 28 | 6 | 18 | 6 |
html.elements.iframe.sandbox.allow-popups-to-escape-sandbox `sandbox="サンドボックスへのポップアップのエスケープを許可"` | 46 | 79 | 49 | 11.1 | 46 | 11.3 |
html.elements.iframe.sandbox.allow-same-origin `sandbox="同一オリジンを許可"` | 5 | 79 | ≤49 | 5 | 18 | 4 |
html.elements.iframe.sandbox.allow-scripts `sandbox="許可スクリプト"` | 5 | 79 | ≤49 | 5 | 18 | 4 |
html.elements.iframe.sandbox.allow-top-navigation `sandbox="allow-top-navigation"` | 6 | 79 | ≤49 | 5 | 18 | 4.2 |
html.elements.iframe.sandbox.allow-top-navigation-by-user-activation `sandbox="ユーザーによるトップナビゲーションを許可"` | 58 | 79 | 79 | 11.1 | 58 | 11.3 |
html.elements.iframe.sandbox.allow-top-navigation-to-custom-protocols `sandbox="allow-top-navigation-to-custom-protocols"` | | | 101 | 16 | | 16 |
注釈 1件
実装メモ
- Chrome 50 以前では、このプロパティは `DOMTokenList` ではなく、非推奨の子プロパティ `DOMSettableTokenList` を返していました。
注釈 1件
実装メモ
- 以前は `sandbox` の型が `DOMSettableTokenList` ではなく `DOMString` であった。これは Firefox 29 で修正された。他のブラウザでは `DOMString` として実装されている可能性があります。
注釈 1件
実装メモ
- Chrome Android 50 以前は、このプロパティは `DOMTokenList` ではなく、非推奨の子プロパティ `DOMSettableTokenList` を返していました。
注釈 1件
実装メモ
- Chrome 70 以前のバージョンでは、`allow-scripts` が設定されていない場合、`allow-same-origin` が設定されていても、スクリプトの実行がブロックされます。例えば、iframe 内のノードのクリックイベントに対するバインドハンドラは、スクリプトの実行がブロックされたとしてエラーを投げます。
注釈 1件
実装メモ
- Edge 79 以前では、`allow-same-origin` が設定されていても、`allow-scripts` なしでスクリプトの実行がブロックされます。例えば、iframe 内のノードのクリックイベントに対するバインドハンドラは、スクリプトの実行がブロックされたとしてエラーを投げます。
注釈 1件
実装メモ
- Safariは `allow-same-origin` が設定されていても `allow-scripts` なしではスクリプトの実行をブロックします。例えば、iframe内のノードのクリックイベントに対するバインドハンドラは、スクリプトの実行がブロックされたとしてエラーを投げます。
注釈 1件
実装メモ
- Chrome Android 70 以前のバージョンでは、`allow-scripts` が設定されていない場合、`allow-same-origin` が設定されていてもスクリプトの実行がブロックされます。例えば、iframe 内のノードのクリックイベントにバインドされたハンドラは、スクリプトの実行がブロックされたとしてエラーを投げます。
注釈 1件
実装メモ
- Safariは `allow-same-origin` が設定されていても `allow-scripts` なしではスクリプトの実行をブロックします。例えば、iframe内のノードのクリックイベントに対するバインドハンドラは、スクリプトの実行がブロックされたとしてエラーを投げます。
基本構文
HTML
<iframe src="https://untrusted.example.com"
sandbox="allow-scripts allow-same-origin"
width="600" height="400">
</iframe>ライブデモ
sandbox effect confirm
is skript that Run (allow-scripts none. case). with Sandbox with. iframe
プレビュー全画面表示
実務での使いどころ
-
Sandboxed iframes の活用
sandbox は HTMLIFrameElement インターフェイスの読み取り専用プロパティで、内部のコンテンツの動作に関する追加の制限を示す DOMTokenList を返します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。