使用 JavaScript 验证输入 HTML答案

【问题标题】：Validate input HTML using JavaScript使用 JavaScript 验证输入 HTML
【发布时间】：2023-03-07 12:40:01
【问题描述】：

我需要使用 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 在 cmets 中所建议的那样，我首先尝试解码 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

【问题讨论】：

为什么不让浏览器解析它，然后将 DOM 重新序列化为 HTML？无论您做什么，RegEx 都不是答案。
@Brad 如果我这样做，&lt; 将被解码为 < 和 sanitizeHtml 方法将返回空字符串。这意味着 isValid('&lt;') 返回 false
不，不会……你试过了吗？
@Brad 我确实更新了我的问题，这是你的建议吗？
您的代码不是 Javascript。

标签： javascript html validation

【解决方案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

【讨论】：