Chrome에서 document.domain 수정이 사용 중지됩니다.

웹사이트에서 document.domain 설정을 사용하는 경우 조치가 필요합니다.

Maud Nalpas
Eiji Kitamura

무엇이 변경되며 그 이유는 무엇인가요?

Chrome 115부터 웹사이트에서 document.domain을 설정할 수 없게 됩니다. Chrome에서 document.domain이 변경 불가능하게 됩니다. 교차 출처 통신을 하려면 postMessage() 또는 Channel Messaging API와 같은 대체 접근 방식을 사용해야 합니다.

이 변경사항은 점진적으로 출시됩니다.

다른 브라우저에서도 결국 이 기능이 지원 중단되고 삭제될 것으로 예상됩니다. 자세한 내용은 브라우저 호환성 섹션을 검토하세요.

document.domain을 변경 불가능하게 만드는 이유는 무엇인가요?

document.domain 은 출처의 호스트 이름을 가져오거나 설정하도록 설계되었습니다. 많은 웹사이트에서 document.domain 동일 사이트이지만 교차 출처 페이지 간의 통신을 허용하도록 설정합니다.

이는 편리한 기술이지만 보안 위험이 발생합니다. 이는 동일 출처 정책을 완화하기 때문입니다. document.domain과 관련된 보안 문제로 인해 사용하지 않도록 사용자에게 경고하는 사양 변경이 이루어졌습니다.

자세히 알아보기: document.domain을 변경 불가능하게 만드는 이유는 무엇인가요?

오늘날 document.domain이 사용되는 방식

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

동일 사이트이지만 교차 출처 사이트의 eTLD+1은 동일하지만 하위 도메인은 다릅니다.

지금까지 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://video.example.com에 대해 https://parent.example.com에서 교차 출처 DOM 조작을 만들 수 있습니다.

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

이는 편리한 기술이지만 보안 위험이 발생합니다.

document.domain과 관련된 보안 문제

document.domain과 관련된 보안 문제로 인해 사용하지 않도록 사용자에게 경고하는 사양 변경이 이루어졌습니다.

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

document.domain 설정의 보안 영향에 관해 자세히 알아보려면 MDN의 "Document.domain" 페이지를 참고하세요.

브라우저 호환성

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

웹사이트가 이 변경사항의 영향을 받는 경우 Chrome에서 DevTools 문제 패널에 경고를 표시합니다. 이 경고는 2022년에 추가되었습니다. DevTools의 오른쪽 상단에 있는 노란색 깃발을 확인하세요.

DevTools의 문제 경고 스크린샷

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

Reporting API를 설정한 경우 Chrome에서 이 지원 중단을 알리기 위해 지원 중단 보고서를 전송했습니다. 기존 보고서 수집 서비스와 함께 Reporting API를 사용하는 방법을 자세히 알아보거나 자체 사내 솔루션을 빌드하세요.

이 변경사항이 실제로 적용되는 것을 어떻게 확인할 수 있나요?

이 변경사항은 Chrome 115부터 점진적으로 출시됩니다. Chrome 브라우저에 아직 출시되지 않은 경우에도 이 변경사항이 실제로 적용되는 것을 확인하려면 다음과 같이 사용 설정하면 됩니다.

  1. chrome://flags/#origin-agent-cluster-default를 엽니다.
  2. 사용 설정 을 선택합니다.
  3. Chrome을 다시 시작합니다.

어떤 대안을 사용할 수 있나요?

가장 좋은 방법은 페이지와 모든 구성 프레임을 동일한 출처에서 호스팅하는 등 document.domain을 전혀 수정하지 않는 것입니다. 이 방법은 모든 브라우저의 모든 버전에서 작동합니다. 하지만 이렇게 하려면 애플리케이션을 대대적으로 재작업해야 할 수 있으므로 교차 출처 액세스를 계속 지원하는 대안도 살펴보는 것이 좋습니다.

document.domain 대신 postMessage() 또는 Channel Messaging API 사용

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

아래 예시를 참조하세요.

  1. https://parent.example.com 은 iframe 내에서 https://video.example.com에 postMessage()를 통해 메시지를 전송하여 DOM을 조작하도록 요청합니다.
  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()` 또는 Channel Messaging API와 호환되지 않는 특정 요구사항이 있는 경우 Twitter를 통해 @ChromiumDev로 알려주거나 a document.domain 태그를 사용하여 Stack Overflow에 질문하세요.postMessage()

최후의 수단으로 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을 계속 설정할 수 있습니다.

이 동작이 필요한 다른 모든 문서도 Origin-Agent-Cluster를 전송해야 합니다 (문서 하나만 설정하는 경우 document.domain은 아무런 영향을 미치지 않음).

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

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

리소스

감사의 말씀

Unsplash의 Finan Akbar 사진