Question

我正在制作一个小的HTML页面编辑器。编辑器将文件加载到iframe中。从那里，它可以添加，修改或删除页面上具有新属性，样式等的元素。问题在于，JavaScript（和/或其他编程语言）可以在加载时完全修改页面，之后你开始编辑元素。因此，当您保存时，它不会保存原始标记，而是保存修改后的页面+您的更改。

所以，我需要一些方法来禁用iframe上的JavaScript，或者在JavaScript开始修改页面之前以某种方式删除所有JavaScript。（我想我最终必须为PHP解析文件，但这不应该太难）我考虑编写一个脚本来遍历所有元素，删除任何标签，onclick，onfocus，onmouseover等等。但是这将是一个真正的痛苦。

有没有人知道在iframe中运行JavaScript的更简单方法？

更新：除非我错过了什么，否则我认为没有办法简单地“禁用JavaScript”。如果我错了，请纠正我。但是，我想唯一的方法是从请求的页面字符串中解析出任何脚本标记和JavaScript事件（点击，鼠标悬停等）。

Answer 1

HTML5在iframe上引入the sandbox attribute，如果为空，则禁用JavaScript加载和执行。

Answer 2

是的，您的更新是正确的。您必须假设您从用户收到的任何输入都可能包含恶意元素。因此，在接受输入之前，必须在服务器上进行验证。

Answer 3

您可以尝试使用CKEditor采用的相同解决方案，其中您有一个演示here 通过从RTE模式切换到查看源模式，您可以输入一些JavaScript并查看结果，该结果是安全编码字符串中JS节点的替代。
如果您处于查看源模式，请输入一些JS行：

<script type="text/javascript">
// comment
alert('Ciao');
</script>

回到富文本编辑器模式时，您会看到它以这种方式渲染：

<!--{cke_protected}%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0D%0A%2F%2F%20comment%0D%0Aalert('Ciao')%3B%0D%0A%3C%2Fscript%3E-->

我认为这是最简单有效的方法之一，因为用于解析JS节点的RegExp并不复杂。
一个例子：

var pattern = /<script(\s+(\w+\s*=\s*("|').*?\3)\s*)*\s*(\/>|>.*?<\/script\s*>)/;
var match = HTMLString.match(pattern); // array containing the occurrences found

（当然，要替换脚本节点，您应该使用replace（）方法）。

问候。

Answer 4

您可以在标头中将内容安全政策设置为 script-src＆＃39; self＆＃39; 。 CSP将阻止除我们自己网站之外的任何脚本。这样我们就可以阻止iframe更改页面中的元素。

您可以从http://www.html5rocks.com/en/tutorials/security/content-security-policy/

获取更多信息

在iframe / div中禁用JavaScript

4 个答案: