iframeのクロスドメインパススルーを解決する（オリジン付きフレームをブロックする）

I. 問題の説明

iframeを使用してiframeの子ページを経由して親ページを呼び出したり、親ページからiframeの子ページを呼び出す場合、ブラウザのセキュリティポリシー違反によりiframeを越えて相手ページのデータを取得できず、コンソールで以下のエラーが表示されることがあります。

オリジン "http://localhost:****" を持つフレームが、クロスオリジンフレームにアクセスするのをブロックしました。

II. ソリューション

上記の問題を解決するには postMessage メソッドを使用することで、iframe をまたいだ安全な通信を行うことができます。

1. iframeの子ページが親ページを呼び出す

• 子ページデータ送信

// data is the data sent by the subpage (it can be a js object, which will be automatically serialized and processed)
window.parent.postMessage(data, '*')

• 親ページデータリスナー

addEventListener('message', e => {
    // e.data is the data sent by the child page
    console.log(e.data)
})

2. 親ページがiframeの子ページを呼び出す

• 親ページのデータ送信

document.getElementById('iframe').contentWindow.postMessage(data,'*')

• サブページがデータを受け取る

addEventListener('message', e => {
    // e.data is the data sent by the parent page
    console.log(e.data)
})

3. セキュリティの最適化 - 受信元を制限するデータの送信

上記のコードにおいて postMessage には、以下のコード例のように、受信ソースを指定できる任意のソースを意味する「*」が設定されています。

 window.parent.postMessage('exit','http://example.org');

• 送信元を検出するためのデータのリスニング

addEventListener('message', e => {
    if(e.origin === 'http://example.org') {
        // Only perform the corresponding action if the data is sent from a trusted address
    }
})

終了