Question

我需要使用JavaScript验证Web应用程序中的HTML用户输入。

到目前为止，我根据此question所做的操作：我正在使用第三方库sanitize-html来清理输入，然后将其与原始输入进行比较。如果它们不同，则Html无效。

const isValidHtml = (html: string): boolean => {
    let sanitized = sanitizeHtml(html, sanitizationConfig);
    sanitized = sanitized.replace(/\s/g, '').replace(/<br>|<br\/>/g, ''); // different browser's behavior for <br>
    html = html.replace(/\s/g, '').replace(/<br>|<br\/>/g, '');
    return sanitized === html;
}

上述方法适用于未转义的HTML，但不适用于转义的HTML。

isValidHtml('<'); // false
isValidHtml('&lt;'); // true
isValidHtml('<script>'); // false
isValidHtml('&lt;script&gt;'); // true, this should be false also!!!

我用这种方法错过了什么吗？
是否有更好的方法来完成此任务？

编辑： 正如@brad在评论中所建议的那样，我尝试首先解码Html：

decodeHtml(html: string): string {
    const txt = document.createElement('textarea');
    txt.innerHTML = html;
    const decodedHtml = txt.value;
    txt.textContent = null;
    return decodedHtml;
}

然后致电isValid(decodedHtml)，我得到了以下结果：

isValidHtml('<'); // false
isValidHtml('&lt;'); // false, this should be true!!!
isValidHtml('<script>'); // false
isValidHtml('&lt;script&gt;'); // false

Answer 1

如果您实际上并没有试图验证HTML，而只是试图确保它最终有效，我建议您通过DOM解析器运行它并取回HTML，以有效地让浏览器完成工作为你。

未经测试，但类似这样：

ListenAndServe()

基本上，您可以使用浏览器的内置解析来处理任何错误，无论如何，它都是以标准方式进行的。它将创建一个节点树。从那棵节点树中，您可以生成肯定有效的HTML。

另请参阅：https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#Parsing_an_SVG_or_HTML_document

使用JavaScript验证输入HTML

1 个答案: