🍪

iFrame内のサイトでCookieを使えるのか確かめたお話

2024/03/15に公開

JavaScript

ひょんなことから、iFrame内でユーザーのアクセスデータを、ユーザーのブラウザに保持しておきたいことが起きました。

ユーザー側のブラウザに保存してもらう方法として、Cookie、LocalStorage、SessionStorageと3種類ありますが、これらの機能はiFrame内で使えるのか？を実際のページで確かめてみた。そんな記事

1. iFrameとそれによる問題

iFrameはサイトの中に別のサイトを表示することができる機能です。
Mozillaによると、

<iframe> は HTML の要素で、入れ子になった閲覧コンテキストを表現し、現在の HTML ページに他のページを埋め込むことができます。

この際に、埋め込む側と埋め込まれる側でドメインが異なった場合は同一オリジンポリシーによって動作が制限されます。
Mozillaの異なるオリジンへのネットワークアクセスによると、<iframe>に関連するあらゆる通信は異なるオリジン間では制限されます。

また、オリジンをまたいだデータストレージアクセスには、Cookieに関する記述があります。

Cookie におけるオリジンの定義は異なります。ページは自身のドメインまたは任意の親ドメイン (親ドメインが public suffix ではない場合に限る) 用の Cookie を設定できます。

埋め込む側と埋め込まれる側のドメインが親子関係である場合にはクッキーは使用できるらしい。

つまり、表にするとこんな感じと書いてあるわけですね。

埋め込むサイト	埋め込まれるサイト	Cookie設定可否
page.com	child.page.com	⚪︎
dasoku.page.com	child.page.com	×
other.com	child.page.com	×

一番上の場合は、埋め込む側のサブドメインとして埋め込まれる側を持っている形になっているので問題なく使用できると。なるほど

~~検証のためだけにドメイン取りたくないし~~この記事では3番目のとき、どのような挙動をするのかを検証していきます。

同じ条件で、LocalStorageとかSessionStorageとかがどんな動きをするのかも気になったので、実験していきます。

2. 実験用のサイトを作ってみる

適当に画面作って、適当にアップロードしたのが、コレ

アクセスした回数を数えていくだけの簡単なページです。

SessionStorageはタブを切り替えるとリセットされる挙動をしているのも正常。
ここまでではCookieとLocalStorageの（見かけ上の）動きとしての挙動は同じみたいですね。

3. iFrame内での挙動を確かめる

そして、そんな画面を別ドメインで埋め込んだページがコレ。

Cookieが取れずに、（アクセスしたら+1する計算したがために）NaNになってしまっています。

一方、LocalSorageやSessionStorageの方は問題なく動いています。
つまり、セキュリティ関連の設定を特にいじらない場合、iframe内ではCookieを使うことはできないという結論になります。

サードパーティCookieは完全廃止の動きもあるので、（Safariではすでにデフォルトでは完全ブロックしているし、広告関連が母体のChromeでさえ順次廃止にしていくとかなんとか）iFrameでブラウザになにか保存しておきたかったら使うのはLocalStorageまわりを使う必要がありそうだ。ということで、この記事はここでおしまい