동일 출처 정책을 완화하기 위해 Chrome에서 document.domain을 수정할 수 없게 됩니다.

웹사이트에서 document.domain 설정을 사용하는 경우 조치를 취해야 합니다.

Eiji Kitamura

업데이트

• 2023년 5월 30일: Google에서는 Chrome 115부터 document.domain setter의 지원 중단이 적용될 예정이라고 발표했습니다.
• 2023년 4월 7일: Chrome 112에서 이 변경사항을 출시하기 전에 문제가 발견되었습니다. 기본적으로 삭제될 document.domain setter는 현재 정지되어 있으며 새 출시 마일스톤은 아직 결정되지 않았습니다. 이 블로그 게시물을 다시 확인하거나 blink-dev 및 이 대화목록을 구독하세요.
• 2023년 1월 20일: 업데이트된 타임라인 - Chrome 112부터 document.domain setter가 기본적으로 삭제됩니다. 또한 document.domain 동작을 제어하는 엔터프라이즈 정책에 관한 언급이 추가되었습니다.
• 2022년 7월 25일: 타임라인 업데이트됨 - Chrome 109부터 document.domain setter가 기본적으로 삭제됩니다.
• 2022년 2월 4일: 새로운 타임라인으로 업데이트되었습니다. Chrome 100부터 문제 패널에 경고가 표시되고 Chrome 106부터 기본적으로 document.domain setter가 삭제됩니다.

document.domain는 출처의 호스트 이름을 가져오거나 설정하도록 설계되었습니다.

Chrome에서는 웹사이트가 document.domain를 설정할 수 없습니다. 교차 출처 통신을 하려면 postMessage() 또는 Channel Messaging API와 같은 대체 접근 방식을 사용해야 합니다. 이 변경사항은 최대한 빨리 Chrome 112로 출시될 예정이지만 출시 의도에 대한 응답에 따라 달라집니다.

웹사이트가 제대로 작동하기 위해 document.domain를 통해 동일 출처 정책 완화를 사용하는 경우 사이트는 해당 동작이 필요한 다른 모든 문서와 마찬가지로 Origin-Agent-Cluster: ?0 헤더를 전송해야 합니다. 단, 한 문서만 설정하는 경우 document.domain는 영향을 미치지 않습니다.

document.domain를 변경 불가능으로 하는 이유는 무엇인가요?

많은 웹사이트에서는 동일 사이트의 교차 출처 페이지 간에 통신을 허용하도록 document.domain를 설정합니다.

사용 방법은 다음과 같습니다.

https://parent.example.com의 페이지에 https://video.example.com의 iframe 페이지가 삽입되었다고 가정해 보겠습니다. 이 페이지는 하위 도메인이 서로 다른 동일한 eTLD+1 (example.com)을 갖습니다. 두 페이지의 document.domain가 모두 'example.com'로 설정되면 브라우저는 두 출처를 동일 출처인 것처럼 처리합니다.

https://parent.example.com의 document.domain를 설정합니다.

// Confirm the current origin of "parent.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

https://video.example.com의 document.domain를 설정합니다.

// Confirm the current origin of "video.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

이제 https://parent.example.com에서 https://video.example.com에 대해 교차 출처 DOM 조작을 만들 수 있습니다.

웹사이트는 동일 사이트 문서가 더 쉽게 통신할 수 있도록 document.domain를 설정합니다. 이 변경사항은 동일 출처 정책을 완화하므로 상위 페이지가 iframe의 문서에 액세스하고 DOM 트리를 탐색할 수 있으며 그 반대의 경우도 가능합니다.

이는 편리한 기법이지만 보안 위험을 초래합니다.

document.domain의 보안 문제

document.domain와 관련된 보안 문제로 인해 사용자에게 사용하지 말라고 경고하는 사양이 변경되었습니다. 다른 브라우저 공급업체와의 현재 논의도 같은 방향으로 진행되고 있습니다.

예를 들어 두 페이지가 document.domain를 설정하면 동일한 출처인 것처럼 가장할 수 있습니다. 이는 이러한 페이지가 서로 다른 하위 도메인이 있는 공유 호스팅 서비스를 사용하는 경우에 특히 중요합니다. document.domain를 설정하면 동일한 서비스에서 호스팅하는 다른 모든 사이트에 액세스할 수 있으므로 공격자가 더 쉽게 사이트에 액세스할 수 있습니다. document.domain가 도메인의 포트 번호 부분을 무시하기 때문에 가능합니다.

