iframe간 CORS무시? postMessage

다른 도메인이어서 CORS가 걸려있어도 로딩한 iframe과 통신할 수 있는 한가지 방법이 있다.

(window.open 팝업등도 가능하다.)

 

대신 두 통신할 도메인 여기에서는 aa.com과 bb.com으로 예를 들겠다.

 

aa.com <--- xhr ---> bb.com : CORS

aa.com <--- iframe ---> bb.com : X-frame-options "allow-from https://aa.com/"

 

iframe으로 통신시 서버상에서 iframe을 로드할수없게 만드는 기능이 꺼져있어야된다.

 

postMessage

targetWindow.postMessage(message, targetOrigin, [transfer]);

targetWindow

targetWindow의 예시로는 아래의 내용이 있다.

• Window.open (새 창을 만들고 새 창을 참조할 때),
• Window.opener (새 창을 만든 window를 참조할 때),
• HTMLIFrameElement.contentWindow (부모 window에서<iframe>을 참조할 때),
• Window.parent (<iframe>에서 부모 window를 참조할 때),
• Window.frames[i]

 

message

생각보다 형태가 자유롭다.

Array, Blob, ArrayBuffer, File 등 자바스크립트내 값을 다 보낼수 있다.

 

 

targetOrigin

목적지 도메인

aa.com에서 bb.com으로 메시지를 보낼때 아래와 같이 특정도메인을 작성하여 보안적 문제를 해결할 수 있다.

target.postMessage(message, "https://bb.com");

위와 같이 aa.com에서 message를 전달한다면 수신측인 bb.com에서는 받을 준비를 해줘야된다.

function receiveMessage(event)
{
  // 통신하려는 상대를 확인
  if (event.origin !== "https://aa.com")
    return;//aa.com이 아니라면 나간다.

  // event.source == window.opener
  // event.data == message
  console.log(event.data)//message값으로 받은값을 콘솔에 찍는다.
}

window.addEventListener("message", receiveMessage, false);

반대의 경우에도 받는곳에서 이벤트 처리를 해주면 송수신이 가능하다.

 

 

 

활용 예

• YouTube iframe player api https://developers.google.com/youtube/iframe_api_reference
• Twitch player api https://dev.twitch.tv/docs/embed/video-and-clips#interactive-frames-for-live-streams-and-vods

주로 embed하여 제공하는 제품에서 주로 쓰인다.

CORS는 보안상 무조건 비허용하고 제어가능한 postMessage를 활용하여 기능을 제공한다.

 

티스토리 2차 도메인에서 로그인해제가 되는데 이를 활용시 충분히 이용가능하다.

다만 주소가 블로그주소/글번호로 사용시 iframe에서 애드센스등을 로딩하기때문에 블로그주소/api/글번호 와 같이 특정 주소로 댓글 관련 데이터, 구독관련 데이터를 제공하면 좋을것 같다.

 

티스토리 2차 도메인	원본 주소 (*.tistory.com 로그인된 상태)
댓글 html 불러오기	html만 전송(외형)
구독 정보 불러오기	외형만 전송
댓글 작성하기시 원본주소로 댓글내용, 비밀글 여부 전달	받은값을 입력하여 처리

origin관련 보안사항만 지키면 충분히 적용가능한데 안지키면 XSS공격등이 가능하므로...

 

 

 

사용시 주의사항

메시지 전달을 통해 코드삽입이 가능하므로 Origin체크는 필수입니다.

 

지원 브라우저는 IE10+ 입니다.