js如何过滤html

在JavaScript中，过滤HTML通常指的是从用户输入中移除潜在的反面代码或脚本，这个过程很重要，因为它帮助防止跨站脚本攻击（XSS），确保网站的安全性，以下是一些用于过滤HTML的方法和实践：

1. 使用内建的DOM方法

浏览器提供了一些原生的DOM方法来解析和序列化HTML，这些方法可以帮助过滤掉不安全的HTML内容。

function filterHTML(input) {
    // 创建一个临时的DOM元素
    let temp = document.createElement('div');
    temp.textContent = input; // 设置文本内容，自动解码HTML实体
    // 使用innerText而不是innerHTML来获取没有HTML标签的纯文本
    let output = temp.innerText;
    return output;
}

2. 使用安全的正则表达式

可以使用正则表达式来替换掉一些常见的HTML标签和属性，但这种方法需要小心，因为正则表达式可能无法覆盖所有的HTML特性。

function filterHTMLWithRegex(input) {
    // 移除<script>标签
    let output = input.replace(/<s*script[sS]*?>/gi, '');
    // 移除事件属性如 onclick, onload 等
    output = output.replace(/(on[az]+)=/gi, '');
    // 移除其他HTML标签
    output = output.replace(/<s*/?[^>]*>/gi, '');
    return output;
}

3. 使用成熟的库

有许多成熟的库可以用来过滤HTML，例如DOMPurify，这些库通常提供了更全面的过滤功能，并且定期更新以应对新的安全威胁。

// 引入DOMPurify库
// <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.0/purify.min.js"></script>
function filterHTMLWithDOMPurify(input) {
    let output = DOMPurify.sanitize(input);
    return output;
}

4. 使用CSP（内容安全策略）

内容安全策略（CSP）是一种安全层，可以防止页面加载不安全的脚本，通过设置合适的CSP头，你可以限制浏览器只加载来自特定源的脚本。

<meta httpequiv="ContentSecurityPolicy" content="scriptsrc 'self' trusted.com">

5. 避免内联脚本

尽量不要在HTML中直接内联脚本，而是使用外部文件，这样更容易管理和过滤。

6. 对输出进行编码

在将数据插入到HTML之前，对其进行HTML编码，这样可以确保浏览器不会将其解释为HTML。

function encodeHTML(input) {
    // 创建一个新的空白div元素
    let div = document.createElement('div');
    // 设置其innerText为要编码的内容
    div.textContent = input;
    // 返回经过编码的HTML字符串
    return div.innerHTML;
}

归纳

过滤HTML是一个复杂的过程，需要考虑到多种情况，最佳实践是结合使用多种方法，例如使用DOM方法解析用户输入，使用正则表达式移除特定的HTML标签和属性，以及使用成熟的库来进行更全面的清理，确保你的网站有一个强大的CSP策略，并且始终对输出进行编码，以防止XSS攻击。