게시일: 2020년 5월 4일
COOP 및 COEP를 사용하여 웹사이트를 "교차 출처 분리" 상태로 만들기 에서는 COOP 및 COEP를 사용하여 "교차 출처 분리" 상태를 채택하는 방법을 설명했습니다. 이 도움말은 브라우저에서 강력한 기능을 사용 설정하는 데 교차 출처 격리가 필요한 이유를 설명하는 관련 도움말입니다.
용어집
이 문서에서는 이름과 약어가 비슷한 용어를 많이 사용합니다. 명확성을 위해 미니 용어집을 선별했습니다.
배경
웹은 문서와 스크립트가 다른 출처의 리소스와 상호작용하는 방식을 제한하는 보안 기능인 동일 출처 정책을 기반으로 빌드됩니다. 이 원칙은 웹사이트가 교차 출처 리소스에 액세스할 수 있는 방법을 제한합니다. 예를 들어 https://a.example의 문서는 https://b.example에 호스팅된 데이터에 액세스할 수 없습니다.
하지만 동일 출처 정책에는 몇 가지 역사적 예외가 있었습니다. 모든 웹사이트는 다음을 할 수 있습니다.
- 교차 출처 iframe 삽입
- 이미지 또는 스크립트와 같은 교차 출처 리소스 포함
- DOM 참조로 교차 출처 대화상자 창 열기
웹 커뮤니티가 엄격한 동일 출처 정책의 이점을 인식할 때쯤에는 웹이 이미 이러한 예외에 의존하고 있었습니다.
이러한 느슨한 동일 출처 정책의 보안 부작용은 두 가지 방법으로 패치되었습니다.
- 교차 출처 리소스 공유 (CORS) 프로토콜은 서버가 특정 출처와 리소스를 공유하도록 허용하는지 확인합니다.
- 개발자는 이전 버전과의 호환성을 유지하면서 교차 출처 리소스에 대한 직접 스크립트 액세스를 암시적으로 삭제합니다. 이러한 교차 출처 리소스를 '불투명' 리소스라고 합니다. 이러한 이유로 CORS가 이미지에 적용되지 않으면
CanvasRenderingContext2D를 사용한 교차 출처 픽셀 조작이 실패합니다.
이러한 모든 정책 결정은 탐색 컨텍스트 그룹 내에서 이루어집니다.
오랫동안 이 조합은 브라우저를 안전하게 유지하는 데 충분했으며 직접 패치가 필요한 제한된 에지 케이스 (예: JSON 취약점)가 있었습니다.
이는 코드가 로드되는 동일한 탐색 컨텍스트 그룹에 로드되는 모든 데이터를 잠재적으로 읽을 수 있게 하는
Spectre로 인해 변경되었습니다. 공격자는 특정 작업에 걸리는 시간을 측정하여 CPU 캐시의 콘텐츠, 즉 프로세스 메모리의 콘텐츠를 추측할 수 있습니다. 이러한 공격은 플랫폼에 있는 낮은 세분성 타이머로 가능하며 명시적 타이머 (performance.now()와 같은)와 암시적 타이머 (SharedArrayBuffer와 같은)를 모두 사용하여 높은 세분성 타이머로 속도를 높일 수 있습니다.
evil.com이 교차 출처 이미지를 삽입하면 Spectre 공격을 사용하여 삽입된 이미지의 픽셀 데이터를 읽을 수 있습니다. 이렇게 하면 '불투명도'에 의존하는 보호가 비효율적으로 렌더링됩니다.
이상적으로는 모든 교차 출처 요청이 리소스를 소유한 서버에서 검증됩니다. 검증이 실행되지 않으면 데이터가 악의적인 행위자의 탐색 컨텍스트 그룹에 도달해서는 안 됩니다. 따라서 데이터는 가능한 Spectre 공격의 범위에서 벗어납니다. 이를 교차 출처 분리 상태 라고 합니다.
삽입된 코드가 교차 출처 격리 상태에 있으면 요청 사이트가 덜 위험한 것으로 간주됩니다. 이렇게 하면 요청 사이트에서
SharedArrayBuffer, performance.measureUserAgentSpecificMemory() 및
더 나은 정밀도의 고해상도 타이머를 사용할 수 있으며
가능한 Spectre 공격을 방지할 수 있습니다. 이 상태에서는 document.domain을 수정할 수도 없습니다.
교차 출처 삽입자 정책
교차 출처 삽입자 정책 (COEP) 은 문서에 CORP 또는 CORS로 문서 권한을 명시적으로 부여하지 않는 교차 출처 리소스가 로드되지 않도록 합니다. 이 기능을 사용하면 문서가 이러한 리소스를 로드할 수 없다고 선언할 수 있습니다.
a.example,
이 COEP 정책을 require-corp로 설정했습니다. a.example 은 b.example에서 3개의 애셋을 삽입하려고 하지만 2개만 성공합니다.
성공적으로 삽입된 두 개에는 교차 출처 CORP 정책이 있는 JavaScript 파일과 CORS가 허용된 이미지가 포함됩니다. 세 번째 애셋은 애셋이 동일 출처에만 삽입되도록 요구하는 CORP 정책이 있는 동영상입니다. 따라서 동영상은 a.example에 로드되지 않습니다.
이 정책을 활성화하려면 다음 HTTP 헤더를 문서에 추가하세요.
Cross-Origin-Embedder-Policy: require-corp
COEP는 단일 값 require-corp를 사용합니다. 이렇게 하면 문서가 동일 출처의 리소스 또는 다른 출처에서 로드할 수 있는 것으로 명시적으로 표시된 리소스만 로드할 수 있다는 정책이 적용됩니다.
다른 출처에서 리소스를 로드할 수 있으려면 교차 출처 리소스 공유 (CORS) 또는 교차 출처 리소스 정책 (CORP)을 지원해야 합니다.
교차 출처 리소스 공유
교차 출처 리소스가 교차 출처 리소스 공유
(CORS)를 지원하는 경우
crossorigin
속성
을 사용하여 COEP에 의해 차단되지 않고 웹페이지에 로드할 수 있습니다.
<img src="https://third-party.example.com/image.jpg" crossorigin>
예를 들어 이 이미지 리소스가 CORS 헤더와 함께 제공되는 경우 리소스를 가져오는 요청이 CORS
모드를 사용하도록
crossorigin 속성을 사용합니다. 이렇게 하면 CORS 헤더를 설정하지 않는 한 이미지가 로드되지 않습니다.
마찬가지로 서버가 올바른 HTTP
헤더로 응답하는 한 특별한 처리가 필요하지 않은 fetch() 메서드를 통해 교차 출처 데이터를 가져올 수 있습니다.
교차 출처 리소스 정책
교차 출처 리소스 정책 (CORP) 은 원래 다른 출처에서 리소스가 로드되지 않도록 보호하기 위한 선택사항으로 도입되었습니다. COEP의 컨텍스트에서 CORP는 리소스를 로드할 수 있는 사용자에 대한 리소스 소유자의 정책을 지정할 수 있습니다.
Cross-Origin-Resource-Policy 헤더는 세 가지 가능한 값을 사용합니다.
Cross-Origin-Resource-Policy: same-site
same-site로 표시된 리소스는 동일한 사이트에서만 로드할 수 있습니다.
Cross-Origin-Resource-Policy: same-origin
same-origin으로 표시된 리소스는 동일한 출처에서만 로드할 수 있습니다.
Cross-Origin-Resource-Policy: cross-origin
cross-origin으로 표시된 리소스는 모든 웹사이트에서 로드할 수 있습니다. (이
값은 COEP와 함께
CORP 사양에 추가되었습니다.)
교차 출처 오프너 정책
교차 출처 오프너 정책
(COOP)을 사용하면 문서를 별도의
탐색 컨텍스트 그룹에 배치하여
최상위 창을 다른 문서에서 격리할 수 있습니다. 이렇게 하면 문서가 최상위 창과 직접 상호작용할 수 없습니다. 예를 들어 COOP가 있는 문서가 대화상자를 열면 window.opener 속성은 null입니다. 오프너 참조의 .closed 속성은 true입니다.
Cross-Origin-Opener-Policy 헤더는 세 가지 가능한 값을 사용합니다.
Cross-Origin-Opener-Policy: same-origin
same-origin으로 표시된 문서는 same-origin으로 명시적으로 표시된 동일 출처 문서와 동일한 탐색 컨텍스트 그룹을 공유할 수 있습니다.
Cross-Origin-Opener-Policy: same-origin-allow-popups
same-origin-allow-popups가 있는 최상위 문서는 COOP를 설정하지 않거나 COOP를 unsafe-none으로 설정하여 격리를 선택 해제하는 팝업에 대한 참조를 유지합니다.
Cross-Origin-Opener-Policy: unsafe-none
unsafe-none 은 기본값이며 오프너 자체에 same-origin의 COOP가 없는 한 문서가 오프너의 탐색 컨텍스트 그룹에 추가되도록 허용합니다.
요약
SharedArrayBufferperformance.measureUserAgentSpecificMemory(), 또는 더 나은 정밀도의 고해상도
타이머와 같은 기능에 액세스하려면
문서에서 require-corp 값이 있는 COEP와
same-origin 값이 있는 COOP를 모두 사용해야 합니다. 둘 중 하나가 없으면 브라우저에서 이러한 강력한 기능을 안전하게 사용 설정할 수 있을 만큼 충분한 격리를 보장하지 않습니다.
self.crossOriginIsolated
가 true를 반환하는지 확인하여 페이지의 상황을 확인할 수 있습니다.
COOP 및 COEP를 사용하여 웹사이트를 "교차 출처 격리" 상태로 만들기에서 이를 구현하는 방법을 알아보세요.