Shadow DOM 是不是能够保护元素？

Posted 2023-02-19

【中文标题】Shadow DOM 是不是能够保护元素？

【英文标题】：Is Shadow DOM able to secure elements?Shadow DOM 是否能够保护元素？

【发布时间】：2012-12-29 14:46:15

【问题描述】：

目标：一个封装的小部件

假设我是一个显示朋友列表的小部件的开发者，例如：

你的朋友 Michael、Anna 和 Shirley 喜欢这个网页！

第一种方法：创建span 的脚本

天真地，我创建了一个脚本，将这些信息放在网站上的span 中。但是，ExampleSite 的所有者现在可以通过简单的 DOM 操作访问您朋友的姓名！ 这是一个很大的隐私/安全问题。

第二种方法：iframe

我不希望 ExampleSite 有权访问他们朋友的姓名。因此，我让网站所有者使用iframe 添加小部件：

<iframe src="http://fakebook.com/friends?page=http%3A%2F%2Fexample.org%2F"></iframe>

这是可行的，因为 ExampleSite 的所有者无法抓取 iframe 的内容。然而，整个iframe 的东西相当丑陋，因为它没有整合 到网站的样式中，而span 可以。

所需的方法：Shadow DOM

昨天阅读Shadow Dom 时，我想知道这是否可以解决这两个问题。这将允许我有一个脚本来创建一个 span 原始网站无法访问：

var host = document.querySelector('#friends');
var root = host.webkitCreateShadowRoot();
root.textContent = 'Your friends Michael, Anna and Shirley love this webpage!';

然而，**Shadow DOM 是否会从周围的页面中隐藏其内容？** 这里的假设是除了我的脚本之外没有人可以访问“root”，但这是正确的吗？

Shadow DOM spec 毕竟说它提供功能封装，但我实际上想要信任封装。虽然组件模型用例实际上列出了this use case，但我不确定 Shadow DOM 是否实现了必要的限制属性。

【问题讨论】：

“然而，整个iframe 的东西相当丑陋，因为它没有融入网站的样式，而span 可以。” <iframe seamless> 解决了这个问题。

您不应依赖“尚未完全标准化且仍在不断变化”的 API。我只会使用一个框架，让它们传递一些基本样式（背景颜色、颜色等）

@MathiasBynens seamless 似乎很有趣。什么是浏览器支持？

@WaleedKhan 我没有说这是我明天需要实施的东西。我只是想知道 Shadow DOM 是否提供这种安全性。

@RubenVerborgh WebKit has (at least some level of) seamless support。据我所知，没有其他浏览器引擎可以这样做，但我又没有测试过。

【参考方案1】：

它没有，但它正在开发中：https://www.w3.org/Bugs/Public/show_bug.cgi?id=20144

信任的封装将涉及为每个影子树创建一个新的脚本上下文，这在大多数情况下都是多余的。然而，正如 bug 所说，我们将添加一个允许这样做的标志（详情待定）。

【讨论】：

感谢您的回答。网络上没有任何信息明确指出这一事实，即计划使用此功能。对于其他读者：我在公共 webapps 邮件列表 lists.w3.org/Archives/Public/public-webapps/2014JanMar/…

上找到了关于隔离类型的讨论

WebKit 贡献者的这个回答可能很有趣：github.com/w3c/webcomponents/issues/100#issuecomment-161867941