parent가 http이고 child가 https일 때 발생하는 현상들

이 글에서: parent: 탑(혹은 메인) 프레임, body 내에 iframe을 갖는 페이지를 뜻한다. child: parent의 body 내에 있는 iframe을 뜻한다

child나 parent에서 서로의 자바스크립트 객체나 DOM 객체에 접근 불가

동일 출처 정책 위반으로 브라우저가 차단함. parent와 child간 상호작용은 거의 불가능하다고 봐야 한다.

// 교차 출처인 윈도우의 프로퍼티(변수, 함수, 브라우저 객체 등)에 접근 불가
window.frames[0].history; // SecurityError: Permission denied to access on cross-origin object
window.frames[0].foo; // SecurityError: Permission denied to access on cross-origin object
window.frames[0].myFn; // SecurityError: Permission denied to access on cross-origin object
window.frames[0].myFn(); // SecurityError: Permission denied to access on cross-origin object

location을 바꿀 수는 있지만 접근은 불가능

parent가 child의 주소를 바꾸는건 가능하지만 child의 현재 주소가 뭔지 얻는건 불가능하다. 이것은 반대의 경우(child에서 parent에 접근)도 마찬가지다.

// 교차출처인 윈도우의 주소를 바꿀 수는 있지만
window.frames[0].location.href = 'http://tistory.com';
// 현재 주소가 뭔지 알아내는건 불가능
var childUrl = window.frames[0].location.href; // SecurityError: Permission denied to access on cross-origin object

혼합된 컨텐츠

child 내에서 http 컨텐츠를 불러올 수 없거나 경고 메시지가 발생한다. 이미지는 경고로 끝나고 css나 js는 차단된다. child내의 또 다른 iframe이 있을 때도 https 컨텐츠가 아니면 차단된다.

 

CORS로는 위 제한들을 우회할 수 없다. 참고

Window.postMessage로 제한된 조건 하에서 통신이 가능하긴 하다.