Shadow DOM

从零到英雄学习AWS黑客技术，通过 htARTE (HackTricks AWS Red Team Expert)!

支持HackTricks的其他方式：

如果你想在 HackTricks中看到你的公司广告 或 下载HackTricks的PDF，请查看订阅计划!
获取 官方的PEASS & HackTricks商品
发现 PEASS家族，我们独家的NFTs系列
加入 💬 Discord群组 或 telegram群组 或在 Twitter 🐦 上关注我 @carlospolopm.
通过向 HackTricks 和 HackTricks Cloud github仓库提交PR来分享你的黑客技巧。

基本信息

Shadow DOM是Web组件功能套件的一部分，旨在允许JS开发者创建具有封装功能的可复用自定义元素，与网站代码的其余部分隔离。

本质上，你可以使用Shadow DOM来隔离你的组件的HTML和CSS，使其与网页的其余部分隔离。例如，如果你在shadow DOM中创建元素ID，它们不会与父DOM中的元素ID冲突。你在shadow DOM中使用的任何CSS选择器只会应用于shadow DOM内部，而不会影响到父DOM，你在父DOM中使用的任何选择器也不会渗透到shadow DOM内部。

// creating a shadow DOM
let $element = document.createElement("div");
$shadowDomRef = $element.attachShadow({ mode: "open" }); // open or closed

通常，当你将一个**"open" 影子 DOM 附加到一个元素上时，你可以通过 $element.shadowRoot 获取到影子 DOM 的引用。然而，如果影子 DOM 是以"closed"** 模式附加的，你无法通过这种方式获得它的引用。即使我阅读了我能找到的所有开发者文档，我对 closed 模式的目的仍然有些不清楚。根据 Google 的说法:

影子 DOM 还有另一种叫做 "closed" 模式的形式。当你创建一个closed 影子树时，外部的 JavaScript 将无法访问你组件的内部 DOM。这和像 <video> 这样的原生元素的工作方式类似。JavaScript 无法访问 <video> 的影子 DOM，因为浏览器是用 closed-mode 影子根来实现的。

然而，他们也指出：

Closed 影子根并不是很有用。一些开发者会将 closed 模式视为一个人为的安全特性。但让我们明确一点，它不是一个安全特性。

访问影子 DOM

window.find() 和文本选择

函数 window.find("search_text") 能够穿透影子 DOM。这个函数实际上具有与网页上的 ctrl-F 相同的功能。

可以调用 document.execCommand("SelectAll") 尽可能地扩大选择范围，然后调用 window.getSelection() 来返回影子 DOM 内所选文本的内容。

在 firefox 中，你可以使用 getSelection()，它返回一个 Selection 对象，其中 anchorElement 是影子 DOM 中元素的引用。因此，我们可以按如下方式泄露影子 DOM 的内容：

getSelection().anchorNode.parentNode.parentNode.parentNode.innerHTML

但这在Chromium中不起作用。

可编辑内容或CSS注入

我们可能与shadow DOM交互的一种方式是，如果我们在其中有HTML或JS注入。在某些有趣的情况下，你可以在shadow DOM中获得注入，而在普通的crossorigin页面上则无法做到。

一个例子是，如果你有任何带有contenteditable属性的元素。这是一个已弃用且很少使用的HTML属性，它声明了该元素的内容可由用户编辑。我们可以使用选择与**document.execCommand** API来与可编辑内容的元素交互并获得HTML注入！

find('selection within contenteditable');

document.execCommand('insertHTML',false,'<svg/onload=console.log(this.parentElement.outerHTML)>')

或许更有趣的是，contenteditable 可以通过应用一个已弃用的 CSS 属性：-webkit-user-modify:read-write 在 chromium 中的任何元素上声明。

这使我们能够通过向元素添加 CSS 属性，然后使用 insertHTML 命令，将 CSS/样式注入提升为 HTML 注入。

CTF

查看这篇 writeup，其中使用了这项技术作为 CTF 挑战：https://github.com/Super-Guesser/ctf/blob/master/2022/dicectf/shadow.md

参考资料

https://blog.ankursundara.com/shadow-dom/

从零开始学习 AWS 黑客攻击直到成为专家，通过 htARTE (HackTricks AWS 红队专家)！

支持 HackTricks 的其他方式：

如果你想在 HackTricks 中看到你的公司广告 或 下载 HackTricks 的 PDF，请查看 订阅计划！
获取 官方 PEASS & HackTricks 商品
发现 PEASS 家族，我们独家的 NFT 集合
加入 💬 Discord 群组 或 telegram 群组 或在 Twitter 🐦 上关注我 @carlospolopm。
通过向 HackTricks 和 HackTricks Cloud github 仓库提交 PR 来分享你的黑客技巧。

6.3 KiB Raw Blame History Unescape Escape