iframeのsandbox属性は制限を先に掛け必要な権限だけ戻す

外部のHTMLをiframeで埋め込むなら、sandbox属性で制限を先に有効にし、表示に必要な権限だけをtokenで戻します。動かない機能があるたびにallow-*を全部足すと、何を制限したかったのか分からなくなります。

最初に確認するのは、埋め込む目的、配信元、必要な操作です。読むだけの内容なのか、form送信が必要なのか、scriptが必要なのかを分けます。埋め込みcodeを貼る作業と、外部内容へ許す権限を決める仕事は同じではありません。

値のないsandboxから制限を始める

HTML 5.1のiframe要素では、sandbox属性を指定すると、iframe内の内容へ追加の制限が有効になります。値を付けない状態では、固有のoriginとして扱われ、form、script、top-level browsing contextへの移動などが制限されます。

説明用の仮例です。外部の操作案内を表示するだけなら、まず値のないsandboxで確認します。

<iframe
  src="https://example.net/help/"
  sandbox
  title="操作案内">
</iframe>

sandboxは、埋め込み内容を信頼済みに変える印ではありません。できることを減らす属性です。外部pageの運営者、配信domain、更新方法が分からない状態を、属性一つで解決したとは考えません。

tokenは制限を外すために追加する

sandboxの値は、空白で区切ったtokenです。各tokenは、制限された機能の一部を再び許可します。

formとscriptだけが必要だと確認できた場合は、次のように指定します。

<iframe
  src="https://example.net/reservation/"
  sandbox="allow-forms allow-scripts"
  title="予約日時の選択">
</iframe>

これは説明用の仮例であり、予約service全般に使える指定ではありません。認証、Cookie、別window、最上位pageへの移動を使うserviceでは、別のtokenが必要になる場合があります。必要な動作を確認せず、見た目が表示されたことだけで決めないでください。

allow-scriptsとallow-same-originを同一originで重ねない

埋め込みpageが親pageと同じoriginにあり、allow-scriptsとallow-same-originを同時に指定すると、埋め込みpageのscriptがsandbox属性を取り除き、自身を再読込できます。これではsandboxから抜けられるため、制限として役に立ちません。

利用者が入力したHTMLや、十分に確認していないHTMLを表示する場合は、親pageと同じserverへ置くだけでは不十分です。HTML 5.1は、危険になり得る内容を別の専用domainから配信するよう示しています。利用者がiframeの外でそのURLを直接開いた場合も考える必要があるからです。

同じoriginの内容へscriptとorigin依存機能の両方が必要なら、tokenを増やして済ませず、内容を信頼できる範囲へ直すか、配信domainを分けます。sandboxは、配信元の管理や内容確認を省くための手段ではありません。

属性を変えたら再読込して動作を確かめる

sandboxの制限は、iframeのnested browsing contextが移動するときに適用されます。表示済みのpageから属性を取り除いても、そのpageの制限は直ちには変わりません。tokenを追加または削除したら、iframeを再読込し、最初から操作を確認します。

確認項目は、許可した機能と、許可していない機能に分けます。

1. 本文や画像が読めるか。
2. 許可したformまたはscriptが必要な範囲で動くか。
3. 許可していないpopupや最上位pageへの移動が起きないか。
4. 埋め込み先のURLと配信domainが想定どおりか。
5. 外部serviceの更新後も、同じtokenで動作と制限を保てるか。

外部serviceは、自社siteを更新しなくても内容や必要な機能が変わります。埋め込みcodeと一緒に、service名、配信domain、許可したtoken、確認日、確認担当を残してください。制作会社へ実装を任せても、使い続けるserviceと許可範囲を決める責任はsite所有者に残ります。

最初の一手は、site内のiframeを一件選び、sandboxの有無とtokenを書き出すことです。tokenが複数あるなら、それぞれが必要な操作を一つずつ説明できるか確認してください。