javascript - sanitizer 膏输入

标签 javascript copy-paste contenteditable

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

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

如果我将其复制到我的剪贴板并将其粘贴到 contenteditable div 中,事件处理程序将被干净地剥离。

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

我现在可以随心所欲地操纵这个 DOM 节点。到目前为止还不错。

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

<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;">

它未经处理,但仍有事件监听器。据我所知,我不能用这个字符串做任何事情。我无法使用浏览器将它解析为 HTML,因为那样它会运行 JavaScript,这是一个巨大的安全漏洞。

很明显,浏览器具有清理 HTML 的能力,因为它在粘贴时执行此操作。因此,如果我想要干净的 HTML,我可以等待事件完成并将 HTML 添加到 DOM。当然,如果我愿意这样做,我就不会在这里发帖...

所以我的问题是,有没有什么方法可以让我使用浏览器 DOM api 处理潜在的脏 HTML 并获得干净、安全的 DOM 节点来操作,而无需浏览器实际将 HTML 粘贴到 contenteditable div(用户可以看)?我在这里有哪些选择?

最佳答案

你可以使用 this hacky technique在所有浏览器都支持获取剪贴板数据之前的过去,虽然它不是很好。最大的缺点是它只适合通过键盘粘贴。

另一种选择是自己清理 HTML 字符串。作为起点,我想到的选项是 DOMParserdocument.implementation.createHTMLDocument .我不确定它们有多安全;快速搜索发现:

https://security.stackexchange.com/questions/50970/is-it-safe-to-use-createhtmldocument-to-sanitize-html

关于javascript - sanitizer 膏输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30340878/

相关文章:

javascript - 使用 JavaScript 将内容复制到剪贴板或从剪贴板粘贴内容

emacs:将 S-Expression 放入杀死环而不将其删除

android - 当用户在 android 中复制某些内容时如何得到通知?

javascript - contenteditable - 添加一个类到当前的 div

html - 使用 css user-select : none; 单击 div 时从 contenteditable 中丢失选定的文本

:focus within child of contenteditable 上的 CSS

javascript - 防止表单多次提交

javascript - html自定义属性合法性

javascript - 如何获取调用我的函数的元素的 ID、类或 HTML 标记?

javascript - jquery-mobile:关闭桌面主题