1. Was ist Shadow DOM?
Shadow DOM ist eine Technologie, die in der Webentwicklung verwendet wird, hauptsächlich um Stil und Struktur von Webkomponenten zu kapseln. 'Kapselung' bedeutet hier, die Webkomponenten im Inneren des Shadow DOM vor externen Einflüssen zu schützen und unabhängig zu halten.
2. Unterschied zwischen Shadow DOM und iframe
Shadow DOM und iframe sind beide Technologien, um in einer Webseite isolierte Bereiche zu erstellen, aber ihre Zwecke und Funktionen sind unterschiedlich.
Hier sind drei Hauptunterschiede:
2.1. Kapselung vs. Einbettung
Der Kern des Shadow DOM ist die 'Kapselung'. Durch die Verwendung von Shadow DOM können die interne Struktur und der Stil von Webkomponenten vor der äußeren Umgebung isoliert werden. Dadurch wird verhindert, dass Stile oder Skripte von anderen Elementen auf derselben Webseite kollidieren.
Im Gegensatz dazu konzentriert sich iframe auf das Konzept der 'Einbettung'. Mit einem iframe können andere Webseiten in einem separaten Fenster innerhalb der aktuellen Seite eingebettet werden. Zum Beispiel wird ein iframe verwendet, um YouTube-Videos oder Google Maps auf einer Webseite einzubetten.
2.2. Stil und Skripte
Externe Stile und Skripte haben keinen Einfluss auf das Innere des Shadow DOM und umgekehrt, der Stil und die Skripte im Inneren des Shadow DOM haben keinen Einfluss auf externe Elemente.
Ebenso haben Stile und Skripte der Elternseite keinen Einfluss auf den Inhalt des iframes und der Inhalt des iframes hat keinen Einfluss auf die Elternseite.
2.3. Sicherheit
Da der Shadow DOM von anderen Teilen der Webseite isoliert ist, ist der Zugriff von außen auf Daten oder Funktionen im Inneren des Shadow DOM komplizierter. Dies bedeutet nicht, dass die Sicherheit verstärkt wird, aber es hilft, den unbeabsichtigten Zugriff auf interne Strukturen oder Daten zu verhindern.
Im Falle eines iframes besteht die Gefahr, dass Benutzerdaten oder Informationen exponiert werden, wenn externe Quellen unsicher sind, und wenn Inhalte über HTTP in einem iframe geladen werden, kann die Sicherheit der gesamten Seite beeinträchtigt werden.
Weitere Informationen zu Sicherheitsproblemen im Zusammenhang mit iframes und zum Crawlen finden Sie in einem früheren Beitrag.
3. Methoden zum Crawlen von Shadow DOM
Normalerweise verwenden wir Tools wie CSS-Selektoren oder XPath, um auf HTML-Elemente einer Webseite zuzugreifen. Im Falle von Shadow DOM können wir jedoch nicht auf diese Weise auf das Innere zugreifen. Daher müssen wir mit JavaScript direkt auf das 'root' des Shadow DOM zugreifen.
Angenommen, wir haben eine Webseite mit folgender Struktur:
- HTML-Beispiel:
<custom-settings>
#shadow-root
<settings-panel>
#shadow-root
<settings-content>
#shadow-root
<input id="customInput">
</settings-content>
</settings-panel>
</custom-settings>
Da Shadow DOM oft mehrschichtige Hierarchien hat, müssen wir die Shadow Root Schicht für Schicht durchgehen, um auf
<input id="customInput">
zuzugreifen.
Hier ist ein Python-Code mit Selenium, um auf das Shadow Root zuzugreifen.
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")
Mit diesem Code können wir die Hierarchie des Shadow DOM durchsuchen und auf das gewünschte Element zugreifen.
Es ist wichtig zu beachten, dass aufgrund der unabhängigen DOMs in jeder Schicht des Shadow DOM das entsprechende Shadow Root erhalten werden muss, um auf die Elemente der nächsten Schicht zugreifen zu können.
4. Fazit: Nutzen Sie das Crawlen von Shadow DOM, um versteckte Daten zu erhalten.
Mit der fortschreitenden Webentwicklung wird der Code mit 'versteckten Elementen' immer häufiger.
Heute haben wir die Eigenschaften und Unterschiede zwischen iframe und Shadow DOM verglichen und ein einfaches Beispiel für das Crawlen durchgeführt. Es ist wichtig, dass wir kontinuierlich Forschung betreiben und uns mit den Methoden vertraut machen, um auf die gewünschten Daten zugreifen zu können, um mit den Entwicklungen in der Technologie Schritt zu halten.
Lesen Sie auch:
Daten sammeln, jetzt automatisieren
Starten Sie in 5 Minuten ohne zu coden · Erfahrung mit dem Crawlen von über 5.000 Websites
