Shadow DOM의 핵심은 '캡슐화'입니다. Shadow DOM을 사용하면 웹 요소의 내부 구조와 스타일을 외부 환경으로부터 격리할 수 있습니다. 이로 인해, 동일한 웹 페이지 내의 다른 요소와 스타일이나 스크립트가 충돌하는 것을 방지합니다. 반면, iframe은 '삽입'의 개념에 초첨을 맞추고 있습니다. iframe은 다른 웹 페이지를 현재 페이지 안에 독립된 창으로 삽입하는 것을 가능하게 하빈다. 예를 들어, Youtube 동영상이나 Google Maps를 웹 페이지에 삽입할 때 iframe을 사용하게 됩니다.

2.2. 스타일과 스크립트

외부의 스타일과 스크립트가 Shadow DOM 내부에 영향을 주지 않고, 반대로 Shadow DOM 내부의 스타일이나 스크립트가 외부의 요소에 영향을 주지 않게 설계되어 있습니다. iframe도 마찬가지로 부모 페이지의 스타일이나 스크립트가 iframe 내부에 여향을 주지 않으며, iframe 내부의 내용도 부모 페이지에 여향을 주지 않습니다.

2.3. 보안

Shadow DOM의 경우 웹 페이지의 나머지 부분과 격리되어 있기 때문에, Shadow DOM 내부의 데이터나 기능에 외부에서 접근하는 것은 더 복잡해집니다. 이것이 보안을 강화한다는 의미는 아니지만, 의도치 않게 내부 구조나 데이터에 접근하는 것을 방지하는 데 도움을 줍니다. iframe의 경우 외부 소스가 신뢰할 수 없는 페이지인 경우 사용자의 데이터나 정보가 노출될 위험이 있고, HTTP로 iframe 콘텐츠를 로드할 경우, 전체 페이지의 보안이 약화될 수 있습니다.

iframe과 관련된 보안 문제와 크롤링에 관한 자세한 내용은 이전 포스팅에서 확인하실 수 있습니다.

3. Shadow DOM 크롤링 방법

일반적으로 웹 페이지의 HTML 요소에 접근하기 위해 우리는 CSS 셀렉터나 XPath와 같은 도구를 사용합니다. 그러나 Shadow DOM의 경우, 이러한 도구로 내부에 접근할 수 없습니다. 그래서 우리는 JavaScript를 이용해 Shadow DOM의 'root'에 직접 접근해야 합니다.

아래와 같은 구조의 웹 페이지가 있다고 가정해 보겠습니다.

HTML 예제:


&lt;custom-settings&gt;
  #shadow-root
    &lt;settings-panel&gt;
      #shadow-root
        &lt;settings-content&gt;
          #shadow-root
            &lt;input id="customInput"&gt;
        &lt;/settings-content&gt;
    &lt;/settings-panel&gt;
&lt;/custom-settings&gt;

위 예제처럼 Shadow DOM은 종종 여러 겹의 계층 구조를 가집니다. 따라서


&lt;input id="customInput"&gt;

에 접근하기 위해서는 계층 구조를 하나씩 따라가며 Shadow Root를 찾아야 합니다.

아래는 Shadow Root에 접근하기 위한 Selenium을 이용한 Python 코드입니다.


def get_shadow_root(element, driver):
    return driver.execute_script('return arguments[0].shadowRoot', element)

driver = ... # Selenium 웹 드라이버 초기화

# 첫 번째 Shadow DOM 접근
root1 = driver.find_element_by_tag_name('custom-settings')
shadow_root1 = get_shadow_root(root1, driver)

# 두 번째 Shadow DOM 접근
root2 = shadow_root1.find_element_by_tag_name('settings-panel')
shadow_root2 = get_shadow_root(root2, driver)

# 세 번째 Shadow DOM 접근
root3 = shadow_root2.find_element_by_tag_name('settings-content')
shadow_root3 = get_shadow_root(root3, driver)

# 원하는 요소에 접근
input_element = shadow_root3.find_element_by_id("customInput")

위 코드를 통해 Shadow DOM의 계층 구조를 순차적으로 탐색하며 원하는 요소에 접근할 수 있습니다.

중요한 것은 Shadow DOM 내부의 각 계층마다 독립적인 DOM이 있기 때문에, 해당 계층의 Shadow Root를 얻어야 다음 계층의 요소에 접근할 수 있다는 점입니다.