errors 기타 에러 (Etc Errors)

Uncaught DOMException: Blocked a frame with origin from accessing a cross-origin frame 에러

·

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

목차

자바스크립트를 이용하여 프론트엔드 개발을 할 때, iframe을 사용해야하는 경우가 종종 있는데요. 뭔가 외부 서비스, 예를 들어 광고나 플러그인을 내 페이지에 부분적으로 보여주고 싶을 때 사용하게 됩니다.

저 같은 경우, 블로그에 AMP-DISQUS를 설치하다가 이런 에러가 발생하였습니다.

Error

Blocked a frame with origin from accessing a cross-origin frame

Reason

해당 에러는 부모와 자식간의 Origin 즉, Domain이 다른 상황에서 자신이 아닌 상대방의 DOM에 접근 하려고 할 때, 발생합니다.

예를 들어 다음과 같은 상황에서 발생합니다.

<!-- this document's domain is example.com -->
<html>
  <head>...</head>
  <body>
    <iframe id="child" src="https://different-domain.com"><iframe>
  </body>
</html>
  • 부모 DOM에서 자식 DOM이 가지고 있는 함수 또는 프로퍼티를 참조하려고 하는 경우.
// this script is located in parent DOM

var child = document.getElementById('child').contentWindow;

// Blocked a frame with origin from accessing a cross-origin frame
child.functionOfChild();
  • 자식 DOM에서 부모 DOM이 가지고 있는 함수 또는 프로퍼티를 참조하려고 하는 경우.
// this script is located in child DOM

var parent = window.parent;

// Blocked a frame with origin from accessing a cross-origin
parent.finctionOfParent();

Solution

  • Domain 변경.

이 경우는 서브 도메인(Sub domain) 제거만 가능합니다.

// Parent's domain is [aaa.example.com]
// Child's domain is [bbb.example.com]

// In a Parent's DOM
document.domain = 'example.com'
// In a child's DOM
document.domain = 'example.com'
  • window.postMessage() 빌트인 함수를 이용하는 방법
targetWindow.postMessage(message, targetOrigin, [transfer]);
  • Send data Parent to Child.
// host: http://example.com:8080
// In a Parent DOM.

// Child로 팝업을 뛰웁니다.
var popup = window.open(...popup details...);

// This does nothing, assuming the window hasn't changed its location.
popup.postMessage(
  {
    "user": "bob",
    "password": "secret"
  },
  "http://example.com"
);

// window가 자신의 위치를 바꾸지 않았다면,
// 아래코드가 실행되면서 팝업에 보내질 데이터를 큐에 넣어줍니다.
popup.postMessage(
  {
    "message": "Hi, there"
  },
  "http://example.com"
);

function receiveMessage(event) {
  // 우리는 이 메시지에 대한 발신자를 신뢰 할 수 있을까요?
  // (이 메시지는 우리가 열었던 팝업창에서 온 것이 아닐 수 있습니다.)
  if (event.origin !== "http://example.com")
    return;

  // event.source is popup
  // event.data is {"message1": "Hi there!", "message2": "It's me!"}
}

window.addEventListener("message", receiveMessage, false);
  • Reply to Parent.
// host: http://example.com
// parent DOM의 postMessage가 호출 된 뒤, 호출 됩니다.
function receiveMessage(event) {
  // 우리는 이 메시지의 발신자를 신뢰할 수 있을 까요?
  if (event.origin !== "http://example.com:8080")
    return;

  // event.source is window.opener
  // event.data is {"message": "Hi, there"}


  // origin을 검증했다고 가정하면, 이 메시지에 대한 답장을 위한
  // 가장 편리한 도구는 event.source.postMessage()를 사용하는 것 입니다.
  event.source.postMessage(
    {
      "message1": "Hi there!",
      "message2": "It's me!"
    },
    event.origin
  );
}

window.addEventListener("message", receiveMessage, false);

Ref.

Window.postMessage() - Web API | MDN

The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

developer.mozilla.org

이렇게 간단하게 Blocked a frame with origin from accessing a cross-origin frame 에러에 대해서 알아보았고, 그에 대한 해결 방법까지 알아보았습니다.

감사합니다.

#js,#iframe,#postMessage