보안 이슈로
document.domain
에 값 설정하는 방식은 크롬브라우저에서 금지할 예정 (Chrome 109 ver)
원문 링크 : 크롬 개발자 블로그
하나의 페이지에 별도의 iframe으로 다른 페이지가 들어가 있는 경우 두 페이지간 통신을 가능하기 위해 사용함
메인 페이지 : main.naver.com
서브 페이지 : video.naver.com
원칙적으로 host
가 다르기 때문에 서로 정보 교환이 불가능
document.domain
을 사용하여 서로의 window, document 접근 가능
- parent, children의 도메인을 자신의 상위 도메인으로 변경
# 예시
// main.naver.com
document.domain = 'naver.com'
// video.naver.com
document.domain = 'naver.com'
// main, video 페이지 간의 SOP 통과하여 서로 정보를 주고 받을 수 있음
// **자신의 상위 도메인으로 변경만 가능
document.domain = 'kakao.com' // 불가능
# https://parent.example.com
// Send a message to https://video.example.com
iframe.postMessage('Request DOM manipulation', 'https://video.example.com');
// Receive messages
iframe.addEventListener('message', (event) => {
// Reject all messages except ones from https://video.example.com
if (event.origin !== 'https://video.example.com') return;
// Filter success messages
if (event.data === 'succeeded') {
// DOM manipulation is succeeded
}
});
# https://video.example.com
// Receive messages
window.addEventListener('message', (event) => {
// Reject all messages except ones from https://parent.example.com
if (event.origin !== 'https://parent.example.com') return;
// Do a DOM manipulation on https://video.example.com.
// Send a success message to https://parent.example.com
event.source.postMessage('succeeded', event.origin);
});