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+ 입니다.
'티스토리 > JS' 카테고리의 다른 글
[2022년 11월] 티스토리 변경사항에 따른 유저 스크립트 소스 변경 필요사항 (1) | 2022.11.23 |
---|---|
티스토리 이미지를 Avast가 차단한다? (7) | 2020.11.23 |
티스토리 2차도메인 댓글 문제 임시 해결하기 (38) | 2020.08.03 |
티스토리 댓글에 링크달기 (3) | 2020.07.31 |
저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 한 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
링크 공유는 가능합니다. 만약, 본문 공유 시 링크 공유를 해주세요
댓글 0개