popup창에서 window.opener로 값이 전송되지 않는 문제

발생상황

팝업형 본인인증 방식을 사용하는 페이지에서 발생한 문제.

부모창(opener)의 form을 찾아 form 안에 있는 name이 일치하는 곳에 value를 보내주고 팝업이 self.close() 해야하는데 창도 닫기지 않고 아무런 에러 콘솔도 남지 않았다.

문제해결

1. opener 에서 값을 전송해주려는 곳에 form과 하위 요소들이 잘 위치하고 있는지 확인한다.

 - 개발자모드(f12)로 확인하니 <form name="form"> </form> 안에 값들이 비어있었다. 코드상으론 문제가 없어보였지만, 여러 include 된 태그들을 확인하니 시작과 끝이 맞지 않아 form 내부가 비어있었다. 

2. cross domain 확인

 1의 문제를 해결하고 실행해보니 콘솔창에 에러 콘솔이 남았다. 에러가 난 위치는 opener에 value를 주기 시작하는 첫번째 문장이었고, 발생한 에러는 아래와 같다.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

chrome : Uncaught DOMException: Blocked a frame with origin "{도메인명}" from accessing a cross-origin frame.

IE : 사용권한이 없습니다.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 - 보안상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한한다. 

   따라서 통신을 위해 도메인명이 일치해야 한다. 또한 http -> https의 전송은 불가하다. 

참고사이트: 

http://noritersand.tistory.com/281

https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS