如何过滤html标签

为何需要过滤HTML标签？

HTML标签过滤的核心目标是展示需求与安全风险，未经过滤的用户输入（如评论表单、富文本编辑器提交）可能包含以下威胁：
| 风险类型 | 典型表现 | 后果 |
|—————-|———————————–|————————–|
| XSS跨站脚本 | <script>alert('hacked')</script> | 窃取Cookie/执行任意代码 |
| 标签滥用 | <img src="malicious.jpg"> | 钓鱼链接/资源盗刷 |
| 属性注入 | onerror="fetch('/attack')" | 触发非授权请求 |
| 格式破坏 | <div style="width:9999px">... | 页面布局崩溃 |

任何接收外部HTML的场景（论坛发帖、商品详情页、邮件模板）都必须实施严格的过滤机制。

主流过滤方案对比表

实战方案详解（附代码示例）

✅ 推荐方案：基于白名单的DOM解析器（Python版）

from bs4 import BeautifulSoup, Tag
import re
def filter_html(html_content, allowed_tags={'p', 'br', 'strong', 'em'}, allowed_attrs={}):
    """
    参数说明：
    html_content: 原始HTML字符串
    allowed_tags: 允许保留的标签集合
    allowed_attrs: 各标签允许的属性字典 {tag_name: [attr1, attr2]}
    """
    soup = BeautifulSoup(html_content, 'html.parser')
    for tag in soup.find_all(True):  # True表示匹配所有标签
        if tag.name not in allowed_tags:
            tag.decompose()  # 删除不在白名单的标签及其子内容
            continue
        # 过滤属性
        valid_attrs = allowed_attrs.get(tag.name, [])
        for attr in list(tag.attrs.keys()):
            if attr not in valid_attrs:
                del tag[attr]
    return str(soup)
# 使用示例
raw_input = "<script>alert('xss');</script><p style='color:red'>Hello <b>World</b></p>"
safe_output = filter_html(raw_input, 
                         allowed_tags={'p', 'b'}, 
                         allowed_attrs={'p': ['class']})
print(safe_output)  # 输出: <p>Hello <b>World</b></p>

关键优化点：

1. 递归遍历：find_all(True)可捕获所有层级的嵌套标签
2. 属性分级控制：不同标签可设置不同允许属性（如img标签允许src但禁止onerror）
3. 特殊处理列表：对<ul>/<ol>等容器标签需额外保留其子元素结构

⚠️ 避坑指南：常见错误做法

进阶安全策略

🔒 深度防御组合拳

1. 双重过滤机制：
   • 第一层：客户端实时校验（即时反馈错误）
   • 第二层：服务端最终过滤（不可绕过）类型区分：
   • 纯文本区域：直接转义所有HTML字符
   • 富文本区域：严格限制可用标签集
2. 日志审计：记录被过滤的敏感词/标签，用于追溯攻击尝试

🛡️ 特殊标签处理规范

不同场景的配置参考

常见问题FAQs

Q1: 如果业务需求确实需要允许用户使用图片怎么办？

A: 可采用「可控上传+CDN分发」方案：

1. 用户上传图片→后端校验文件类型/尺寸→存储至OSS/COS
2. 前端插入<img>标签时，src指向CDN地址而非本地路径
3. 同时过滤掉onerror等危险属性，示例配置：

   allowed_tags = {'img'}
   allowed_attrs = {'img': ['src', 'alt', 'width', 'height']}

   ⚠️ 注意：绝对禁止用户直接输入<img src="external-site.com/malicious.jpg">！

Q2: 如何处理用户粘贴来自Word/WPS的带格式文本？

A: 分两步处理：

1. 初次清洗：用正则移除<o:p>等Office专有标签，保留基础排版标签

   <o:[^>]+>.?</o:[^>]+> → "" (全删除)

2. 二次过滤：应用标准白名单，将复杂样式转换为安全替代方案：
   • <font color="#FF0000"> → <span style="color:red">
   • <u> → <span style="text-decoration:underline">
3. 最终建议引导用户使用Markdown语法,比原生HTML更安全可控。

归纳与建议

1. 永远不要信任任何外部输入：即使来自内部系统也应做过滤
2. 优先选择成熟库：BeautifulSoup/Jsoup等经过长期测试的工具比自制正则更可靠
3. 定期更新规则库：关注OWASP Top 10中的新型攻击向量
4. 测试覆盖率要达到100%：特别测试边界条件（空标签、自闭合标签、注释等）
5. 性能权衡：对高频访问页面可采用缓存已过滤结果的策略

通过上述体系化的防护措施，可在保障用户体验的同时，将XSS攻击风险降至最低，实际部署时应结合具体业务场景调整白名单配置，并建立持续的安全