document.domain 설정이 보안에 미치는 영향에 대한 자세한 내용은 MDN의 'Document.domain' 페이지를 참조하세요.

Chrome은 Chrome 112에서 document.domain를 변경할 수 없도록 할 계획입니다.

내 사이트가 영향을 받는지 어떻게 알 수 있나요?

웹사이트가 이번 변경사항의 영향을 받는 경우 Chrome의 DevTools Issues 패널에 경고가 표시됩니다. 오른쪽 상단에 노란색 플래그가 표시됩니다.

보고 엔드포인트가 설정된 경우 지원 중단 보고서도 전송됩니다. 기존 보고서 수집 서비스 또는 자체 내부 솔루션을 통해 Reporting API를 사용하는 방법을 자세히 알아보세요.

LightHouse 지원 중단된 API 감사를 통해 사이트를 실행하여 Chrome에서 삭제될 예정인 모든 API를 찾을 수 있습니다.

교차 출처 통신의 대안

현재 웹사이트에서 document.domain를 대체하는 방법에는 세 가지가 있습니다.

postMessage() 또는 Channel Messaging API 사용

대부분의 사용 사례에서 교차 출처 postMessage() 또는 Channel Messaging API가 document.domain를 대체할 수 있습니다.

아래 예시를 참조하세요.

1. https://parent.example.com는 postMessage()를 통해 메시지를 전송하여 DOM을 조작하도록 iframe 내에서 https://video.example.com를 요청합니다.
2. https://video.example.com는 메시지를 수신하는 즉시 DOM을 조작하고 성공을 상위 요소에 다시 알립니다.
3. https://parent.example.com는 성공을 확인합니다.

https://parent.example.com:

// Send a message to https://video.example.com
iframe.postMessage('Request DOM manipulation', 'https://video.example.com');

// Receive messages
iframe.addEventListener('message', (event) => {
  // Reject all messages except ones from https://video.example.com
  if (event.origin !== 'https://video.example.com') return;

  // Filter success messages
  if (event.data === 'succeeded') {
    // DOM manipulation is succeeded
  }
});

https://video.example.com:

// Receive messages
window.addEventListener('message', (event) => {
  // Reject all messages except ones from https://parent.example.com
  if (event.origin !== 'https://parent.example.com') return;

  // Do a DOM manipulation on https://video.example.com.

  // Send a success message to https://parent.example.com
  event.source.postMessage('succeeded', event.origin);
});

사용해 보고 작동 방식을 알아보세요. postMessage() 또는 채널 메시지 API와 호환되지 않는 특정 요구사항이 있는 경우 트위터의 @ChromiumDev를 통해 알려주시거나 Stack Overflow에서 document.domain 태그를 사용하여 문의해 주세요.

최후의 수단으로 Origin-Agent-Cluster: ?0 헤더를 전송합니다.

document.domain 설정을 계속해야 할 강력한 이유가 있는 경우 대상 문서와 함께 Origin-Agent-Cluster: ?0 응답 헤더를 전송할 수 있습니다.

Origin-Agent-Cluster: ?0

Origin-Agent-Cluster 헤더는 문서를 출처 관련 에이전트 클러스터에서 처리해야 하는지 여부를 브라우저에 지시합니다. Origin-Agent-Cluster에 대해 자세히 알아보려면 Origin-Agent-Cluster 헤더로 성능 격리 요청을 참고하세요.

이 헤더를 전송하면 기본적으로 문서를 변경할 수 없게 된 후에도 문서에서 document.domain 설정을 계속할 수 있습니다.

엔터프라이즈 정책에 OriginAgentClusterDefaultEnabled 구성

원하는 경우 관리자가 OriginAgentClusterDefaultEnabled 정책을 false로 구성하여 조직 전반의 Chrome 인스턴스에서 기본적으로 document.domain를 설정할 수 있도록 할 수 있습니다. 자세한 내용은 Chrome Enterprise 정책 목록 및 관리 | 문서를 참고하세요.

브라우저 호환성

• The Origin specification에 따르면 이 기능은 삭제되어야 합니다.
• Mozilla는 기본적으로 document.domain를 사용 중지하는 것이 프로토타입 제작에 가치가 있다고 생각합니다.
• WebKit은 document.domain setter 지원 중단에 대해 다소 긍정적인 입장을 보였습니다.

리소스

• Document.domain - 웹 API | MDN
• 출처 격리 및 지원 중단 document.domain
• 지원 중단document.domain · Issue #564 · w3ctag/design-reviews

감사의 말씀

사진: Braydon Anderson, Unsplash