교차 출처 분리 사용 설정 가이드

교차 출처 분리를 사용하면 웹페이지에서 SharedArrayBuffer와 같은 강력한 기능을 사용할 수 있습니다. 이 도움말에서는 웹사이트에서 교차 출처 분리를 사용 설정하는 방법을 설명합니다.

Eiji Kitamura

이 가이드에서는 교차 출처 분리를 사용 설정하는 방법을 설명합니다. 더 나은 정밀도로 SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), 또는 고해상도 타이머를 사용하려면 교차 출처 분리가 필요합니다.

교차 출처 분리를 사용 설정하려는 경우 광고 게재위치와 같이 웹사이트의 다른 교차 출처 리소스에 미치는 영향을 평가하세요.

웹사이트에서 SharedArrayBuffer가 사용되는 위치 확인

Chrome 92부터 SharedArrayBuffer 를 사용하는 기능은 교차 출처 분리 없이 더 이상 작동하지 않습니다. 지원 중단 메시지로 인해 이 페이지에 도착한 경우 웹사이트 또는 웹사이트에 삽입된 리소스 중 하나가 SharedArrayBuffer를 사용하고 있을 가능성이 높습니다.SharedArrayBuffer 지원 중단으로 인해 웹사이트에서 문제가 발생하지 않도록 하려면 먼저 사용되는 위치를 파악하세요.

사이트에서 SharedArrayBuffer가 사용되는 위치를 잘 모르는 경우 다음 두 가지 방법으로 확인할 수 있습니다.

  • Chrome DevTools 사용
  • (고급) 지원 중단 보고 사용

SharedArrayBuffer를 사용하는 위치를 이미 알고 있는 경우 교차 출처 분리의 영향 분석으로 건너뛰세요.

Chrome DevTools 사용

Chrome DevTools 를 사용하여 개발자는 웹사이트를 검사할 수 있습니다.

  1. Chrome DevTools를 사용할 수 있다고 의심되는 페이지에서 엽니다SharedArrayBuffer.
  2. 콘솔 패널을 선택합니다.
  3. 페이지에서 SharedArrayBuffer를 사용하는 경우 다음 메시지가 표시됩니다.
    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See  for more details. common-bundle.js:535
  4. 메시지 끝에 있는 파일 이름과 줄 번호 (예: common-bundle.js:535) 는 SharedArrayBuffer가 제공되는 위치를 나타냅니다. 서드 파티 라이브러리인 경우 개발자에게 문의하여 문제를 해결하세요. 웹사이트의 일부로 구현된 경우 아래 가이드에 따라 교차 출처 분리를 사용 설정하세요.
교차 출처 분리 없이 SharedArrayBuffer를 사용하는 경우 DevTools 콘솔 경고
교차 출처 분리 없이 SharedArrayBuffer를 사용하는 경우의 DevTools 콘솔 경고

(고급) 지원 중단 보고 사용

일부 브라우저에는 지원 중단 API를 지정된 엔드포인트에 보고하는 기능이 있습니다.

  1. 지원 중단 보고 서버를 설정하고 보고 URL을 가져옵니다. 공개 서비스를 사용하거나 직접 빌드하여 이 작업을 수행할 수 있습니다.
  2. URL을 사용하여 SharedArrayBuffer를 제공할 수 있는 페이지에 다음 HTTP 헤더를 설정합니다.
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. 헤더가 전파되기 시작하면 등록한 엔드포인트에서 지원 중단 보고서를 수집하기 시작합니다.

구현 예시를 참고하세요.

교차 출처 분리의 영향 분석

