1. ¿Qué es Shadow DOM?
Shadow DOM es una tecnología utilizada en el desarrollo web, principalmente para encapsular el estilo y la estructura de los elementos web. Aquí, 'encapsulación' significa proteger y mantener independientes los elementos web dentro del Shadow DOM de las influencias externas.
2. Diferencias entre Shadow DOM y iframe
El Shadow DOM y el iframe son ambos tecnologías que crean áreas independientes dentro de una página web, pero tienen propósitos y funciones diferentes.
A continuación, se presentan tres diferencias principales:
2.1. Encapsulación vs inserción
El núcleo del Shadow DOM es la 'encapsulación'. Al utilizar Shadow DOM, se puede aislar la estructura interna y el estilo de los elementos web del entorno externo. Esto evita conflictos de estilo o scripts con otros elementos en la misma página web.
Por otro lado, el iframe se centra en el concepto de 'inserción'. Permite incrustar otra página web dentro de la página actual en una ventana independiente. Por ejemplo, se utiliza iframe para incrustar videos de YouTube o mapas de Google en una página web.
2.2. Estilo y scripts
El estilo y los scripts externos no afectan al interior del Shadow DOM, y viceversa, el estilo o los scripts dentro del Shadow DOM no afectan a los elementos externos.
De manera similar, el iframe evita que el estilo o los scripts de la página principal afecten al interior del iframe, y que el contenido dentro del iframe afecte a la página principal.
2.3. Seguridad
En el caso del Shadow DOM, al estar aislado del resto de la página web, acceder a los datos o funciones dentro del Shadow DOM desde el exterior se vuelve más complicado. Esto no significa que refuerce la seguridad, pero ayuda a prevenir el acceso no deseado a la estructura interna o datos.
En el caso del iframe, si la fuente externa es una página no confiable, existe el riesgo de que los datos o información del usuario se expongan, y cargar contenido de iframe a través de HTTP puede debilitar la seguridad de toda la página.
Para obtener más información sobre los problemas de seguridad relacionados con iframe y el web scraping, consulte la publicación anterior.
3. Método de web scraping en Shadow DOM
Normalmente, para acceder a los elementos HTML de una página web, utilizamos herramientas como selectores CSS o XPath. Sin embargo, en el caso del Shadow DOM, no podemos acceder a su interior con estas herramientas. Por lo tanto, debemos acceder directamente al 'root' del Shadow DOM utilizando JavaScript.
Supongamos que tenemos una página web con la siguiente estructura:
- Ejemplo de HTML:
<custom-settings>
#shadow-root
<settings-panel>
#shadow-root
<settings-content>
#shadow-root
<input id="customInput">
</settings-content>
</settings-panel>
</custom-settings>
Como se muestra en el ejemplo, el Shadow DOM a menudo tiene varias capas de estructura. Por lo tanto, para acceder a
<input id="customInput">
debemos seguir la estructura de capas para encontrar el Shadow Root.
A continuación se muestra un código Python utilizando Selenium para acceder al Shadow Root.
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")
Con este código, podemos explorar la estructura de capas del Shadow DOM secuencialmente y acceder al elemento deseado.
Es importante tener en cuenta que cada capa dentro del Shadow DOM tiene un DOM independiente, por lo que es necesario obtener el Shadow Root de esa capa para acceder a los elementos de la siguiente capa.
4. Conclusión: Aprovechemos el web scraping en Shadow DOM para obtener datos ocultos.
A medida que la estructura web se vuelve más avanzada, es probable que haya más código con 'elementos ocultos'.
Hoy hemos comparado las características y diferencias entre iframe y Shadow DOM, y hemos realizado un ejemplo simple de web scraping, lo que nos permite acceder directamente a los datos deseados. Es importante seguir investigando y dominando constantemente los métodos para acceder a los datos deseados en respuesta al avance de la tecnología de desarrollo.
También te puede interesar leer:
Recopilación de datos, ahora automatizada
Comience en 5 minutos sin necesidad de programación · Experiencia en web scraping de más de 5,000 sitios web
