[JS] 도메인이 다른 iframe 끼리의 통신 (iframe communication with other domains)

외주나, SI 업체에서 일을 할 때 간간히 Iframe 을 사용할 때 가 있다.

특히, Cafe24쪽 쇼핑몰 커스텀 작업을 할 때, Cafe24쪽에서는 처리하기 힘든 데이터들의 가공이나, 디자인 문제 들이 있을 때는, 따로 서버를 두고 Iframe을 이용하여 작업을 하는 쪽이 수월하다.

 

이럴 때, Iframe에서 데이터 간의 이동을 시켜줘야 하는 경우가 잦은데, 같은 도메인의 경우에는 접근이 가능하지만, 다른 도메인의 경우에는 보안 문제로 인해 보통 접근이 안되게 되어 있다.

 

그래도 해결할 구멍은 있으니, postMessage를 이용한 방법이다.

 

이러한 경우.. 통신을 해야한다면 어떻게 해야 할까.

<div class='contents'>
	<iframe src='http://qwer.co.kr' id='qwer-iframe'>
</div>

먼저, 부모창에서 위와 같이 자식 iframe을 호출하였다는 가정 하에, 스크립트를 알아보겠습니다.

 

데이터 송신

---

생각보다 통신 방법은 간단한데, 부모쪽도 고쳐야 하고, 자식쪽도 고쳐야 하고 결과를 확인해야하고...

번거로운 과정이다.

위에서 언급했듯, postMessage 를 이용한다.

 

부모창->자식창

let passData = {member_id:'jjong2028', member_name:'쫑'};
let iframe = document.getElementById('qwer-iframe').contentWindow;
iframe.postMessage(passData, 'http://qwer.co.kr')
/* 넘길프레임.postMessage(넘겨줄 데이터, 허용되는 도메인) */

 

자식창->부모창

window.onload = function() {
	let passData = { returnValue : 200 };
	window.parent.postMessage(passData, 'http://asdf.com');
}

필자는 자식창에서 부모창으로 보낼때는 주로 백엔드에서 돌아간 작업의 결과값을 부모에게 알려 줄 때 사용 하였다.

(자식창에서 부모에게 받은 데이터를 가공하여 ajax로 데이터 통신, 부모에게 알려 준 후, 후처리를 부모에서 하는 형태)

 

데이터 수신

---

데이터를 받을 때는, eventListener를 이용하여 데이터를 수신한다.

이는, 부모창과 자식창 둘 다 동일하다.

window.addEventListener('message', function(e) {
	//e.data ==> 수신 받은 데이터
    //e.origin ==> 허용된 도메인
    if(e.data.member_id == 'jjong2028') {
    	//받은 아이디값이 jjong2028 일때의 로직 처리
    }
});

 

 

도메인이 같을 경우에는 함수 자체로 부모, 자식간에 사용 할 수 있었는데, 도메인이 다를 경우에는 위와 같이 받은 데이터의 분기를 이용하여 처리한다.

다양한 함수를 사용해야 하는 경우에는 보내는 데이터 자체에, 함수명을 적어 switch-case등을 이용하여 작업하면 편하다.

 

 

물론 가장 좋은 방법은 위와 같은 상황이 나오지 않는 경우이다.

그런 의미로, 직접 유지보수를 해야 하는 경우라면 Cafe24 같은 것을 멀리하고, 설치형 쇼핑몰을 돈내고 하라는 쪽이...

Cafe24쪽에 페이스북 픽셀 때문에 메일도 1통 보내고 기다리고.. 다음주에 한통 또 보내고 기다리다가 전화도 하였는데 (심지어 메일을 읽었다고 표기되었다) 빨리 연락 줄 수 있도록 하겠다고 말한지 한달이 지났다. 당연히 여태껏 연락이 없다.

물론, 전화를 끊고 속으로 '아, 연락 없을 것 같다' 라고 생각하여서 그냥 끙끙대며 작업을 하였고, Cafe24에서 회신 자체를 주지 않아 필요한 데이터들도 정말 알아서 다 긁어다가 완료한 상태이긴 하다.

 

정말 개인적으로는 좋아할 래야 좋아할 수 가 없는회사..

 

 

개발하는데 도움을 준 포스팅

https://junspapa-itdev.tistory.com/55