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