contenteditable编辑框防止不安全HTML代码

最近把Reader项目的评论框从textarea换成div了, 实现元素的自增高确实方便了, 但随之而来的却是更多的麻烦.

比如, div[contenteditable=true]元素的内容可以是HTML代码, 虽然直接输入不行, 但从网页上复制内容到编辑框却是可以的, 这带来了2个问题:

1. 评论框的内容不统一, 排版混乱, 影响用户体验, 并且评论框本身期望的内容就是纯文字.
2. 允许HTML代码提交会存在安全方面的问题.

原先的textarea在这方面就完全不用顾虑, 因为它可输入的内容就只有纯文字, 而且还支持input等表单元素特有的事件.

对于div[contenteditable=true], 我们需要用很多的代码将其实现成一个编辑器, 这对于快速开发的项目而言, 太不合适了, 那怎么办? 退回textarea吗? 若是退回textarea, 就无法轻松实现一些高级的功能, 而且这两种元素差别挺大, 并不方便切换.

所以有这样一种方法, 移除div[contenteditable=true]中的不安全HTML标签:

text = text.replace(/<[\/\s]*(?:(?!div|br)[^>]*)>/g,'')

这段代码会移除除了div和br以外的所有HTML标签, 但我们需要在用户输入时执行它, 所以免不了额外的计算消耗.

需要执行这段代码的事件有blur, paste, keyup, 而且在触发之前可能还需要设置一个timeout, 不然就无法获取到内容. 这些都不是实现功能的最大障碍, 最要命的是我们使用到了正则表达式, 这种东西极难维护, 后患无穷.

实际上, 上面代码给出的正则表达式还留有一个问题, 即无法去除div标签的属性.

所以我不得不再加上另外两行代码:

text = text.replace(/<[\/\s]*(?:(?!div|br)[^>]*)>/g, '')
text = text.replace(/<\s*div[^>]*>/g, '<div>')
text = text.replace(/<[\/\s]*div[^>]*>/g, '</div>')

也许这里还存在着一些其他的漏洞, 我只想告诉你, 这真的不是一个好的解决方案.

 

另一个解决方案是获取剪切板的纯文本内容, 然后将内容插入到编辑框中, 这样就避免了HTML代码的输入. 该代码只在现代浏览器中可以执行, 对于旧版本的浏览器, 可能需要另设兼容方案:

var clipboard = e.clipboardData,
    text = clipboard.getData('text/plain'),
    sel = window.getSelection();
if(sel.getRangeAt && sel.rangeCount){
    var range = sel.getRangeAt(0),
        frag = document.createDocumentFragment(),
        node,
        lastNode;
    range.deleteContents();
    var ele = document.createElement("div");
    ele.innerHTML = text;
    while(node = el.firstChild){
        lastNode = frag.appendChild(node);
    }
    range.insertNode(frag);
    if(lastNode){
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
    }
}

这段代码需要放在未调用settimeout的paste事件中(beforepaste), 否则将无法获得剪切板内容, 执行完毕后别忘了取消浏览器的默认事件.

这里用到了clipboardData, Selection, Range等W3C标准的对象, 虽然实现起来相比第一种方法要复杂一些, 但这换来了更轻松的代码维护工作.