iframeのセキュリティを高めるsandboxの設定
HTML5から導入されたiframe要素のsandbox属性。
Webページに外部のHTML文書を埋め込むことができるiframe要素において、セキュリティを高めるために利用できる設定です。
埋め込まれる側のWebサイトでは、HTTPヘッダーに「X-Frame-Options: DENY」を追加することで、iframeやobjectの中に表示することを拒否し、セキュリティを保つことができます。
しかし、Webページを別のWerbサイトに埋め込んでうまく活用する場合もあります。
そういう時に使えるのがsandbox属性です。
sandboxとは
sandbox(サンドボックス)の由来は「砂場」からきており、保護された領域を作り出すものです。
sandboxという環境で埋め込んだiframe内のコンテンツにある、外部のプログラムを保護された領域で動作させることによって、悪意のあるプログラムが実行されてもその環境内に抑え、外部に影響を与えないようにしてセキュリティを保ちます。
sandboxでは、保護された領域をつくると共に、セキュリティの制限範囲を指定することができますので、制限を解放してある動作は許可をするなどのコントロールもできます。
sandbox属性では、以下のような属性値を設定することができます。
たくさんありますが、よく利用しそうなものをいくつかご紹介。
- allow-downloads-without-user-activation
- ユーザーによる操作のないダウンロードを許可。
- allow-scripts
- 埋め込み閲覧コンテキストに、スクリプト(ポップアップを除く)の実行を許可。
- allow-forms
- 埋め込み閲覧コンテキストに、フォームからのデータ送信を許可。
- allow-popups
- 埋め込み閲覧コンテキストに、ポップアップ・ウィンドウの表示を許可。
- allow-same-origin
- 埋め込み閲覧コンテキストに、通常のオリジンと同じポリシーを適用。
親ドキュメントで利用できる機能が利用可能になる。
他、モーダルウィンドウを開くことを許可するallow-modalsなどの属性値もあります。
sandboxの利用には注意点がありまして、
allow-scriptsとallow-same-originの2つの値を指定すると、sandbox属性が無効となります。
それでは、サンプルコードでsandboxの設定を見ていきましょう。
sandboxの設定
まずiframeでは、基本的に以下の3つの属性を利用していきます。
- src
- 文書内に埋め込む他の文書のURLを指定。
- width
- 埋め込むHTML文書の高さを指定。
- height
- 埋め込むHTML文書の幅を指定。
srcは必須の属性ですね。
WebページやPDFファイルなど、サーバのURLをを指定します。
widthやheightは後述しますが、指定しなくてもCSSで調整できます。
実際にWebページをiframeで読み込んでみます。
HTML
<iframe src="https://nuovasfida.com/sample" sandbox frameborder="no" loading="lazy"></iframe>
ここでは「sandbox」のみとしていますので、JavaScriptを含む多くの動作に制限がかかります。
スクリプトで出力しているコンテンツなども表示されません。埋め込みコンテキストを観覧するだけとなります。
レスポンシブに対応しやすいように、幅や高さなど重要なスタイルはCSSで調整します。
CSS
iframe {
width: 80%;
max-width: 480px;
height: 80vh;
display: block;
margin: 20px auto;
outline: 3px double;
}
iframeのフレームの枠については、CSSのoutlineプロパティで調整することができますが、ブラウザによっては効かない場合があります。
iframe要素に「frameborder=”no”」の属性を設定して、枠を無効にしておくとコントロールしやすいです。
フレームの枠が必要であれば、outlineプロパティで「outline: 3px double;」のように2本線のボーダーをつけるなどして枠をデザインしていきます。
また、スクロールが必要なければ、iframe要素に「scrolling=”no”」を設定します。
sandboxのみの設定では、JavaScriptなどのプログラムが関わる部分は、動かなかったり表示されなくなります。
JavaScriptの実行やフォームの送信が必要な場合は、それに応じた属性値を設定しましょう。
例えば、アンケートやお問い合わせ、イベント参加申込などに利用できるGoogle Fromsを埋め込む場合には、以下のように「allow-scripts」と「allow-forms」の2つの値だけ設定し、必要な動きだけsandboxで制限をかけます。
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScKFFp7g...../viewform?embedded=true" sandbox="allow-scripts allow-forms" loading="lazy" width="640" height="1155" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
このように、機能として最低限必要な動作だけ許可すると良いでしょう。
Webページのデザインに合わせて埋め込む場合には、sandboxで許可する動作を設定してください。
あと、iframeの外部の文書を読み込むと、レンダリング処理に時間がかかってWebページの表示速度に影響します。ここでも記述しているようにloading属性でlazy loading設定をして、遅延読込させることをお勧めします。
lazy loading設定については以下でご紹介しています。
↓ ↓ ↓
imgやiframeのlazy loading設定で画像や動画、SNSの埋め込みを遅延ロード
iframeは外部の別の文書を見せる時に便利ですが、セキュリティ面で気をつけておかないと、悪意のあるユーザーからいたずらをされることもあります。
sandbox属性を設定して、セキュリティ強化をしておきましょう。