교차 출처 격리를 사용하면 웹페이지에서 SharedArrayBuffer와 같은 강력한 기능을 사용할 수 있습니다. 이 도움말에서는 웹사이트에서 교차 출처 격리를 사용 설정하는 방법을 설명합니다.
이 가이드에서는 교차 출처 분리를 사용 설정하는 방법을 보여줍니다. SharedArrayBuffer
, performance.measureUserAgentSpecificMemory()
, 더 높은 정밀도의 고해상도 타이머를 사용하려면 교차 출처 격리가 필요합니다.
교차 출처 분리를 사용 설정하려면 웹사이트의 다른 교차 출처 리소스(예: 광고 게재위치)에 미칠 영향을 평가하세요.
SharedArrayBuffer
가 사용되는 위치 확인SharedArrayBuffer
를 사용하는 기능은 더 이상 교차 출처 격리 없이 작동하지 않습니다. SharedArrayBuffer
지원 중단 메시지로 인해 이 페이지를 방문했다면 웹사이트 또는 웹사이트에 삽입된 리소스 중 하나에서 SharedArrayBuffer
를 사용 중일 수 있습니다. 지원 중단으로 인해 웹사이트에 중단이 발생하지 않도록 하려면 먼저 사용 위치를 식별하세요.사이트에서 SharedArrayBuffer
가 사용되는 위치를 잘 모르는 경우 다음 두 가지 방법으로 확인할 수 있습니다.
- Chrome DevTools 사용
- (고급) 지원 중단 보고 사용
SharedArrayBuffer
를 사용 중인 위치를 이미 알고 있다면 교차 출처 격리의 영향 분석으로 건너뛰세요.
Chrome DevTools 사용
개발자는 Chrome DevTools를 사용하여 웹사이트를 검사할 수 있습니다.
SharedArrayBuffer
를 사용하는 것으로 의심되는 페이지에서 Chrome DevTools를 엽니다.- 콘솔 패널을 선택합니다.
- 페이지에서
SharedArrayBuffer
를 사용하는 경우 다음 메시지가 표시됩니다.[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
- 메시지 끝에 있는 파일 이름과 줄 번호 (예:
common-bundle.js:535
)는SharedArrayBuffer
의 출처를 나타냅니다. 서드 파티 라이브러리인 경우 개발자에게 문의하여 문제를 해결하세요. 웹사이트의 일부로 구현된 경우 아래 가이드에 따라 교차 출처 격리를 사용 설정하세요.
![SharedArrayBuffer가 교차 출처 분리 없이 사용될 때 DevToools 콘솔 경고](https://web.dev/static/articles/cross-origin-isolation-guide/image/devtoools-console-warning-a56031c56b918.png?authuser=4&hl=ko)
(고급) 지원 중단 보고 사용
일부 브라우저에는 지정된 엔드포인트에 대해 API를 지원 중단하는 보고 기능이 있습니다.
- 지원 중단 보고서 서버를 설정하고 보고 URL을 가져옵니다. 공익 서비스를 사용하거나 직접 구축하면 됩니다.
- URL을 사용하여
SharedArrayBuffer
을 제공할 가능성이 있는 페이지로 다음 HTTP 헤더를 설정합니다.Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
- 헤더가 전파되기 시작하면 등록한 엔드포인트에서 지원 중단 보고서를 수집하기 시작합니다.
구현 예는 https://cross-origin-isolation.glitch.me에서 확인하세요.
교차 출처 격리의 영향 분석
교차 출처 격리를 사용 설정할 경우 실제로 아무것도 손상되지 않고 사이트에 미칠 영향을 평가할 수 있다면 정말 멋지지 않을까요? Cross-Origin-Opener-Policy-Report-Only
및 Cross-Origin-Embedder-Policy-Report-Only
HTTP 헤더를 사용하면 이러한 작업을 수행할 수 있습니다.
- 최상위 문서에서
Cross-Origin-Opener-Policy-Report-Only: same-origin
를 설정합니다. 이름에서 알 수 있듯이 이 헤더는COOP: same-origin
가 사이트에 미치는 영향에 관한 보고서만 전송합니다. 실제로 팝업 창과의 통신을 사용 중지하지는 않습니다. - 보고서를 설정하고 보고서를 수신하고 저장할 웹 서버를 구성합니다.
- 최상위 문서에서
Cross-Origin-Embedder-Policy-Report-Only: require-corp
를 설정합니다. 다시 말하지만, 이 헤더를 사용하면 사이트의 기능에 실제로 영향을 미치지 않고COEP: require-corp
를 사용 설정했을 때의 영향을 확인할 수 있습니다. 이전 단계에서 설정한 것과 동일한 보고 서버로 보고서를 전송하도록 이 헤더를 구성할 수 있습니다.
교차 출처 격리의 영향 완화
교차 출처 격리의 영향을 받는 리소스를 확인한 후 이러한 교차 출처 리소스를 실제로 선택하는 방법에 관한 일반적인 가이드라인은 다음과 같습니다.
- 이미지, 스크립트, 스타일시트, iframe 등의 교차 출처 리소스에서
Cross-Origin-Resource-Policy: cross-origin
헤더를 설정합니다. 동일한 사이트 리소스에서Cross-Origin-Resource-Policy: same-site
헤더를 설정합니다. - CORS를 사용하여 로드할 수 있는 리소스의 경우 HTML 태그에
crossorigin
속성(예:<img src="example.jpg" crossorigin>
)을 설정하여 이 기능이 사용 설정되어 있는지 확인합니다. 자바스크립트 가져오기 요청의 경우request.mode
가cors
로 설정되어 있는지 확인합니다. - 로드된 iframe 내에서
SharedArrayBuffer
와 같은 강력한 기능을 사용하려면allow="cross-origin-isolated"
를<iframe>
에 추가하세요. - iframe 또는 작업자 스크립트에 로드된 교차 출처 리소스에 iframe 또는 작업자 스크립트의 다른 레이어가 포함된 경우 계속 진행하기 전에 이 섹션에 설명된 단계를 재귀적으로 적용하세요.
- 모든 교차 출처 리소스가 선택되었음을 확인한 후 iframe 및 작업자 스크립트에서
Cross-Origin-Embedder-Policy: require-corp
헤더를 설정합니다 (동일한 출처 또는 교차 출처에 관계없이 필요함). postMessage()
를 통한 통신이 필요한 교차 출처 팝업 창이 없는지 확인합니다. 교차 출처 격리가 사용 설정된 경우 계속 작동하도록 할 방법은 없습니다. 교차 출처 분리되지 않은 다른 문서로 통신을 이동하거나 다른 통신 방법 (예: HTTP 요청)을 사용할 수 있습니다.
교차 출처 격리 사용 설정
교차 출처 격리의 영향을 완화한 후 교차 출처 격리를 사용 설정하기 위한 일반적인 가이드라인은 다음과 같습니다.
- 최상위 문서에
Cross-Origin-Opener-Policy: same-origin
헤더를 설정합니다.Cross-Origin-Opener-Policy-Report-Only: same-origin
를 설정한 경우 바꿉니다. 이렇게 하면 최상위 문서와 팝업 창 간의 통신이 차단됩니다. - 최상위 문서에
Cross-Origin-Embedder-Policy: require-corp
헤더를 설정합니다.Cross-Origin-Embedder-Policy-Report-Only: require-corp
를 설정한 경우 바꿉니다. 이렇게 하면 선택되지 않은 교차 출처 리소스의 로드가 차단됩니다. - 콘솔에서
self.crossOriginIsolated
가true
를 반환하는지 확인하여 페이지가 교차 출처 분리되었는지 확인합니다.