iframe と sandbox 属性と allow-storage-access-by-user-activation

このサイトは僕の日報なんだけど週一の振り返りしかしていないために週報サイトのようになってしまっている。
これは由々しき事態なのでちょいちょい日々の何かしらをアウトプットしていこうと思う。

というわけで、最近のお仕事では専ら iframe の調査をしている。
iframe は古の技術という印象だったが、昨今の 3rd party cookie の問題を受けて色々見直すべき点があって、僕の所属している会社でも今そのあたりが色々熱いので向き合っているという感じ。

iframe の sandbox 属性

iframe には sandbox 属性という属性がある。
この属性を指定することで iframe で埋め込まれたコンテンツをサンドボックス化できる。サンドボックス化できるって言われるとよくわからないと思うけど、簡単に言うと色々な制限をかけることができる。

例えば iframe コンテンツ内での form の送信を制限したりだとかファイルのダウンロードを制限したりだとか。

sandbox 属性のみ指定して値を書かなかった場合や、sandbox="" と指定した場合は、全ての制限を適用することになる。
sandbox 属性に空白区切りのトークンを指定することで、指定した制約を外すことができる。

基本はまず sandbox とだけ指定して、すべての制限を与えるのが良さそうに思う。
その後、iframe でやりたいことに応じて制約を外していくのが無難っぽい。

例えば、iframe 内で a タグによるファイルのダウンロードと form タグによるフォームの送信を行いたい場合は sandbox="allow-downloads allow-forms" と指定することになる。

ここまでが基本で、以下は特に今僕が調べているものについてまとめる。

このトークンが指定していない場合、リソースは同一オリジンポリシーに常に失敗する特別なオリジンからのものとして扱われる。
このトークンを指定している場合は、iframe 内のコンテンツのオリジン通りの挙動になる。

ページがスクリプトを実行することを許可する。
埋め込まれたコンテンツ内で JS を使用している場合は必要になるので、最近のウェブアプリケーションを埋め込む場合はほぼ必須と言える。

iframe で読み込んだ文書がストレージアクセス API を使用して、分離されていないクッキーへのアクセスをリクエストできるようにする。
このストレージアクセス API が昨今の 3rd party cookie の流れでとても大切で、今めっちゃ調査している対象になっている。

公式ドキュメントでは結構強めに以下の2つの注意点が書かれているので、sandbox 属性を使用する場合は注意が必要。

埋め込まれた文書のオリジンが埋め込み先のページと同じである場合、allow-scripts と allow-same-origin を同時に使用すると、埋め込まれた文書から sandbox 属性を削除することができるようになるため、絶対に避けるべきで、sandbox 属性をまったく使用しないよりも安全ではなくなると記述されている。
- iframe で別オリジンのサイトを埋め込んでクッキーを指定する場合は、allow-scripts と allow-same-origin と allow-storage-access-by-user-activation の3つの指定が必要なんだけど、この場合は別オリジンなので問題ないという認識で大丈夫だと思ってる
攻撃者がサンドボックス化した iframe の外側にコンテンツを表示することができる場合、サンドボックス化は無意味ということらしい。