Webサービスのドメインを変更したい機会があり、Local Storage や IndexedDB に保存した情報(認証情報等を含む)をクロスオリジンでセキュアに移行する必要がありました。
小さな実装ですが気をつけることがちらほらあるので、具体的なシナリオを元に実装を紹介します。
<h2 id="%E3%82%B7%E3%83%8A%E3%83%AA%E3%82%AA">
<a class="header-anchor-link" href="#%E3%82%B7%E3%83%8A%E3%83%AA%E3%82%AA" aria-hidden="true"></a> シナリオ</h2>
LocalStorage の <code>some-data</code> というキーに格納されたデータを <code>https://src.example.com</code> から <code>https://dest.example.com</code> に移行するシナリオを考えます。
以下の図のような処理を実装します。
<img src="https://storage.googleapis.com/zenn-user-upload/b6883e5bbccf29ef778d54b1.png" alt loading="lazy" class="md-img">
<h2 id="%E7%A7%BB%E8%A1%8C%E5%85%83%E3%81%AE%E5%AE%9F%E8%A3%85-(src)">
<a class="header-anchor-link" href="#%E7%A7%BB%E8%A1%8C%E5%85%83%E3%81%AE%E5%AE%9F%E8%A3%85-(src)" aria-hidden="true"></a> 移行元の実装 (src)</h2>
まず、移行元では <code>window.parent</code> (=iframeの親)にデータを送ります。移行データだとわかるよう、<code>data-transfer:</code> prefix をつけて送信しています。 
この時、<code>Window#postMessage</code> の第2引数で移行先のオリジンを指定してください。これを省くと第三者のWebサイトに iframe を埋め込まれ、Local Storage の情報が盗まれてしまいます。
<div class="code-block-container"><pre class="language-js"><code class="language-js">if (window.parent == null || window.parent === window) {
 return;
}

const data = localStorage.getItem("some-data");
window.parent.postMessage(`data-transfer:${data}`, "https://dest.example.com");
</code></pre></div><h2 id="%E7%A7%BB%E8%A1%8C%E5%85%88%E3%81%AE%E5%AE%9F%E8%A3%85-(dest)">
<a class="header-anchor-link" href="#%E7%A7%BB%E8%A1%8C%E5%85%88%E3%81%AE%E5%AE%9F%E8%A3%85-(dest)" aria-hidden="true"></a> 移行先の実装 (dest)</h2>
移行先では、移行元ページを iframe で開きます。
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;html lang="ja"&gt;
 &lt;head&gt;
 &lt;script src="script.js" /&gt;
 &lt;!-- 省略 --&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;iframe src="https://src.example.com" style="display: none;" /&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre></div>そして、<code>message</code> イベントで iframe からのメッセージを拾います。そして <code>data-transfer:</code> prefix を抜いて LocalStorage に保存することで移行が完了します。 
このとき、<code>event.origin</code> が移行元のオリジンであることを確認してください。これを省くと第三者のWebサイトから不正なデータを注入される恐れがあります。
<div class="code-block-container">
<div class="code-block-filename-container">script.js</div>
<pre class="language-js"><code class="language-js">const listener = (event) {
 if (event.origin !== "https://src.example.com" || !event.data.startsWith("data-transfer:")) {
 return;
 }
 // すでに移行済みの場合
 if (localStorage.getItem("some-data") != null) {
 return;
 }
 
 const data = event.data.slice("data-transfer:".length, event.data.length);
 
 localStorage.setItem("some-data", data);
}

window.addEventListener("message", listener);
</code></pre>
</div><h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
本当にセキュアなのか震えているのでマサカリがあればぜひお願いします。

クロスオリジンでLocalStorage等のデータをセキュアにやりとりする

javascript

security

Discussion