javascript에서 window.open 함수를 사용하면 새 창 또는 현재창으로 지정된 url을 띄울 수 있다.
이때 새로 띄워진 창에서 window.opener 객체를 사용하면 원래있던 창의 window 객체에 접근할 수 있다. 이를 이용하면 새로 띄워진 창과 원래있던 창 사이에 데이터를 보낼 수 있다.
문제점 및 원인
이번 프로젝트에서도 앞서 설명한 방식으로 외부 서비스를 이용하여 본인인증을 구현했는데, 인증 후 새 창의 window.opener가 null이라 원래있던 창에 인증 결과를 보낼 수 없다는 문제점이 발견되었다. 디버깅 해보니 새 창이 열린 후 본인인증을 위해 외부 도메인으로 redirect되고, 인증이 끝나고 다시 우리 도메인으로 돌아올때 window.opener의 값이 사라지는 것이 원인이었다.
해결 방법
MDN 문서에 따르면 window.open 함수는 두번째 인자로 name값을 받는데, 이 name이 현재 브라우저에서 이미 사용되고 있다면 해당 창에 대한 참조를 불러오고, 그렇지 않으면 해당 name을 지닌 새로운 창을 생성한다고 한다. 이를 이용하여 window.opener의 값을 체크해서 null이면 window.open 함수를 사용하여 원래 창의 window 객체를 찾아 다시 할당하면 된다.
// 원래 창
const url = 'www.test-url.com';
const options = 'width=400,height=600,scrollbar=yes';
// 부모 창의 name 지정
window.name = 'parent';
// 새 창에서 데이터를 받아오게 설정
window.addEventListener("message", receiveMessage, false);
window.open(url, '', options);
...
// 새 창
if(!window.opener){
window.opener = window.open('', 'parent'); // 부모 창의 name을 넣어 window.opener 재할당
}
window.opener.postMessage(...); // 원래 창에 데이터 전송주의할 점은 이 방법은 접근이 허용된 창 끼리만 사용이 가능하다는 점이다. 즉, 새 창과 원래 창이 같은 도메인 일때만 사용이 가능하다. 따라서 window.open 함수 호출 전에, 외부 서비스에서 본인 인증이 끝나면 새 창을 다시 우리 도메인으로 리다이렉트 시키는 과정이 별도로 필요하다.
참고자료
MDN Web Docs - Window.open
나는 웹개발자! (T-Story)
IE window.opener null or undefined 처리하기 (Velog)
