1. Qu'est-ce que Shadow DOM?
Shadow DOM est une technologie utilisée dans le développement web, principalement pour encapsuler le style et la structure des éléments web. Ici, "encapsulation" signifie protéger et maintenir indépendants les éléments web à l'intérieur du Shadow DOM des influences extérieures.
2. Différences entre Shadow DOM et iframe
Shadow DOM et iframe sont tous deux des technologies permettant de créer des zones indépendantes à l'intérieur d'une page web, mais ils ont des objectifs et des fonctionnalités différents.
Voici trois différences principales:
2.1. Encapsulation vs Insertion
L'élément clé du Shadow DOM est l' "encapsulation". En utilisant le Shadow DOM, vous pouvez isoler la structure interne et le style des éléments web de l'environnement externe. Cela permet d'éviter les conflits de style ou de script avec d'autres éléments de la même page.
D'autre part, l'iframe se concentre sur le concept d' "insertion". L'iframe permet d'insérer une autre page web dans une fenêtre indépendante à l'intérieur de la page actuelle. Par exemple, l'iframe est utilisé pour insérer des vidéos YouTube ou des cartes Google Maps dans une page web.
2.2. Style et Script
Les styles et scripts externes n'affectent pas l'intérieur du Shadow DOM, et inversement, les styles ou scripts internes du Shadow DOM n'affectent pas les éléments externes.
De même, l'iframe empêche les styles ou scripts de la page parent d'affecter l'intérieur de l'iframe, et le contenu de l'iframe n'affecte pas la page parent.
2.3. Sécurité
Étant donné que le Shadow DOM est isolé du reste de la page web, l'accès aux données ou fonctionnalités à l'intérieur du Shadow DOM depuis l'extérieur est plus complexe. Cela ne renforce pas la sécurité, mais cela aide à prévenir l'accès non intentionnel à la structure interne ou aux données.
En ce qui concerne l'iframe, si la source externe est une page non fiable, il existe un risque que les données ou informations de l'utilisateur soient exposées, et le chargement de contenu iframe via HTTP peut affaiblir la sécurité de la page entière.
Pour plus d'informations sur les problèmes de sécurité liés à l'iframe et le web scraping, veuillez consulter le post précédent.
3. Méthodes de web scraping pour Shadow DOM
Normalement, pour accéder aux éléments HTML d'une page web, nous utilisons des outils tels que les sélecteurs CSS ou XPath. Cependant, dans le cas du Shadow DOM, ces outils ne permettent pas d'accéder à l'intérieur. C'est pourquoi nous devons accéder directement à la 'racine' du Shadow DOM en utilisant JavaScript.
Supposons que nous ayons une page web avec la structure suivante:
- Exemple HTML:
<custom-settings>
#shadow-root
<settings-panel>
#shadow-root
<settings-content>
#shadow-root
<input id="customInput">
</settings-content>
</settings-panel>
</custom-settings>
Comme dans l'exemple ci-dessus, le Shadow DOM a souvent plusieurs couches imbriquées. Ainsi, pour accéder à
<input id="customInput">
nous devons parcourir les couches une par une pour trouver le Shadow Root.
Voici un exemple de code Python utilisant Selenium pour accéder au 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")
Ce code permet d'explorer de manière séquentielle la structure du Shadow DOM pour accéder à l'élément souhaité.
Il est important de noter que chaque couche du Shadow DOM a son propre DOM indépendant, donc pour accéder aux éléments de la couche suivante, vous devez obtenir le Shadow Root de cette couche.
4. Conclusion : Utilisons le web scraping du Shadow DOM pour obtenir des données cachées.
À mesure que la structure web devient plus complexe, le code contenant ces "éléments cachés" deviendra de plus en plus courant.
Aujourd'hui, nous avons comparé les caractéristiques et les différences entre les iframes et le Shadow DOM, et nous avons également réalisé un exemple simple de web scraping. Il est important de continuer à étudier et à maîtriser les méthodes permettant d'accéder aux données souhaitées pour s'adapter au développement technologique.
Consultez également cet article:
Collecte de données, automatisez maintenant
Commencez en 5 minutes sans coder · Expérience de web scraping sur plus de 5 000 sites web
