출처 간 격리를 이용하기 위한 가이드

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

Feb 9, 2021 • Updated Aug 5, 2021

Eiji Kitamura

• Twitter
• GitHub
• Blog

이 가이드에서는 출처 간 격리를 이용하는 방법을 보여줍니다. SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), 높은 정밀도의 고해상도 타이머 또는 JS Self-Profiling API를 사용하려면 출처 간 격리가 필요합니다.

출처 간 격리를 이용하려는 경우, 이것이 광고 배치와 같은 웹사이트의 다른 출처 간 리소스에 미치는 영향을 평가하세요.

웹사이트에서 SharedArrayBuffer가 사용되는 위치를 결정하세요.

Chrome 92부터 출처 간 격리 없이는 SharedArrayBuffer를 사용하는 기능이 더 이상 작동하지 않습니다. SharedArrayBuffer 사용 중단 메시지 때문에 이 페이지에 오게 되었다면 웹사이트 또는 여기에 내장된 리소스 중 하나가 SharedArrayBuffer를 사용하고 있을 가능성이 높습니다. 사용 중단으로 인해 웹사이트에서 아무 문제도 생기지 않도록 우선 이것이 사용되는 위치를 확인하세요.

Objective:

• SharedArrayBuffer를 계속 사용하려면 출처 간 격리를 활성화하세요.
• SharedArrayBuffer를 사용하는 제3자 코드에 의존하는 경우, 제3자 공급자에게 조치를 취하도록 알리세요.

사이트에서 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가 어디서 출처했는지를 나타냅니다. 제3자 라이브러리인 경우 개발자에게 연락해 문제를 해결하세요. 웹사이트의 일부로 구현된 경우라면 아래 가이드에 따라 출처 간 격리를 활성화하세요.

(고급) 사용 중단 보고 사용 #

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

1. 사용 중단 보고서 서버를 설정하고 보고 URL을 가져옵니다. 공공 서비스를 사용하거나 직접 구축하여 이를 수행할 수 있습니다.
2. URL을 사용하여 잠재적으로 SharedArrayBuffer를 제공할 페이지로 다음 HTTP 헤더를 설정합니다.

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

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

여기에서 예제 구현을 참조하세요: https://first-party-test.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을 활성화할 때의 영향을 확인할 수 있습니다. 이전 단계에서 설정한 동일한 보고 서버로 보고서를 보내도록 이 헤더를 구성할 수 있습니다.

출처 간 격리의 영향 완화 #

출처 간 격리의 영향을 받을 리소스를 결정했으면 이러한 출처 간 리소스를 실제로 선택하는 방법에 대한 다음의 일반 지침을 따르세요.

1. 이미지, 스크립트, 스타일시트, iframe 등과 같은 출처 간 리소스에서 Cross-Origin-Resource-Policy: cross-origin 헤더를 설정합니다. Same-site 리소스에서는 Cross-Origin-Resource-Policy: same-site 헤더를 설정합니다.
2. 리소스가 CORS와 함께 제공되는 경우 최상위 문서의 HTML 태그에 crossorigin 특성을 설정합니다(예: <img src="example.jpg" crossorigin>).
3. iframe에 로드된 출처 간 리소스에 다른 iframe 레이어가 포함된 경우, 계속 진행하기 전에 이 섹션에 설명된 단계를 재귀적으로 적용하세요.
4. 모든 출처 간 리소스가 선택된 것을 확인한 후, iframe에 로드된 출처 간 리소스에서 Cross-Origin-Embedder-Policy: require-corp 헤더를 설정합니다.
5. 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를 반환하는지 확인하여 페이지가 출처 간에 격리되었는지 검증하세요.

리소스 #

• COOP 및 COEP를 사용하여 웹사이트를 "출처 간 격리"로 만들기
• Android Chrome 88 및 Desktop Chrome 92에서 SharedArrayBuffer 업데이트