COOP 및 COEP를 사용하여 교차 출처 분리 환경을 설정하고 SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), 고해상도 타이머와 같은 강력한 기능을 더 높은 정확도로 사용하세요.
업데이트
- 2022년 6월 21일: 교차 출처 분리 시 작업자 스크립트에도 주의 필요 사용 설정되어 있는지 확인합니다. 일부 설명을 추가했습니다.
- 2021년 8월 5일: JS Self-Profiling API가 교차 출처 분리가 필요하지만 최근의 AI 산업의 방향, 삭제됩니다
- 2021년 5월 6일: 신고된 의견 및 문제를 바탕으로 조정하기로 함
교차 출처 분리되지 않은 사이트에서
SharedArrayBuffer사용 타임라인 제한하도록 설정할 수 있습니다 - 2021년 4월 16일: 사용자 인증 정보가 없는 새로운 COEP에 관한 메모가 추가됨 모드 및 COOP same-origin-allow-popups를 교차 출처 조건 격리합니다
- 2021년 3월 5일:
SharedArrayBuffer제한사항이 삭제되었습니다.performance.measureUserAgentSpecificMemory()및 디버깅 기능이 포함되며 Chrome 89에서 완전히 사용할 수 있습니다. 출시 예정인 기능이 추가되었습니다.performance.now()및performance.timeOrigin을(를) 통해 더 높은 수익을 올릴 수 있습니다. 정확하기 때문입니다. - 2021년 2월 19일: 기능 정책에 관한 메모 추가됨
allow="cross-origin-isolated"및 DevTools의 디버깅 기능을 지원합니다. - 2020년 10월 15일: Chrome 87에서
self.crossOriginIsolated를 사용할 수 있습니다. 즉, 다음과 같은 경우document.domain는 변경할 수 없습니다.self.crossOriginIsolated는true을 반환합니다.performance.measureUserAgentSpecificMemory()의 오리진 트라이얼이 종료되며 Chrome 89에서 기본적으로 사용 설정되어 있습니다. Android Chrome의 공유 배열 버퍼는 Chrome 88부터 사용할 수 있습니다
일부 웹 API는 스펙터와 같은 부채널 공격의 위험을 높입니다. 받는사람 브라우저는 선택 기반의 격리 환경인 교차 출처 분리입니다. 교차 출처 분리 상태에서는 웹페이지가 다음과 같은 권한이 있는 기능을 사용할 수 있습니다.
| API | 설명 |
|---|---|
SharedArrayBuffer
|
WebAssembly 스레드에 필요합니다. 이 기능은 Android에서 사용할 수 있습니다. Chrome 88 데스크톱 버전은 현재 의 도움말 사이트 격리를 사용 설정하지만 교차 출처 분리 상태가 필요함 및 Chrome 92에서 기본적으로 사용 중지됩니다. |
performance.measureUserAgentSpecificMemory()
|
Chrome 89부터 사용할 수 있습니다. |
<ph type="x-smartling-placeholder"></ph>
performance.now()님, performance.timeOrigin님
|
현재 많은 브라우저에서 사용할 수 있으며 해상도는 100마이크로초 이상 교차 출처 분리를 사용하면 해상도는 5마이크로초 이상일 수 있습니다. |
또한 교차 출처 분리 상태는
document.domain document.domain를 변경할 수 있으면 커뮤니케이션이 허용됩니다.
허점이 발생한 것으로 간주되어
동일 출처 정책).
교차 출처 분리 상태를 선택하려면 다음을 전송해야 합니다. 기본 문서의 HTTP 헤더:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
이 헤더는 브라우저가 리소스 또는 iframe 로드를 차단하도록 지시합니다. 교차 출처 문서에 의해 로드되도록 선택하지 않은 경우, 교차 출처 창이 문서와 직접 상호작용하는 것을 막을 수 있습니다. 또한 크로스 출처에서 로드되는 리소스는 선택이 필요함을 의미합니다.
다음 방법으로 웹페이지가 교차 출처 분리 상태인지 여부를 확인할 수 있습니다.
검사 중
self.crossOriginIsolated
이 도움말에서는 이러한 새 헤더를 사용하는 방법을 설명합니다. 후속 조치 중 기사에서 자세한 배경과 컨텍스트를 드리겠습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.COOP 및 COEP를 배포하여 웹사이트를 교차 출처 분리하도록 만드세요.
COOP 및 COEP 통합
1. 최상위 문서에 Cross-Origin-Opener-Policy: same-origin 헤더 설정
최상위 문서에서 COOP: same-origin를 사용 설정하면 동일한
원본 및 문서에서 열린 창은 각각 별도의 탐색과
컨텍스트 그룹을 식별하는 데 사용됩니다.
따라서 열린 창과
두 창이 모두 비활성화되었습니다.
브라우징 컨텍스트 그룹은 서로를 참조할 수 있는 윈도우 집합입니다. 대상
최상위 문서와 <iframe>를 통해 삽입된 그 하위 문서를 예로 들 수 있습니다.
웹사이트 (https://a.example)에서 팝업 창 (https://b.example)을 여는 경우
오프너 창과 팝업 창은 동일한 탐색 컨텍스트를 공유합니다.
window.opener와 같은 DOM API를 통해 서로 액세스할 수 있습니다.
창 오프너와 오프너가 별도의 탐색에 있는지 확인할 수 있습니다. DevTools의 컨텍스트 그룹
2. 리소스에 CORP 또는 CORS가 사용 설정되어 있는지 확인
페이지의 모든 리소스가 CORP 또는 CORS HTTP로 로드되었는지 확인 있습니다. 이 단계는 4단계, COEP를 사용 설정하는 데 필요합니다.
리소스의 특성에 따라 수행해야 하는 작업은 다음과 같습니다.
- 리소스가 동일한 출처에서만 로드될 것으로 예상되는 경우 다음을 설정합니다.
Cross-Origin-Resource-Policy: same-origin헤더 - 리소스가 동일한 사이트에서만 로드되나
원본의 경우
Cross-Origin-Resource-Policy: same-site헤더를 설정합니다. - 리소스가 제어할 수 있는 교차 출처에서 로드되는 경우
가능하면
Cross-Origin-Resource-Policy: cross-origin헤더를 포함하는 것이 좋습니다. - 제어할 수 없는 교차 출처 리소스의 경우:
<ph type="x-smartling-placeholder">
- </ph>
- 리소스가
crossorigin제공됩니다 (예:<img src="***" crossorigin>) - 리소스 소유자에게 CORS 또는 CORP를 지원하도록 요청하세요.
- 리소스가
- iframe의 경우 위와 동일한 원칙을 따르고
Cross-Origin-Resource-Policy: cross-origin(또는same-site,same-origin) (상황에 따라 다름). WebWorker로 로드된 스크립트는 동일한 소스에서 제공되어야 합니다. 따라서 CORP 또는 CORS 헤더가 필요하지 않습니다.COEP: require-corp로 제공되는 문서 또는 작업자의 경우 교차 출처 CORS 없이 로드된 하위 리소스는 삽입되도록Cross-Origin-Resource-Policy: cross-origin헤더를 설정해야 합니다. 예를 들어<script>,importScripts,<link>,<video>,<iframe>등
3. COEP 보고서 전용 HTTP 헤더를 사용하여 삽입된 리소스 평가
COEP를 완전히 사용 설정하기 전에
정책이 적용되었는지 여부를 검사하는 Cross-Origin-Embedder-Policy-Report-Only 헤더
실제로 작동합니다. 삽입된 콘텐츠를 차단하지 않고 보고서를 받게 됩니다.
최상위 문서를 포함한 모든 문서에 이를 재귀적으로 적용합니다. iframe 및 작업자 스크립트를 지원합니다. 보고서 전용 HTTP 헤더에 대한 자세한 내용은 다음을 참조하시기 바랍니다. 보고서를 사용하여 문제 관찰 API를 참고하세요.
4. COEP 사용 설정
모든 것이 제대로 작동하고 모든 리소스가
로드되면 Cross-Origin-Embedder-Policy-Report-Only 전환
동일한 값을 사용하여 Cross-Origin-Embedder-Policy 헤더에 추가
iframe 및 작업자 스크립트를 통해 삽입된 문서를 비롯한 여러 문서가 포함되어 있습니다.
self.crossOriginIsolated로 격리 성공 여부 확인
웹페이지가 다음 형식일 때 self.crossOriginIsolated 속성은 true를 반환합니다.
모든 리소스와 기간은
동일한 브라우징 컨텍스트 그룹에
접근할 수 있습니다 이 API를 사용하여
탐색 컨텍스트 그룹을 성공적으로 격리하고
performance.measureUserAgentSpecificMemory() 같은 강력한 기능을 제공합니다.
Chrome DevTools를 사용하여 문제 디버그
이미지와 같이 화면에 렌더링되는 리소스의 경우
요청이 차단되고 페이지가
누락된 이미지를 나타냅니다. 하지만 요청되지 않은 리소스의 경우
반드시 스크립트나 스타일 같은 시각적인 영향을 주지만 COEP 문제는
발견하지 못하는 것입니다. 이 경우 DevTools Network 패널을 사용합니다. 만약
COEP에 문제가 있는 경우
Status의 (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)
를 클릭합니다.
그런 다음 항목을 클릭하여 자세한 내용을 확인할 수 있습니다.
또한 Application 패널. '프레임'으로 이동합니다. 섹션을 만들고 '상단' 펼치기 리소스 구조의 분석을 확인할 수 있습니다.
<ph type="x-smartling-placeholder"></ph>
SharedArrayBuffer의 사용 가능 여부 등 iframe의 상태를 확인할 수 있습니다.
기타
<ph type="x-smartling-placeholder"></ph> 교차 출처인지와 같은 팝업 창의 상태를 확인할 수도 있습니다. 있습니다. 를 통해 개인정보처리방침을 정의할 수 있습니다.
Reporting API를 사용하여 문제 관찰
Reporting API는 보고서에서 확인할 수 있는 또 다른 메커니즘입니다. 다양한 문제를 감지할 수 있습니다. 보고 API를 구성하여 사용자 COEP가 리소스 로드를 차단할 때마다 보고서를 전송하는 브라우저 또는 COOP는 팝업 창을 격리합니다. Chrome은 버전 69를 지원합니다.
Reporting API를 구성하고 보고서 사용하기 API를 참고하세요.
COEP 보고서 예시
COEP 예 보고서 교차 출처 리소스가 차단될 때의 페이로드는 다음과 같습니다.
[{
"age": 25101,
"body": {
"blocked-url": "https://third-party-test.glitch.me/check.svg?",
"blockedURL": "https://third-party-test.glitch.me/check.svg?",
"destination": "image",
"disposition": "enforce",
"type": "corp"
},
"type": "coep",
"url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
"user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]
COOP 보고서 예
예: COOP report 페이로드 팝업 창이 격리된 상태로 열린다면 다음과 같이 표시됩니다.
[{
"age": 7,
"body": {
"disposition": "enforce",
"effectivePolicy": "same-origin",
"nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
"type": "navigation-from-response"
},
"type": "coop",
"url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
"user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]
서로 다른 브라우징 컨텍스트 그룹이 서로 액세스를 시도할 때 (사용하는 경우에만)
'보고서 전용' COOP는 또한 보고서를 보냅니다. 예를 들어
postMessage() 시도는 다음과 같습니다.
[{
"age": 51785,
"body": {
"columnNumber": 18,
"disposition": "reporting",
"effectivePolicy": "same-origin",
"lineNumber": 83,
"property": "postMessage",
"sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
"type": "access-from-coop-page-to-openee"
},
"type": "coop",
"url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
"user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
"age": 51785,
"body": {
"disposition": "reporting",
"effectivePolicy": "same-origin",
"property": "postMessage",
"type": "access-to-coop-page-from-openee"
},
"type": "coop",
"url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
"user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]
결론
COOP 및 COEP HTTP 헤더를 조합하여 사용하면 웹페이지를 특수 HTTP 헤더로
교차 출처 분리 상태입니다. 다음을 검토할 수 있습니다.
self.crossOriginIsolated: 웹페이지가 교차 출처에 있는지 확인
분리합니다
새로운 기능이 출시되면 이 게시물을 계속 업데이트해 드리겠습니다. 교차 출처 분리 상태를 확인하고, DevTools의 기능 또한 관심이 뜨겁습니다.