실제로 아무것도 중단하지 않고 교차 출처 분리를 사용 설정했을 때 사이트에 미치는 영향을 평가할 수 있다면 좋지 않겠어요? Cross-Origin-Opener-Policy-Report-Only 및 Cross-Origin-Embedder-Policy-Report-Only HTTP 헤더를 사용하면 이 작업을 수행할 수 있습니다.

  1. 최상위 문서에서 Cross-Origin-Opener-Policy-Report-Only: same-origin 을 설정합니다. 이름에서 알 수 있듯이 이 헤더는 COOP: same-origin 이 사이트에 미치는 영향에 관한 보고서만 전송하며 팝업 창과의 통신을 실제로 사용 중지하지는 않습니다.
  2. 보고를 설정하고 보고서를 수신하고 저장하도록 웹 서버를 구성합니다.
  3. 최상위 문서에서 Cross-Origin-Embedder-Policy-Report-Only: require-corp 를 설정합니다. 이 헤더를 사용하면 아직 사이트 기능에 영향을 미치지 않고 COEP: require-corp를 사용 설정했을 때의 영향을 확인할 수 있습니다. 이 헤더를 구성하여 이전 단계에서 설정한 것과 동일한 보고 서버로 보고서를 전송할 수 있습니다.

교차 출처 분리의 영향 완화

교차 출처 분리의 영향을 받는 리소스를 확인한 후에는 이러한 교차 출처 리소스를 실제로 선택하는 방법에 관한 일반적인 가이드라인을 참고하세요.

  1. 이미지, 스크립트, 스타일시트, iframe과 같은 교차 출처 리소스에서 Cross-Origin-Resource-Policy:cross-origin 헤더를 설정합니다. 동일한 사이트 리소스에서 Cross-Origin-Resource-Policy:same-site 헤더를 설정합니다.
  2. CORS를 사용하여 로드할 수 있는 리소스의 경우 HTML 태그에서 crossorigin 속성을 설정하여 사용 설정되어 있는지 확인합니다(예: <img src="example.jpg" crossorigin>). JavaScript 가져오기 요청의 경우 request.mode가 cors로 설정되어 있는지 확인합니다.
  3. 로드된 iframe 내에서 SharedArrayBuffer와 같은 강력한 기능을 사용하려면 에 allow="cross-origin-isolated"를 <iframe> 추가합니다.
  4. iframe 또는 워커 스크립트에 로드된 교차 출처 리소스에 다른 iframe 또는 워커 스크립트 레이어가 포함된 경우 계속 진행하기 전에 이 섹션에 설명된 단계를 반복적으로 적용합니다.
  5. 모든 교차 출처 리소스가 선택되었는지 확인한 후 iframe 및 워커 스크립트에서 Cross-Origin-Embedder-Policy: require-corp 헤더를 설정합니다 (동일한 출처 또는 교차 출처와 관계없이 필요함).
  6. postMessage()를 통해 통신해야 하는 교차 출처 팝업 창이 없는지 확인합니다. 교차 출처 분리가 사용 설정된 경우 계속 작동하도록 할 방법은 없습니다. 교차 출처 분리되지 않은 다른 문서로 통신을 이동하거나 다른 통신 방법 (예: HTTP 요청)을 사용할 수 있습니다.

교차 출처 분리 사용 설정

교차 출처 분리로 영향을 완화한 후에는 교차 출처 분리를 사용 설정하기 위한 일반적인 가이드라인을 참고하세요.

  1. 최상위 문서에서 Cross-Origin-Opener-Policy: same-origin 헤더를 설정합니다. Cross-Origin-Opener-Policy-Report-Only: same-origin을 설정한 경우 이를 대체합니다. 이렇게 하면 최상위 문서와 팝업 창 간의 통신이 차단됩니다.
  2. 최상위 문서에서 Cross-Origin-Embedder-Policy: require-corp 헤더를 설정합니다. Cross-Origin-Embedder-Policy-Report-Only: require-corp를 설정한 경우 이를 대체합니다. 이렇게 하면 선택되지 않은 교차 출처 리소스의 로드가 차단됩니다.
  3. 콘솔에서 self.crossOriginIsolated가 true를 반환하는지 확인하여 페이지가 교차 출처 분리되었는지 확인합니다.

리소스