Chrome 브라우저 document.domain 변경 이슈

이재철·2022년 9월 1일
0

📄 요약

보안 이슈로 document.domain에 값 설정하는 방식은 크롬브라우저에서 금지할 예정 (Chrome 109 ver)

원문 링크 : 크롬 개발자 블로그


📄 사용방법

  • 하나의 페이지에 별도의 iframe으로 다른 페이지가 들어가 있는 경우 두 페이지간 통신을 가능하기 위해 사용함

    메인 페이지 : main.naver.com
    서브 페이지 : video.naver.com

  • 원칙적으로 host가 다르기 때문에 서로 정보 교환이 불가능

document.domain을 사용하여 서로의 window, document 접근 가능

  • parent, children의 도메인을 자신의 상위 도메인으로 변경
# 예시

// main.naver.com
document.domain = 'naver.com'
// video.naver.com
document.domain = 'naver.com'

// main, video 페이지 간의 SOP 통과하여 서로 정보를 주고 받을 수 있음

// **자신의 상위 도메인으로 변경만 가능
document.domain = 'kakao.com' // 불가능

📄 문제점?

1. 사용자 정보 탈취 가능성

  • 도메인을 변경하여 정보를 요청하면 다른 사용자의 페이지처럼 정보에 접근 가능성 문제

2. 다른 포트 접근 가능성

  • 브라우저의 강력한 보안 정책중 하나인 same-origin(SOP(Same Origin Policy))를 무시할 수 있음
  • document.domain이 도메인의 포트 번호 부분을 무시함
  • 동일한 도메인에서 포트가 서빙되는 경우 same-origin 아니지만, document.domain을 변경할 수 있기 때문에 same-origin으로 위장할 수 있음

📄 해결방법

확인사항

  • 변경이 필요한 코드
    • document.domain을 사용하는 코드
    • iframe에 접근하는 코드
    • window.open으로 열린 팝업에 접근하는 코드
    • 팝업에서 opener에 접근하는 코드
  • 사이트가 영향을 받는지 확인
    • 변경의 영향을 받는 경우 Chrome은 DevTools 문제 패널에서 경고 (오른쪽 모서리 상단에 있는 노란색 깃발을 확인)
    • LightHouse 지원 중단 API 검사를 통해 사이트를 실행하여 Chrome에서 제거되도록 예약된 모든 API을 확인 할 수 있음

이미지 출처 : 크롬 개발자 블로그


Window.postMessage(), Channel Messaging API 사용


# 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);
});
profile
혼신의 힘을 다하다 🤷‍♂️

0개의 댓글