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