2015-05-20 123 views
1

说我复制一些“恶意”的输入,就像一个事件处理程序或其他JavaScript消毒膏输入

<img src="bunny.jpg" onload="alert('hi');"> 

如果我复制到该到我的剪贴板,然后将其粘贴到contenteditable DIV的DOM节点事件处理程序被彻底删除。

<img src="/Users/tjhance/Desktop/bunny.jpg"> 

我现在可以操纵这个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> 

当我做糊,我得到的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;"> 

这是unsanitized,仍然有它的事件监听器。就我所知,我无法用这个字符串做任何事情。我无法使用浏览器将其解析为HTML,因为它会运行JavaScript,这是一个巨大的安全漏洞。

很明显,浏览器有一些清理HTML的功能,因为它在粘贴时会执行此操作。所以如果我想干净的HTML,我可以等待事件通过并将HTML添加到DOM。当然,我不会在这里张贴,如果我可以这样做...

所以我的问题是,有没有什么办法,我可以采取潜在的肮脏的HTML,并获得干净,安全的DOM节点操纵使用浏览器的DOM API,而不需要浏览器将HTML粘贴到contenteditable div(用户可以看到)?我在这里有什么选择?

回答