iframeの反乱

はじめに

私の参画している現場の使用でiframeを通して、別ドメインのwebアプリを開きlocalstrageからとあるデータを取得する必要があり、実装を黙々と進めていました。
その時に私がiframeからお叱りを受けたので、そちらを備忘用として記しておきます。

TL;DR

iframeから別ドメインのlocalstorageにはアクセスできない

概要

Aシステム、Bシステムという2つのシステムがあり、とある機能を実装するためAからBの画面をiframeで呼び出す必要がありました。iframeからBのlocalstorageにアクセスし、必要な情報を取得してAに渡すという魂胆です。

function sendDataToParent() {
  // Bシステムから取得
  const data = localStorage.getItem('info');
  if (data) {
    // 親コンポーネントにlocalstorageから取得したデータを送信
    window.parent.postMessage(data, '*');
  } else {
    console.error('No data found in localStorage');
  }
}

仕様作成者と私は、iframeからBのlocalstorageにアクセスして情報を取得できることに何の疑いはありませんでした。実装は着々と進み、ローカル環境でのテストは無事終了。

開発環境で結合テストを行おうとした時、反乱は起きました。

"iframeから指定した情報が取得できていない"

私は iframeで開くURLを間違っていないか、B側で必要な情報をlocalstorageに保存できていなかなど様々な検証を行いましたが、何をやってもダメでした。

泣く泣くググったころ、2023年7月ごろにリリースされたChromeの仕様により、iframeから別ドメインのlocalstorageにアクセスすることはできないということが分かりました。

Storage Access APIなどパーティショニングされていない状態で別ドメインのlocalstorageを扱える代替策もありましたが、トライアル期間ということで取り入れることはやめました。

代替策

結局はiframeからは呼び出せないため、ページ遷移をして取得することにしました。
Chromeのみなら別の方法もありましたが、SafariやFirefoxなどの対応も必要と考えたところ、遷移させるのがベストではないかという結論に至りました。

更に方法がないかを模索していきます。

参考

https://developers.google.com/privacy-sandbox/3pcd/storage-partitioning
https://developers.google.com/privacy-sandbox/blog/saa-non-cookie-storage?hl=ja