1. Shadow DOM이란?
Shadow DOMは、ウェブ開発で使用される技術であり、主にウェブ要素のスタイルと構造をカプセル化するために使用されます。ここでの「カプセル化」とは、外部の影響からShadow DOM内部のウェブ要素を保護し、独立して維持することを意味します。
2. Shadow DOMとiframeの違い
Shadow DOMとiframeは、どちらもウェブページ内で独立した領域を作成する技術ですが、使用目的や機能が異なります。
以下に3つの代表的な違いをまとめてみました。
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の特性と違いを比較しながら、クローリングを直接試してみる簡単な例を共に進めましたが、開発技術の進化に対応して、目的のデータにアクセスできる方法を絶えず研究し、習熟していく必要があります。
この記事も一緒に読んでみてください:
データ収集、今度は自動化しましょう
コーディング不要で5分でスタート・5,000以上のウェブサイトをクローリングした経験
