[Web] Chrome Cross-Origin 정책 변경에 따른 iframe 활용 방안 (feat. PostMessage)

회사 서비스에서 기존에 iframe을 쓰던 부분의 오류가 발생했다.

찾아보니 Chrome 정책 변경에 의한 것이었는데, 그 해결 방안을 정리해보고자 한다.

 

 

📍 문제 상황

Uncaught DOMException : Blocked a frame with origin "도메인" from accessing a cross-origin

iframe을 로드하는데에는 문제가 없었지만

iframe과 부모창간의 통신이 있을 경우마다 계속 위와 같은 오류가 발생했다.

 

우리 서비스의 경우 document.domain 설정을 통해 부모창과 자식창(다른 도메인)간의 통신을 구현했는데,

이와 관련하여 Chrome 정책 변경이 있었기 때문에 문제가 발생한 것이었다.

 

2023년 8월 기준 테스트 결과, 같은 크롬 버전이더라도

각 사용자의 환경에 따라 로컬과 서버에서 둘 다 정상 작동하거나,

로컬에서만 정상 작동, 또는 로컬과 서버에서 모두 작동되지 않는 등

일부 환경에서만 document.domain이 정상적으로 동작했다.

 

 

📍 크롬 개발자 블로그

22년 11월, 23년 5월에 게시된 크롬 개발자 블로그를 참고했다.

 

▪️ 2022년 11월

https://developer.chrome.com/blog/immutable-document-domain/

Chrome will disable modifying `document.domain` to relax the same-origin policy - Chrome for Developers

 

▪️ 2023년 5월

https://developer.chrome.com/blog/document-domain-setter-deprecation/#origin-agent-cluster

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

 

위 블로그의 내용을 요약하면,

 

기존에는 부모창과 자식창(iframe)이 서로 다른 도메인을 가질 때

document.domain 설정을 이용하면 통신이 가능했다.

 

그러나 이전부터 제기된 document.domain의 보안 관련 우려를 반영하여

Chrome에서는 정책으로 금지하도록 한 것이다.

 

그리고 그에 대한 대안으로, PostMessage를 활용할 것을 권장하고 있다.

 

 

📍 PostMessage 활용 예시

우리 회사 서비스에서는 부모창에서 특정한 동작이 있을 때,

자식창에서 그에 대응하는 이벤트가 발생되도록 하는 기능이 있다.

 

예를 들어 부모창에서 A라는 동작이 발생하면 자식창에 A`라는 이벤트가 발생하고,

부모창에서 B라는 동작이 발생하면 자식창에 B`라는 이벤트가 발생하도록 하는 것이다.

 

기존에는 document.domain을 이용했기 때문에

자식창에서 발생되어야 하는 이벤트에 대한 로직까지도 모두 부모창에 해당하는 코드에 작성되어있었다.

 

이러한 로직을 PostMessage를 활용하는 로직으로 변경하기 위해

1️⃣ 부모창에서 특정 이벤트(A or B) 발생
2️⃣ 자식창으로 해당 이벤트가 A인지 B인지 구분할 수 있도록 그 표시와 함께, 필요한 데이터 전송
3️⃣ 자식창에서 PostMessage를 수신하면 A인지 B인지 이벤트를 확인
4️⃣ 확인된 이벤트에 해당하는 로직 수행

위와 같은 식으로 새롭게 코드를 구성했다.

(자식창 로직이 중요하고 전체 기능 동작에 꼭 필요한 부분일 경우, 마지막 5번을 추가하여

자식창 로직 수행 완료 시 성공적으로 완료되었다는 메시지를 부모창으로 보내고,

부모창에서 해당 메시지를 받았을 때 다음 로직이 수행될 수 있도록 하는 것도 좋을 것 같다.)

 

위 방안을 요약된 코드로 보겠다.

 

1️⃣, 2️⃣ 부모창에서 특정 이벤트 발생 시 자식 창으로 데이터 전송

var iframe = document.getElementById( 'iframe' ); // iframe

// A or B 동작 발생 시 호출
// eventType : A 동작 시 'A', B 동작 시 'B'
// sendData : 이 메시지를 받았을 때 자식창에서 수행해야 할 로직에서 필요한 데이터
function sendMsgToChild(eventType, sendData) {
    iframe.contentWindow.postMessage({'eventType':eventType, 'sendData':sendDate}, "도메인");
}

• PostMessage는 JSON이나 String 등 다양한 타입으로 데이터를 전송할 수 있다.
• 나는 다양한 이벤트를 발생시켜야 했으므로 JSON으로 구성한 뒤 eventType이라는 키 값으로 구분하는 식으로 작성했다.
• 그리고 sendData라는 파라미터로는 필요한 데이터들을 JSON 객체로 묶어서 한 번에 넣어주었다.
• 그리고 postMessage의 두 번째 인자로는 자식창의 도메인을 넣어주어야 하는데, 나는 https부터 전체를 넣었다.
  (로컬일 경우 포트번호까지 모두 작성했다.)

 

3️⃣, 4️⃣ 자식창에서 PostMessage 수신 시 그에 해당하는 로직 수행

window.addEventListener('message', function(e) {
	if(e.data.eventType === 'A') {
		// 이벤트 수행 로직
		console.log('e.data.eventType');
		console.log('e.data.sendData');
	} else if(e.data.eventType === 'B') {
		// 이벤트 수행 로직
		console.log('e.data.eventType');
		console.log('e.data.sendData');
	}
});

• 수신한 메시지의 eventType을 확인한 뒤 그에 맞는 로직을 수행할 수 있게 했다.
• console.log를 작성하면 그 로그는 부모창에서 확인할 수 있다.

 

나는 위와 같은 방식으로 코드를 구성했고,

외에도 자식에서 부모로 메시지 전송을 원할 때 또한 동일한 방식으로 작성하면 된다.

 

---

📍 결론

• Chrome 정책 변경으로 인해 서로 다른 도메인 간의 document.domain 설정을 통한 통신이 불가함
• 서로 다른 도메인의 통신 위해 PostMessage를 활용하여 문제를 해결함