나만 모르는 숨은 웹 요소? Shadow DOM 크롤링 하는 방법

숨겨진 웹 요소, Shadow DOM을 수집하는 방법을 알아보세요. 이 글에서는 Shadow DOM의 개념부터 iframe과의 비교, 크롤링까지 다양한 내용을 다룹니다.

1. Shadow DOM이란?

Shadow DOM은 웹 개발에서 사용되는 기술로, 주로 웹 요소의 스타일과 구조를 캡슐화하기 위해 사용됩니다. 여기서 '캡슐화'란, 외부의 영향으로부터 Shadow DOM 내부의 웹 요소를 보호하고 독립적으로 유지하는 것을 의미합니다.
 
 

2. Shadow DOM과 iframe의 차이

 
 
Shadow Dom과 iframe은 모두 웹 페이지 안에 독립된 영역을 만드는 기술이지만, 사용되는 목적과 기능이 다릅니다.
아래 세가지 대표적인 차이점을 정리해보았습니다.
 

2.1. 캡슐화 vs 삽입

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 예제:
<custom-settings> #shadow-root <settings-panel> #shadow-root <settings-content> #shadow-root <input id="customInput"> </settings-content> </settings-panel> </custom-settings>
위 예제처럼 Shadow DOM은 종종 여러 겹의 계층 구조를 가집니다. 따라서
<input id="customInput">
에 접근하기 위해서는 계층 구조를 하나씩 따라가며 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를 얻어야 다음 계층의 요소에 접근할 수 있다는 점입니다.
 
 

4. 결론 : Shadow DOM 크롤링을 잘 활용하여 숨겨진 데이터를 획득하자.

웹 구조가 고도화될 수록, 이러한 ‘숨겨진 요소’를 띈 코드가 더욱 많아질 것 입니다.
오늘은 iframe과 Shadow DOM의 특성 및 차이점을 비교하며, 크롤링을 직접 해볼수 있는 간단한 예제를 함께 진행해보았는데요, 개발 기술의 발전에 대응하여 원하는 데이터에 접근할 수 있는 방법들은 끊임없이 연구하고 숙달해야할 필요가 있습니다.
 

이 글도 함께 읽어보세요: