Chrome의 document.domain 방식의 Cross-Domain Deprecated에 대해

관련 공지 링크 : https://developer.chrome.com/blog/document-domain-setter-deprecation/

Chrome disables modifying `document.domain` - Chrome for Developers

 

Chrome 115버전부터 document.domain의 수정을 금지한다. 기존에 DOM 내부에서 CORS(Cross Origin Resource Sharing)를 지원하기 위해 사용하던 방법인데, 이제는 다른 방안을 찾아야 한다.

 

팝업이나 iframe에 document.domain을 사용했다면 이제 개선이 필요하다.

 

대용으로 공식 가이드에서 target.postMessage 와 target.addEventListener 를 사용하도록 권고 하고 있다.

 

부모창에서

// Send a message to https://video.example.com
iframe.postMessage(JSON.stringify(param), 'https://video.example.com');
// 또는 iframe.postMessage(JSON.stringify(param), '*') 처럼 아스타리크 사용가능

// iframe으로 메시지 전송이 정상적인지 추적하기 위한 Receive messages event
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
  }
});

 

이렇게 데이터를 Cross-Domain하게 주고 받을 수 있다.

 

자식창에서

// 부모창으로 부터 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.
  IFRAMEParamObj = JQuery.parseJSON(event.data).param;
  
  // Send a success message to https://parent.example.com
  event.source.postMessage('succeeded', event.origin);
});