使用 jQuery 将标签列入白名单是否明智？ JavaScript 有现成的解决方案吗？

Question

我的问题是

我想清理粘贴在富文本编辑器（目前为 FCK 1.6）中的 HTML。清理应该基于标签白名单（也许还有另一个带有属性的白名单）。这主要不是为了防止 XSS，而是为了删除丑陋的 HTML。

目前我看不到在服务器上完成它的方法，所以我猜它必须在 JavaScript 中完成。

目前的想法

我找到了 jquery-clean 插件，但据我所知，它使用正则表达式来完成工作，并且 我们知道这不安全。

由于我还没有找到任何其他基于 JS 的解决方案，因此我开始使用 jQuery 自己实现一个。它的工作原理是创建粘贴的 html ($(pastedHtml)) 的 jQuery 版本，然后遍历生成的树，通过查看属性 tagName.

我的问题

• 这更好吗？
• 我可以相信 jQuery 来代表粘贴的内容吗 内容很好（可能有不匹配的 结束标签和你有什么）？
• 有没有更好的解决方案 我没找到？

更新

这是我当前基于 jQuery 的解决方案（冗长且未经过广泛测试）：

function clean(element, whitelist, replacerTagName) {
    // Use div if no replace tag was specified
    replacerTagName = replacerTagName || "div";

    // Accept anything that jQuery accepts
    var jq = $(element);    

    // Create a a copy of the current element, but without its children
    var clone = jq.clone();
    clone.children().remove();

    // Wrap the copy in a dummy parent to be able to search with jQuery selectors
    // 1)
    var wrapper = $('<div/>').append(clone);

    // Check if the element is not on the whitelist by searching with the 'not' selector
    var invalidElement = wrapper.find(':not(' + whitelist + ')');

    // If the element wasn't on the whitelist, replace it.
    if (invalidElement.length > 0) {
       var el = $('<' + replacerTagName + '/>'); 
       el.text(invalidElement.text()); 
       invalidElement.replaceWith(el);   
    }

    // Extract the (maybe replaced) element
    var cleanElement = $(wrapper.children().first());

    // Recursively clean the children of the original element and
    // append them to the cleaned element
    var children = jq.children();
    if (children.length > 0) {
        children.each(function(_index, thechild) {
                          var cleaned = clean(thechild, whitelist, replacerTagName);
                          cleanElement.append(cleaned);
                      });
      } 
    return cleanElement;
}

我想知道一些要点（请参阅代码中的注释）；

1. 我真的需要将我的元素包装在虚拟父元素中才能将其与 jQuery 的“:not”匹配吗？
2. 这是创建新节点的推荐方法吗？

Answer 1

如果您利用浏览器的 HTML 纠正功能（例如，将富文本复制到空 div 的 innerHTML 并获取生成的 DOM 树），则 HTML 将保证有效（纠正方式在某种程度上取决于浏览器）。尽管这可能是由富编辑器完成的。

jQuery 自己的文本顶部 DOM 转换可能也是安全的，但速度肯定较慢，所以我会避免使用它。

使用基于 jQuery 选择器引擎的白名单可能有些棘手，因为在保留其子元素的同时删除元素可能会使文档无效，因此浏览器会通过更改 DOM 树来纠正它，这可能会混淆尝试迭代无效元素的脚本。 （例如，您允许 ul 和 li 但不允许 ol；脚本会删除列表根元素、裸露的 li 元素无效，因此浏览器再次将它们包装在 ul 中，清理脚本将错过该 ul。）如果您将不需要的元素与其所有子元素一起丢弃，我不认为没有看到任何问题。