Chrome cross origin iframe remove alert(), confirm(), and prompt issue

현재 최신 크롬 버전(92.0.4515.107 이상) 부터 크롬에서 cross origin iframe 의 경우에 alert, confirm, prompt 를 지원하지 않게 되었고, iframe 내에서 alert, confirm, prompt를 호출할 경우 아래와 같은 오류 내용을 확인 할 수 있습니다.

 

오류 내용 : 

A different origin subframe tried to create a JavaScript dialog. This is no longer allowed and was blocked. See https://www.chromestatus.com/feature/5148698084376576 for more details.A different origin subframe tried to create a JavaScript dialog. This is no longer allowed and was blocked. See https://www.chromestatus.com/feature/5148698084376576 for more details.

 

이유는 다른 도메인의 아이프레임에서 alert, confirm, prompt 를 사용해 실제 메인 페이지에서 노출 시키는 것처럼 속이는 등의 이슈가 지속되어 막은걸로 보입니다.

자세한 이유는 https://chromestatus.com/feature/5148698084376576 를 참고하기 바랍니다.

 

앞으로 크롬 버전을 신규로 업데이트 할 경우, iframe 내의 서의 alert()의 사용이 불가능하기에 이를 해결하기 위한 방법에 대하여 공유 드리겠습니다.

 

해결 방법

1. postMessage 를 통해 부모 window에서 alert 호출
2. 별도 Modal 작업을 통한 해결

2번 방법의 경우 각자의 개발 환경에 맞게 Modal을 생성해서 노출 시키면 되지만, 부모 페이지와의 상호 동작 확인이 필요합니다. (Eg, 부모 프레임 딤처리)

 

1번 항목의 경우에는 postMessage 를 통해 부모 페이지에 event를 전달하여 alert을 노출 시키게 되며, 기존의 alert 항목 노출과 동일하게 동작하게 되며, Modal 작업 없이 간단하게 처리가 가능합니다.

window.postMessage : 오리진이 다른 윈도우와 통신이 가능하게 event 를 발생시키는 메소드

 

예제 코드 - window.postMessage를 활용하여 이슈 해결

1) iframe 내에 customAlert 호출 시에 postMessage 를 통해 부모에게 'systemAlert' event에 message를 담아 전달 한다.

export const customAlert = (message) => {
  if (window.self !== window.top) {
    window.parent.postMessage({ action: 'systemAlert', message }, '*') // send event use postMessage
  } else {
    alert(message, 'customAlert')
  }
}

 

2) 부모 페이지에서 해당 event를 처리하기 위한 EventLinstener를 추가하고, alert 처리를 진행한다.

function systemAlert(message) {
      alert(message); // 부모 페이지에서 alert 처리
}

// event 처리
window.addEventListener("message", (event) => {

      var data = event.data;
      if (typeof (window[data.action]) == "function") {
            window[data.action].call(null, data.message); // 여기서는 systemAlert이 들어올 경우, function systemAlert에 메시지를 담아 전달
      }
}, false);

 

3) 그리고 iframe 내에서 alert()->customAlert()으로 전체 바꾸는 것은 비효율 적이고 유지보수가 힘들기에, 기존의 iframe alert 메소드를 그대로 쓰기 위하여, alert method를 override 처리합니다.

(function (proxied) {
    window.alert = function () {
      arguments[1] === 'customAlert'
        ? proxied.apply(this, arguments)
        : customAlert(arguments[0])
    }
})(window.alert)

 

4) 기존과 동일하게 iframe에서 alert() 호출 시에 정상 alert 메시지가 노출되는 것을 확인 할 수 있습니다.

 

위에서 살펴본 바와 같이 postMessage 또는 Modal 작업중에 각자의 환경에 맞게 진행하시면 좋을거 같습니다.

부족한 글이지만, 궁금증 있으시면 댓글 부탁드립니다:D

 

참고 : 

https://stackoverflow.com/questions/1729501/javascript-overriding-alert

JavaScript: Overriding alert()