javascript - 使用 JavaScript 验证输入的 HTML

Question

我需要使用 JavaScript 验证网络应用程序中的 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，但不适用于转义的。

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

1. 我是否遗漏了这个方法？
2. 有没有更好的方法来完成这项任务？

编辑: 正如@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，有效地让浏览器完成工作给你。

未经测试，但像这样:

const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
console.log(doc.documentElement.innerHTML);

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

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