Javascript&JQuery - Uncaught DOMException

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

오류 내용

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

원인

• 팝업창과 부모창간의 Origin 즉, Domain이 다른 상황에서 DOM 접근시 발생

• 팝업창이나, iframe을 사용할 때 서로 도메인이 다르거나 프로토콜이 다른 경우, 서로 다른 도메인에서 스크립트 처리시 보안 정책 위반으로 오류가 발생

해결 방안

• 팝업창과 부모창의 도메인을 일치시켜 해결

• window.postMessage 메소드를 이용하여 우회하여 해결

// 데이터 전송
// data: 전달할 메시지나 데이터
// ports: 메시지 포트(생략가능)
// targetOrigin: 타겟 도메인, 특정 도메인이 아니면 * 사용 가능
window.postMessage(data, [ports], targerOrigin)

// 데이터 수신
window.onmessage = function(e){
	if(e.origin === "https://보낸곳의도메인주소"){
		// 처리
		console.log(e.data);
	}
}
// 그외 데이터 수신
// window.addEventListener("message", 컨트롤함수, true);
// window.attachEvent("onmessage", 컨트롤함수);

참고 https://blog.naver.com/PostView.naver?blogId=hj_kim97&logNo=222433436259&redirect=Dlog&widgetTypeCall=true&directAccess=false