#プログラミング勉強日記
2021年2月3日
昨日の記事でiframeの使い方についてまとめた。しかし、iframeで外部のWebページを埋め込むにはセキュリティ面でリスクがある。セキュリティを高めるために利用できる設定であるsandbox属性についてまとめる。
#sandboxとは
サンドボックスは直訳すると「砂場」で、砂場で遊んでいる子供が安全であるようにサンドボックスはコンピュータの中で構築された安全な仮想環境のことでる。他と切り離されて、問題が起きてもその外側には影響が出ないようになっている。つまり、サンドボックスは攻撃されることを前提とした仮想環境であり、コンピュータをマルウェアから感染を防ぐ安全である仕組みのことである。
#sandbox属性でサンドボックス化する
iframeではsandbox属性を指定することで、埋め込みコンテンツができることに制限をかける。
使い方
<!-- すべての制限をかける -->
<iframe src="~" sandbox></iframe>
<!-- フォーム送信だけ許可 -->
<iframe src="~" sandbox="allow-forms"></iframe>
<!-- フォーム送信とポップアップを許可
(複数の制限を解除するときには半角スペース区切り) -->
<iframe src="~" sandbox="allow-forms allow-popups"></iframe>
##sandbox属性の属性値
sandboxだけ書いた場合には、以下の項目はすべて許可されなくなる。allow-scriptsとallow-same-originの2つの値を指定すると、sandbox属性が無効になるので注意する。
| 属性値 | 説明 |
|---|---|
| allow-downloads-without-user-activation | ユーザーによる操作のないダウンロードを許可 |
| allow-scripts | スクリプト（ポップアップを除く）の実行を許可 |
| allow-forms | フォームからのデータ送信を許可 |
| allow-popups | ポップアップ・ウィンドウの表示を許可 |
| allow-same-origin | 通常のオリジンと同じポリシーを適用 |
| allow-modals | モーダルウィンドウを許可 |
| allow-orientation-lock | 画面の向きのロックを許可 |
| allow-pointer-lock | Pointer Lock API（マウスカーソルの固定）を許可 |
| allow-presentation | プレゼンテーションモードを許可 |
| allow-popups-to-escape-sandbox | 埋め込みコンテンツから別のウィンドウを開いたときに、sandboxの制限を引き継がないようにする |
| allow-top-navigation | 埋め込み元のページ遷移の操作を許可 |
#参考文献
iframeのセキュリティを高めるsandboxの設定
サンドボックスとは？その仕組みやメリットデメリットについて徹底解説