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属性を設定して、セキュリティ強化をしておきましょう。