window.open, window.opener, Cross-Origin-Opener-Policy

개요

window.open, window.opener관련한 에러를 수정하기 위해서,

브라우저에서 새 창을 열기 위해서 사용되는 window.opner, window.opner와 Cross-Origin-Opener-Policy 정책에 대해서 알아보았다.

 

window.open, window.opener

window.open과 window.opener는 JavaScript에서 웹 브라우저 창 또는 탭을 조작하는 데 사용하는 네이티브 객체이다.

 

window.open

window.open 메서드는 새로운 브라우저 창 또는 탭을 연다.

// 새로운 창 열기
let newWindow = window.open('<https://www.example.com>', 'exampleWindow', 'width=600,height=400');

// 빈 창 열기
let emptyWindow = window.open('', 'emptyWindow', 'width=800,height=600');

 

window.opener

window.opener는 window.open으로 열린 새 창에서 부모 창(즉, 새 창을 연 창)을 참조하는 객체이다.

이를 통해 새 창에서 부모 창의 JavaScript 객체나 함수를 호출할 수 있다.

 

예제

부모 창의 JavaScript 코드

// 새 창 열기
let newWindow = window.open('child.html', 'childWindow', 'width=600,height=400');

// 부모 창의 함수를 정의
function greet() {
    alert('Hello from parent window!');
}

 

새 창의 JavaScript 코드

// 부모 창의 함수를 호출
window.opener.alert();

 

window.open 테스트

새 창 열기 → 새탭에서 → 부모 window 객체 접근 → location 접근

//부모 페이지
window.open('<https://www.google.co.kr/imghp>')

//자식 페이지
window.opener

 

 

새 창 열기 → 새 탭에서 → 부모 window 객체 접근 → alert 띄우기

window.opener.alert("테스트")

 

 

주요 사용 사례 및 주의 사항

데이터 전달

• 새 창에서 부모 창으로 데이터를 전달하거나, 부모 창에서 새 창으로 데이터를 전달하는 데 유용하다.

 

보안 문제

• window.opener를 사용할 때는 보안에 주의해야 한다.
• 악성 웹 사이트가 window.opener를 사용하여 원하지 않는 동작을 수행이 가능하다.
• 이를 방지하기 위해 noopener 특성을 사용할 수 있다.
  • noopener를 사용하면 새 창에서 window.opener가 null로 설정되어 부모 창에 접근할 수 없다.

let newWindow = window.open('<https://www.example.com>', 'exampleWindow', 'width=600,height=400,noopener');

 

Cross-Origin-Opener-Policy

Cross-Origin-Opener-Policy (COOP)는 웹 페이지가 다른 출처의 리소스와 상호 작용하는 방식을 제어하는 HTTP 헤더이다.

window.open을 통해 열리는 창과 관련된 보안을 강화하는 데 사용된다.

 

COOP와 window.open

window.open으로 열린 새 창이 부모 창과 상호 작용할 수 있는 방법을 COOP로 제어 가능하다.

 

unsafe-none (기본 값)

기본 동작으로, 창을 열 때 별다른 제약이 없다.

부모 창과 자식 창이 서로 상호 작용할 수 있다.

A.com에서 B.com을 window.open으로 열고, B.com에서 A.com의 함수를 호출할 수 있다.

Cross-Origin-Opener-Policy: unsafe-no

let newWindow = window.open('<https://another-origin.com>');
newWindow.opener.someFunction();

 

same-origin

동일한 출처의 문서만 부모 창과 상호 작용 할 수 있다.

다른 출처의 문서는 새 창을 열 수 없으며, 부모 창과 상호작용 할 수 없다.

A.com에서 B.com을 window.open으로 열면, B.com은 A.com과 상호작용할 수 없다.

Cross-Origin-Opener-Policy: same-origin

let newWindow = window.open('<https://another-origin.com>');
// newWindow.opener는 null

 

same-origin-allow-popups

동일한 출처의 문서만 부모 창과 상호 작용 할 수 있지만,

새 창을 열 때 이 제한을 적용하지 않는다.

즉, 다른 출처의 문서가 새 창을 열 수 있지만, 부모 창과 상호 작용 할 수는 없다.

 

A.com에서 B.com을 window.open으로 열 수 있지만, B.com은 A.com과 상호작용할 수 없다. 그러나 A.com에서 열리는 다른 팝업 창은 허용된다.

Cross-Origin-Opener-Policy: same-origin-allow-popups

let newWindow = window.open('<https://another-origin.com>');
// newWindow.opener는 null이 됩니다.

 

문제 및 해결

다른 배경 지식

window.parent

window.parent는 자바스크립트에서 현재 윈도우(또는 프레임)가 다른 프레임이나 윈도우 내에 포함되어 있을 때 상위 프레임 또는 윈도우를 참조하는 속성이다.

 

예를 들어, 프레임셋이나 <iframe> 요소를 사용하여 현재 문서가 다른 문서 내에 포함되어 있을 때 사용된다.

window.parent는 현재 윈도우가 최상위 윈도우인 경우에도 항상 존재한다.

 

즉, window.parent는 언제나 존재하지만, 그것이 현재 윈도우 자신을 참조할 수도 있다.

• 최상위 윈도우: 최상위 윈도우는 window와 window.parent가 동일합니다.
• 프레임이나 iframe 내: window.parent는 상위 프레임 또는 상위 윈도우를 참조합니다.

 

window.opener와 window.parent의 차이점

window.opener는 현재 윈도우를 열었던 윈도우를 참조

• 예를 들어, window.open() 메서드를 통해 열린 새로운 윈도우가 window.opener를 통해 자신을 연 윈도우에 접근 가능

window.parent는 현재 프레임이나 윈도우가 포함되어 있는 상위 프레임이나 윈도우를 참조

• <iframe> 태그나 프레임 셋을 사용할 때 유용

 

코드 수정 방향

window.parent.song_framework로 접근 되었다.

window.opener.song_framework 접근하면 cors 정책 때문에 접근이 불가능함

→ 현재 코드에서는 window.opener.browser_framework 이렇게 접근하고 있다.

→ 부모를 잘 찾아서 .browser_framework 에 접근해야 하는데 부모가 없다…..

→ 왜? window.opener 이게 있다고 가정했고, 그런데 cors 때문에 부모가 없다…..

→ 그럼 어떻게 해?

→ window.parent.song_framework 이거라도 접근하게 해서 해결했다. (내 프로젝트 한정 해결 방법)