Question

我有一种情况，我将外部HTML加载到网页上的WYSIWYG编辑器中。外部HTML来自受信任的来源，包括来自多个不同页面的两个特定<div>标记之间的内容。

我的问题是某些页面包含内联javascript事件处理程序。因此，当我在WYSIWYG编辑器中工作时，某些事件会导致执行此js。

除了填充控制台时，除了... is not defined之外的错误之外，它几乎没有做任何事情，这可能就是这样，这不会有问题。但是，它仍然是凌乱的，我不知道是否有一个页面可能会执行像alert(...)这样可能会非常烦人的事情。代码都是可信的，但与其预期的上下文分离，可能会产生不良结果。

我想找到一种全局阻止此执行的方法，最好不要修改内联脚本。我可以对每个处理程序执行类似附加=false;的操作，但是我必须检查所有传入的元素，即使使用正则表达式，也会降低性能。此外，在将已编辑的HTML提交回服务器之前，我必须将其删除，这似乎是一个很大的痛苦，而且很难完美无缺。

有没有办法阻止此在线代码在此特定环境中执行？

Answer 1

根据您尝试支持的浏览器，您可以查看“内容安全政策”标题。有关浏览器支持的详细信息，请结帐http://caniuse.com/contentsecuritypolicy。

如果目标浏览器在列表中，CSP可以完全按照您的要求进行操作。默认情况下，它将禁用事件处理程序。除了阻止事件处理程序之外，它还将阻止嵌入在页面上的任何代码的执行。因此，您需要将所有js代码（如果在html页面上显示为单独的js）移动，在安全列表中指定该文件名并从那里加载您的js。

CSP被设置为Http标头，但是使用新标准也可以使用元标记进行设置。结帐https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#html-meta-element--experimental。

对于支持WebKit的浏览器（Chrome / Safari）会限制任何外部来源的负载。您可以将已接受来源的列表添加到列表中，并探索适合您的内容。

对于firefox，虽然它在规范中，我不认为meta标签是支持的。 https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy

总而言之，只要您可以为托管网页的Web服务器设置标头（除非您只需要Chrome / Safari支持），并且您的目标浏览器支持CSP，您就可以试一试。

Answer 2

我从sitepoint forum复制了这个问题，这是一个类似于你的问题。这需要一种方法，将div拉出父母并重新开启。如果你想要的是这里的示例代码：

var div = document.getElementById('div');
var nextSibling = div.nextSibling;
var parent = div.parentNode;
parent.removeChild(div);
function reCreateElement() {
    if (nextSibling) {
        parent.insertBefore(div, nextSibling);
    } else {
        parent.appendChild(div);
    }
}
setTimeout(reCreateElement, 100);

// Below is the stuff we don't want to run!
document.getElementById('div').onclick = function() {
 alert('CLICKED!');
}

防止内联JS执行

2 个答案: