교차 출처 격리를 사용하면 웹페이지에서 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의 출처를 나타냅니다. 서드 파티 라이브러리인 경우 개발자에게 문의하여 문제를 해결하세요. 웹사이트의 일부로 구현된 경우 아래 가이드에 따라 교차 출처 격리를 사용 설정하세요.
(고급) 지원 중단 보고 사용
일부 브라우저에는 지정된 엔드포인트에 대해 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를 반환하는지 확인하여 페이지가 교차 출처 분리되었는지 확인합니다.