Javascript 消毒膏输入

Javascript 消毒膏输入,javascript,copy-paste,contenteditable,Javascript,Copy Paste,Contenteditable,假设我复制了一些“恶意”输入,比如带有事件处理程序或其他javascript的DOM节点 <img src="bunny.jpg" onload="alert('hi');"> 我现在可以随心所欲地操纵这个DOM节点了。到目前为止,一切都很好 另一方面,假设我想钩住浏览器的粘贴事件,并以自己的方式处理粘贴。我可以轻松获取剪贴板数据: <div contenteditable="true" id="myContentEditableDiv"></div> &

假设我复制了一些“恶意”输入,比如带有事件处理程序或其他javascript的DOM节点

<img src="bunny.jpg" onload="alert('hi');">
我现在可以随心所欲地操纵这个DOM节点了。到目前为止,一切都很好

另一方面,假设我想钩住浏览器的粘贴事件,并以自己的方式处理粘贴。我可以轻松获取剪贴板数据:

<div contenteditable="true" id="myContentEditableDiv"></div>

<script>

$('#myContentEditableDiv').on('paste', function(event) {
    console.log(event);
    var pastedHtml = event.originalEvent.clipboardData.getData('text/html');
    console.log(pastedHtml);
});

</script>

$('myContentEditableDiv')。在('paste',函数(事件)上{
console.log(事件);
var pastedHtml=event.originalEvent.clipboardData.getData('text/html');
console.log(粘贴dhtml);
});
当我粘贴时,我得到了HTML

<meta charset='utf-8'><img src="/Users/tjhance/Desktop/bunny.jpg" onload="alert('hi');" style="color: rgb(0, 0, 0); font-family: Times; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">

它未初始化,但仍具有事件侦听器。据我所知,我不能用这根绳子做任何事。我无法使用浏览器将其解析为HTML,因为它会运行JavaScript,这是一个巨大的安全漏洞

很明显,浏览器有一些清除HTML的功能,因为它在粘贴时会这样做。因此,如果我想要干净的HTML,我可以等待事件通过并将HTML添加到DOM中。当然,如果我同意的话,我不会在这里发帖

因此,我的问题是,是否有任何方法可以使用浏览器DOM api处理可能脏的HTML并获得干净、安全的DOM节点,而无需浏览器实际将HTML粘贴到contenteditable div(用户可以看到)中?我的选项是什么?

在所有浏览器都支持获取剪贴板数据之前,您可以使用以前的版本,尽管这不是很好。最大的缺点是它只适合通过键盘粘贴

另一种方法是自己清理HTML字符串。作为起点,我想到的选项是和。我不知道他们有多安全;快速搜索发现:


似乎您真正想问的是如何清理字符串。事件部分无关-
<meta charset='utf-8'><img src="/Users/tjhance/Desktop/bunny.jpg" onload="alert('hi');" style="color: rgb(0, 0, 0); font-family: Times; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">