如何沙盒div元素？

Question

我想构建一个内容编辑器。这个contenteditor会将一个HTML文档（带有JavaScript）加载到例如#result元素中。问题在于，如果在这个HTML元素中有例如$("input").hide();，那么我的所有输入都会在整个页面中消失，所以不仅仅在加载的HTML（我的目标）中。

我想与编辑器做的是当客户点击，它表示数据库的东西一个元素，该元素的信息将弹出，用户将能够编辑。 （因此，如果用户将鼠标悬停与类“接触型”（这是在数据库中的一个形式中，连接到加载的页）的新窗口将有关此特定形式的元素信息弹出。

此外，我不能完全禁用Javascript，因为加载的HTML可能包含Javascript的样式等。

我的目标：删除Javascript，当用户加载HTML文件时可能会很烦人。此外，删除了Javascript功能来编辑之外它自己的DOM somehthing的能力。

PS我开赌这种变通方法就像为此使用iframe，但我希望能够将鼠标悬停在与它们交互的元素上。

编辑：看来这个问题可能有点过于宽泛，看着评论。 我的问题摘要：如何禁用特定div的alert（）以及如何创建沙箱，以便div内的代码只能从该div内部更改元素。

Answer 1

你在找什么是HTML清理。这是您在浏览器中加载之前，从服务器上的HTML代码片段中删除任何危险内容的过程。有很多消毒库可以去除脚本标签，对象标签等。请记住，您无法使用javascript进行消毒，因为当您注入脚本时，另一个恶意脚本可能已经加载并运行。

有效沙箱中的JavaScript环境的唯一途径是借助iframe。你会注意到像CodePen,JSBin和JSFiddle这样的网站广泛使用它们。有一种叫做ShadowDOM的东西，它是Web组件的基础，但它还没有得到很好的支持。

为了能够运行你自己的前端脚本允许悬停，您可以在消毒处理后注入脚本。这样，如果它被加载到iframe中，你的脚本也将被加载。

最后，alert()不属于对DOM的任何元素。例如，您可以在页面加载后立即触发警报。但是，如果您试图阻止用户交互中出现警报，则可以尝试从特定元素中删除所有事件侦听器。如果您清理脚本标记的HTML，这将不是必需的，但是，由于脚本不会有机会加载，所以不会有任何事件侦听器。

Answer 2

您可以使用ShadowDOM将html文档加载到host节点中。另请参见WHY SHADOW DOM?