クロスドメイン環境におけるデータ転送：PostMessageを中心とした包括的分析

Access-Control-Allow-Origin: https://example.com Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: Content-Type

// メッセージ送信 targetWindow.postMessage("Hello from the other side!", "https://example.com"); // メッセージ受信 window.addEventListener("message", (event) => { if (event.origin !== "https://example.com") return; console.log("Received message:", event.data); });

// クライアントサイドコード fetch('/proxy?url=https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)); // サーバーサイドコード（Node.js例） app.get('/proxy', async (req, res) => { const { url } = req.query; const response = await fetch(url); const data = await response.json(); res.json(data); });

// メッセージ送信関数 function sendMessage(message, targetOrigin) { // 対象ウィンドウの決定（親ウィンドウまたはiframe） // const targetWindow = window.parent; // 親ウィンドウの場合 const targetWindow = document.getElementById('myIframe').contentWindow; // iframeの場合 // メッセージオブジェクトの作成 const messageObj = { type: 'greeting', content: message, timestamp: new Date().toISOString() }; // メッセージ送信 targetWindow.postMessage(JSON.stringify(messageObj), targetOrigin); console.log('メッセージ送信完了:', messageObj); } // 関数使用例 sendMessage('こんにちは！', 'https://target-domain.com');

// メッセージ受信イベントリスナー window.addEventListener('message', function(event) { // 送信元ドメインの検証 if (event.origin !== 'https://trusted-domain.com') { console.warn('信頼できない送信元からのメッセージ:', event.origin); return; } // メッセージのパースと処理 try { const messageObj = JSON.parse(event.data); // メッセージタイプに応じた処理 switch(messageObj.type) { case 'greeting': console.log('挨拶メッセージ受信:', messageObj.content); // ここに挨拶メッセージの処理ロジックを追加 break; case 'data': console.log('データメッセージ受信:', messageObj.content); // ここにデータ処理ロジックを追加 break; default: console.log('不明なメッセージタイプ:', messageObj.type); } console.log('メッセージタイムスタンプ:', messageObj.timestamp); } catch (error) { console.error('メッセージのパース中にエラーが発生:', error); } });

<!-- GTMでカスタムHTMLタグとして設定 --> <script> // PostMessage送信関数 function sendPostMessage(data) { const targetOrigin = 'https://ads.example.com'; // 広告システムドメイン window.parent.postMessage(JSON.stringify(data), targetOrigin); console.log('PostMessage送信完了:', data); } // カート追加イベントリスナー window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'gtm.js', 'gtm.start': new Date().getTime(), 'gtm.uniqueEventId': 'addToCart' }); // GTMイベントリスナー document.addEventListener('gtm.click', function(event) { if (event.detail['gtm.elementClasses'].includes('add-to-cart-button')) { const productData = { id: event.detail['gtm.elementId'], name: event.detail['gtm.elementText'], price: parseFloat(event.detail['gtm.elementAttributes']['data-price']) }; sendPostMessage({ type: 'addToCart', product: productData }); } }); </script>