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

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

Eiji Kitamura

이 가이드에서는 교차 출처 격리를 사용 설정하는 방법을 보여줍니다. SharedArrayBuffer, performance.measureUserAgentSpecificMemory() 또는 더 정확한 고해상도 타이머를 사용하려면 교차 출처 격리가 필요합니다.

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

웹사이트에서 SharedArrayBuffer이(가) 사용되는 위치 파악

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

목표:

• SharedArrayBuffer를 계속 사용하려면 교차 출처 격리를 사용 설정합니다.
• SharedArrayBuffer를 사용하는 서드 파티 코드를 사용하는 경우 서드 파티 제공업체에 조치를 취하도록 알립니다.

사이트의 어느 위치에서 SharedArrayBuffer가 사용되는지 잘 모르는 경우 다음 두 가지 방법을 통해 확인할 수 있습니다.

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

SharedArrayBuffer를 사용하는 위치를 이미 알고 있다면 교차 출처 격리의 영향 분석으로 건너뜁니다.

Chrome DevTools 사용

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

1. SharedArrayBuffer를 사용하고 있다고 의심되는 페이지에서 Chrome DevTools를 엽니다.
2. 콘솔 패널을 선택합니다.
3. 페이지에서 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

4. 메시지 끝에 있는 파일 이름과 줄 번호(예: common-bundle.js:535)는 SharedArrayBuffer가 어디에서 발생했는지를 나타냅니다. 서드 파티 라이브러리인 경우 개발자에게 문의하여 문제를 해결하세요. 웹사이트의 일부로 구현된 경우 아래 가이드를 따라 교차 출처 격리를 사용 설정하세요.

SharedArrayBuffer가 교차 출처 분리 없이 사용될 때 DevToools 콘솔 경고

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

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

1. 지원 중단 보고서 서버를 설정하고 보고 URL을 가져옵니다. 이를 위해 공개 서비스를 사용하거나 직접 빌드할 수 있습니다.
2. URL을 사용하여 SharedArrayBuffer를 제공할 가능성이 있는 페이지로 다음 HTTP 헤더를 설정합니다.

   Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}

3. 헤더가 전파되기 시작하면 등록한 엔드포인트에서 지원 중단 보고서를 수집하기 시작합니다.

구현 예는 https://cross-origin-isolation.glitch.me을 참고하세요.

교차 출처 격리의 영향 분석

실제로 아무것도 손상시키지 않고 교차 출처 격리를 사용 설정하면 사이트에 미치는 영향을 평가할 수 있다면 좋을 것입니다. 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 사용 설정이 미치는 영향을 확인할 수 있습니다. 이 헤더를 구성하여 이전 단계에서 설정한 것과 동일한 보고 서버로 보고서를 전송할 수 있습니다.

참고: Chrome DevTools 네트워크 패널에서 도메인 열을 사용 설정하여 영향을 받는 리소스를 대략적으로 확인할 수도 있습니다.

주의: 교차 출처 격리를 사용 설정하면 명시적으로 선택하지 않은 교차 출처 리소스의 로드가 차단되고 최상위 문서가 팝업 창과 통신할 수 없게 됩니다. 교차 출처 분리를 사용하려면 모든 하위 리소스를 명시적으로 선택해야 하므로 Cross-Origin-Resource-Policy를 대규모로 배포하는 방법을 모색하고 있습니다. 이와 반대 방향으로 나아가는 아이디어를 생각해 냈습니다. 새로운 COEP '사용자 인증 정보 없는' 모드는 모든 사용자 인증 정보를 제거하여 CORP 헤더 없이 리소스를 로드할 수 있도록 합니다. 이렇게 하면 하위 리소스가 Cross-Origin-Resource-Policy 헤더를 전송하는지 확인하는 부담이 줄어들기를 바랍니다. credentialless 모드는 Chrome 버전 96부터 사용할 수 있지만 아직 다른 브라우저에서는 지원되지 않으므로 일부 개발자는 이 단계에서 COOP 또는 COEP를 배포하는 데 어려움을 겪을 수 있습니다. 또한 Cross-Origin-Opener-Policy: same-origin 헤더는 OAuth 및 결제와 같은 교차 출처 창 상호작용이 필요한 통합을 중단하는 것으로 알려져 있습니다. 이 문제를 완화하기 위해 Cross-Origin-Opener-Policy: same-origin-allow-popups에 교차 출처 격리를 사용 설정하기 위한 조건 완화를 모색하고 있습니다. 이렇게 하면 자동으로 열리는 창과의 통신이 가능합니다. 교차 출처 격리를 사용 설정하고 싶지만 이러한 문제로 인해 차단된 경우 출처 체험판에 등록하고 새 모드를 사용할 수 있을 때까지 기다리는 것이 좋습니다. 새로운 모드를 사용할 수 있을 때까지는 기존 무료 체험을 종료할 계획이 없습니다.

교차 출처 격리의 영향을 완화합니다.

교차 출처 분리의 영향을 받는 리소스를 결정한 후 실제로 교차 출처 리소스를 선택하는 방법에 관한 일반적인 가이드라인은 다음과 같습니다.

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와 같은 강력한 기능을 사용하려면 <iframe>에 allow="cross-origin-isolated"를 추가합니다.
4. iframe 또는 worker 스크립트에 로드된 교차 출처 리소스에 다른 iframe 또는 worker 스크립트 레이어가 포함된 경우 계속 진행하기 전에 이 섹션에 설명된 단계를 재귀적으로 적용합니다.
5. 모든 교차 출처 리소스가 선택되었는지 확인한 후 iframe 및 worker 스크립트에 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를 반환하는지 확인하여 페이지가 교차 출처 격리되었는지 확인합니다.

단순 서버는 헤더 전송을 지원하지 않으므로 로컬 서버에서 교차 출처 격리를 사용 설정하는 것이 어려울 수 있습니다. 명령줄 플래그 --enable-features=SharedArrayBuffer를 사용하여 Chrome을 실행하면 교차 출처 격리를 사용 설정하지 않고도 SharedArrayBuffer를 사용 설정할 수 있습니다. 각 플랫폼에서 명령줄 플래그로 Chrome을 실행하는 방법을 알아보세요.

리소스

• COOP 및 COEP를 사용하여 웹사이트를 '교차 출처 격리'하기
• Android Chrome 88 및 데스크톱 Chrome 92의 SharedArrayBuffer 업데이트