postMessage를 활용한 iframe 통신하기

iframe과 부모 페이지 간 통신을 가능하게 해주는 postMessage에 대해 알아보겠습니다.

1. postMessage란 무엇일까요?

postMessage는 HTML5에서 도입된 메시징 API로, 서로 다른 도메인에 있는 페이지 간에도 안전하게 데이터를 주고받을 수 있도록 해줍니다. 이전에는 서로 다른 도메인 간 통신이 제한되어 iframe과 부모 페이지 간 데이터 교환이 어려웠지만, postMessage를 사용하면 이러한 문제를 해결할 수 있습니다.

2. postMessage 작동 방식

postMessage은 다음과 같은 방식으로 작동합니다.

1. 메시지 전송: 메시지를 전송하려는 페이지는 window.postMessage() 메서드를 사용합니다. 이 메서드는 메시지 자체와 함께 메시지를 받을 대상 도메인을 지정합니다.
2. 메시지 수신: 메시지를 받는 페이지는 message 이벤트를 처리하여 메시지를 받습니다. 이벤트 핸들러는 메시지 내용과 출처 도메인에 대한 정보를 제공합니다.

3. postMessage 활용 예시

1) iframe과 부모 페이지 간 데이터 주고받기

예를 들어, iframe에 표시된 댓글 목록을 부모 페이지에서 업데이트해야 하는 경우 postMessage를 사용하여 댓글 데이터를 부모 페이지로 전송할 수 있습니다.

- iframe.html

<script>
function updateCommentList(data) {
  // 댓글 목록 업데이트 코드
}

window.addEventListener('message', function(event) {
  if (event.origin === 'https://www.example.com') {
    updateCommentList(event.data);
  }
});
</script>

 

 

- parent.html

<script>
const iframe = document.getElementById('my-iframe');

function sendCommentData() {
  const data = {
    // 댓글 데이터
  };

  iframe.contentWindow.postMessage(data, 'https://www.example.com');
}
</script>

 

 

2) 서로 다른 도메인 간 데이터 공유

postMessage을 사용하면 서로 다른 도메인에 있는 페이지 간에도 데이터를 공유할 수 있습니다. 예를 들어, 로그인 정보를 여러 사이트 간 공유하거나, 쇼핑몰에서 제품 정보를 다른 사이트에 비교하기 위해 전송하는 데 활용할 수 있습니다.

 

3) 크로스 도메인 협업

postMessage을 사용하면 서로 다른 도메인에 있는 페이지들이 실시간으로 데이터를 주고받으며 협업할 수 있습니다. 예를 들어, 온라인 문서 편집 도구에서 여러 사용자가 동시에 문서를 편집하거나, 멀티플레이어 게임을 개발하는 데 활용할 수 있습니다.

4. postMessage 주의 사항

postMessage을 사용할 때 다음 사항에 유의해야 합니다.

• 보안: postMessage는 자체적으로 보안 기능을 제공하지 않습니다. 악의적인 페이지가 postMessage를 사용하여 사용자 정보를 탈취하거나 공격을 수행할 수 있으므로 주의해야 합니다.
• 메시지 크기: postMessage는 전송할 수 있는 메시지 크기에 제한이 있습니다. 큰 데이터를 전송해야 하는 경우 여러 번 나누어 전송해야 할 수 있습니다.
• 브라우저 호환성: postMessage는 대부분의 브라우저에서 지원하지만, 일부 구형 브라우저에서는 지원하지 않을 수 있습니다.

5. 더 알아보기

• postMessage 메서드: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage