Web组件现在是否支持类似于iframe的安全隔离？

Question

我希望Web组件由一个站点托管，而另一个站点无法访问Web组件的内部DOM或Javascript。与iframes完全一样，但是可以更好地在HTML中呈现，例如调整大小以合并其内容等等。

有很多关于这方面的讨论，但在2019年，当我问这个问题时，有什么措施可以做到吗？

编辑:让我说清楚--我希望JS从我们的服务器为组件提供服务，从组件的JS向我们的服务器发出请求，在组件中呈现内容，但不让封闭站点获得它或在组件中放置特洛伊木马。我很好的封闭网站提供CSS，但没有HTML或JS。这能办到吗？

它将如何与类似于postMessage的组件进行通信？

最后，组件JS是否有可能访问外部包含网站的DOM，从而找到其他组件并进行通信？最后一个不可能在另一个域上使用iframes。

Answer 1

简单的回答是:不。

Web组件不会隔离JS。只有DOM和CSS。

但是你可以把你所有的JS放在你的类中，或者放在一个ES6模块中，或者放在一个生命中，这样就可以隔离它。

但我怀疑Web是否能百分之百地取代<iframe>。我也不认为他们注定是这样的。

如果<iframe>被废弃并最终从浏览器中删除，我就不会感到惊讶了。

更新

将所有JS代码保存在组件的类中或在一个生命周期内将在某种程度上保护代码。HTML和CSS已经在组件中被沙箱包围了.如果您的代码位于IIFE或ES6模块中，则其他代码必须访问源文件并能够对其进行修改才能更改源文件。

外部与组件的通信是通过外部代码调用组件的函数或设置组件的属性和属性来完成的。

从组件到外部的通信传统上是通过分派事件来完成的。直接从一个组件到另一个组件是一个杂乱无章的选择，确实应该避免。这取决于父代码侦听来自其所有子级的事件，然后调用函数或设置其他子元素的属性/属性。

如果您使用shadowDOM，那么封闭站点只能更改您的组件的CSS，如果您使它们可以使用这些CSS的某些方面。这要么是用CSS实现的，要么是通过使用<slot>来允许封装应用程序在组件中放置自己的HTML/CSS。不过，这可能会让你对一些你可能不想要的东西敞开心扉。

类中或IIFE中的代码始终可以访问DOM中的任何内容。记住，JS不是沙箱，它可以做任何其他JS能做的事情。但是，对于封闭的应用程序来说，对组件类进行更改要困难得多，尽管可能不是不可能的。确保您的类是冻住，以防止子类化。

另一件要知道的事情是，如果你让别人从他们的服务器加载他们的网站，然后从你的服务器加载你的组件文件，那么你可能会遇到CORS问题。特别是如果您的代码试图使用XHR/获取加载数据，那么您可能有CORS问题。