影子DOM可以保护我的元素吗？ [英] Can a Shadow DOM secure my elements?

问题描述

目标：一个封闭的小部件

假设我是FakeBook™的一个朋友小部件的开发者。我为网站所有者提供了一个窗口小部件，为他们的网页添加了一个个性化的消息：

你的朋友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 的东西比较丑陋，因为它不将集成到网站的样式中，而

所需方法：Shadow DOM

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

  var host = document.querySelector（'＃friends'）; 
 var root = host.webkitCreateShadowRoot（）; 
 root.textContent ='你的朋友Michael，Anna和Shirley喜欢这个网页！ 
  

然而，使Shadow DOM隐藏其内容周围的页面？


这里假设没有人可以访问 root ，但是是否正确？ / p>

Shadow DOM spec 功能封装，但我实际上希望使用信任封装。而组件模型用例实际上列出了这个用例< a>，我不知道Shadow DOM是否实现了nesessary confinement 属性。

解决方案

它不，但它的作品： https：//www.w3 .org / Bugs / Public / show_bug.cgi？id = 20144

信任的封装将涉及为每个影子树创建一个新的脚本上下文，在大多数情况下都是过度的。然而，正如错误所述，我们将添加一个标志（详细TBD），以允许这一点。

Goal: an encapculated widget

Suppose I'm the developer of a friends widget for FakeBook™. I provide a widget for website owners that adds a personalized message like this to their pages:

Your friends Michael, Anna and Shirley love this webpage!

First approach: script that creates span

Naively, I create a script which places this information in a span on the website. However, the owners of ExampleSite can now access the names of your friends by simple DOM operations!
That's a big privacy / security issue.

Second approach: an iframe

I don't want ExampleSite to have access to their friends' names. So instead, I let website owners add the widget with an iframe:

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

This works, because the owners of ExampleSite cannot scrape the contents of the iframe. However, this whole iframe thing is rather ugly, because it does not integrate into the styling of the website, while a span does.

Desired approach: Shadow DOM

When reading about Shadow Dom yesterday, I wondered whether that could be a solution to both issues. It would allow me to have a script that creates a span the original website cannot access:

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

However, does a Shadow DOM hide its contents from the surrounding page?
The assumption here is that nobody except my script can access root, but is that correct?

The Shadow DOM spec after all says that it offers functional encapsulation, but I actually want trust encapsulation. And while the Component Model Use Cases actually list this use case, I'm not sure whether Shadow DOM realizes the nesessary confinement property.

解决方案

It does not, but it's in the works: https://www.w3.org/Bugs/Public/show_bug.cgi?id=20144

The encapsulation of trust will involve creating a new scripting context for each shadow tree, which is overkill for most scenarios. However, as the bug says, we'll add a flag (details TBD) that would allow this.

这篇关于影子DOM可以保护我的元素吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！