はじめに
こんにちは。HRBrainでオウンドメディアやランディングページの開発を担当している渡邉です。
SalesforceなどのMAツール製のiframeフォームをウェブサイトに埋め込むことがあります。
この記事では、ウェブサイトとiframeが異なるドメインの場合に、iframeからウェブサイトにデータを受け渡す方法について解説しています。
▼ HRBrainサービスサイトにおけるiframeフォームの事例
クロスオリジンでのiframe操作の制限
iframeとウェブサイトが異なるドメインに存在している場合、ウェブサイトからiframe内の要素に直接アクセスすることができません。
- ウェブサイトのURL：
example.com - iframeのURL：
example.net
これは、「同一オリジンポリシー」により、セキュリティの観点から、オリジンが異なるページへのアクセスは制限を受けるためです。（クロスオリジン）
たとえば、iframe内のボタンをウェブサイトから操作しようとすると、以下のようなエラーが発生します。
const iframe = document.getElementById('myIframe');
// iframe内のbutton要素にはウェブサイトからアクセスが許可されない
iframe.contentWindow.document.getElementById('myButton'); // error
// Error:
// Failed to read a named property 'document' from 'Window':
// Blocked a frame with origin "http://example.com" from accessing a cross-origin frame.
このエラーは、iframeがクロスオリジンのため、ウェブサイトからiframe内のDOMにアクセスできないことを示しています。
postMessageメソッドについて
クロスオリジンでデータを送信するには、postMessageメソッドを使用します。
このメソッドは、異なるドメイン間で安全にデータをやり取りするための手段です。
postMessageメソッドの使い方
postMessageメソッドの第1引数にはウェブサイト側に渡すデータを、第2引数にはターゲットオリジン（メッセージを受け取るドメイン）を渡します。
window.parent.postMessage('Hello from iframe!', 'example.com');
window.addEventListener('message', (event) => {
console.log(event.data); // 'Hello from iframe!' が出力される
});
ターゲットオリジンの指定
postMessageメソッドでは、メッセージを送信するターゲットオリジンを第2引数に指定できます。
-
*：すべてのドメインを許可しますが、セキュリティリスクがあるため、特定のオリジンを指定することを推奨します。 -
https://example.com：特定のドメインを指定することで、信頼できるドメインだけがメッセージを受信できようになります。
iframeから受け取ったデータをGTMに渡す事例
ウェブサイトでは、message イベントリスナーを使用して、iframeから送信されたデータを受け取ります。
さらに、iframeから受け取ったデータをdataLayerを使ってGTMに渡すことで、マーケティング施策の幅が広がります。
const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
// フォームから入力された値を取得してオブジェクトにまとめる
const formData = {
name: document.getElementById('name').value, // ユーザー名
email: document.getElementById('email').value, // メールアドレス
};
// ウェブサイトにデータを送信
window.parent.postMessage({ formData }, 'https://example.com');
});
window.addEventListener('message', (event) => {
// 送信元のオリジンを確認
if (event.origin !== 'https://example.net') return; // 信頼できるオリジンのみ処理する
const formData = event.data.formData;
// 必要に応じて、GTMにデータを送信
dataLayer.push({
event: 'formSubmit',
formData: formData,
});
});
まとめ
この記事では、postMessageメソッドを使って、クロスオリジンのiframeからウェブサイトにデータを送信する方法を解説しました。
postMessageメソッドを活用すれば、異なるドメイン間でも安全にデータをやり取りすることが可能です。
PR
HRBrainではフロントエンドエンジニア（コミュニケーションデザイン）の採用も行なっているので、ぜひ！