cross origin iframe - alert(), confirm(), promt()함수 호출 불가 이슈

■ 크롬/엣지 이슈사항

 - iframe을 사용하는 경우 alert(), confirm(), promt()함수 호출 불가

Remove alert(), confirm(), and prompt for cross origin iframes - Chrome Platform Status

■ 영향범위
 - 크롬 릴리즈 92버전 이상인 경우 이슈 발생(7/20 업데이트) 

■ 개선방안

  1) 레이어 팝업으로 구현(시스템 알림 제거)
  2) 부모창을 통하여 알림기능 구현
    - window.postMessage() 기능을 통해 부모창에서 alert(), confirm() 구현되도록 수정
    ※ 부모창에 EventListener 및 관련 함수 추가 필요

//메세지 송신 
window.postMessage( data, [ports], targetOrigin );

//메세지 수신
window.addEventListener( 'message', function( e ) {
     // e.data가 전달받은 메시지
     console.log( e.data );
} );

 

부모 메세지 수신

// 메시지 수신 받는 eventListener 등록
window.addEventListener( 'message', receiveMsgFromChild );

// 자식으로부터 메시지 수신
function receiveMsgFromChild( e ) {
    console.log( 'Child 메세지 ', e.data );
}

 

자식이 부모에게 메세지 전달

var btn = document.getElementById( 'btn' );

btn.addEventListener( 'click', function( e ) {
    sendMsgToParent( '전송 전송!' );
});

// 부모에게 메시지 전달
function sendMsgToParent( msg ) {
    window.parent.postMessage( msg, '*' );
}