크로스 도메인 환경에서의 데이터 전송: 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>