使用JavaScript验证输入HTML

Question

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

到目前为止，我所做的是基于这个问题：我正在使用第三方库，消毒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!!!

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