影子DOM可以保护我的元素吗？

本文介绍了影子DOM可以保护我的元素吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 目标：一个封闭的小部件 假设我是FakeBook™的一个朋友小部件的开发者。我为网站所有者提供了一个窗口小部件，为他们的网页添加了一个个性化的消息： 第一种方法：创建 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 功能封装，但我实际上希望使用信任封装。而组件模型用例实际上列出了这个用例，我不知道Shadow DOM是否实现了nesessary confinement 属性。解决方案它不，但它的作品： https：//www.w3 .org / Bugs / Public / show_bug.cgi？id = 20144 信任的封装将涉及为每个影子树创建一个新的脚本上下文，在大多数情况下都是过度的。然而，正如错误所述，我们将添加一个标志（详细TBD），以允许这一点。 Goal: an encapculated widgetSuppose 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:First approach: script that creates spanNaively, 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 iframeI 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 DOMWhen 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=20144The 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可以保护我的元素吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！