前端安全入门：5分钟学会使用DOMPurify
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
制作一个交互式学习教程，分步指导新手：1) 通过CDN和npm两种方式安装DOMPurify 2) 基本净化演示：展示危险HTML输入和净化后输出 3) 配置选项练习：允许/禁止特定标签 4) 常见问题解答。每个步骤提供可编辑的代码沙箱，实时显示净化结果。最后提供小测验验证学习效果。 - 点击'项目生成'按钮，等待项目生成完整后预览效果
最近在学前端安全，发现很多项目因为没处理用户输入导致XSS漏洞。DOMPurify这个库用起来特别顺手，今天分享一下从零开始的使用心得，适合完全没接触过的新手快速上手。
1. 两种安装方式任选
DOMPurify支持CDN和npm两种安装方式，根据项目需求选择即可。
CDN引入（适合快速测试）： 在HTML的
<head>里添加一行script标签，直接引用jsdelivr提供的CDN链接，1分钟就能开始使用。我测试发现国内访问速度也不错。npm安装（推荐正式项目）： 通过
npm install dompurify安装后，可以用import或require引入。配合打包工具使用时要注意版本兼容性，建议锁定大版本号。
2. 基础净化演示
先看个危险案例：如果直接把用户输入的<img src=x onerror=alert(1)>插入DOM，就会触发XSS攻击。
- 创建DOMPurify实例后，调用
sanitize()方法处理这段危险代码 - 对比处理前后结果：发现onerror事件被自动移除，只保留安全的img标签
- 测试发现style属性、javascript:伪协议等都会被过滤
3. 自定义配置练习
实际项目经常需要调整过滤规则，比如：
- 允许特定标签：在配置对象的
ALLOWED_TAGS数组里添加iframe等标签 - 保留特定属性：通过
ALLOWED_ATTR配置允许class或data-*属性 - 白名单配置：建议先用默认严格模式，再逐步放开必要权限
遇到需要放行富文本编辑器内容时，可以参考官方提供的MathML/SVG预设配置。
4. 常见问题排查
新手容易遇到的几个坑：
- 服务端仍需验证：前端净化不能替代服务端校验，要双重保障
- 动态内容处理：对于AJAX加载的内容，需要在插入页面前即时净化
- 性能优化：大数据量处理时，可以复用DOMPurify实例减少开销
- 版本更新：定期检查GitHub更新日志，及时修复安全补丁
5. 学习效果验证
最后可以自己动手试试： 1. 在InsCode(快马)平台创建HTML项目 2. 尝试净化包含<script>标签的字符串 3. 配置允许使用<div style="color:red">但过滤其他style属性
实际用下来发现，在InsCode上测试安全相关的代码特别方便，不用配环境就能实时看到净化效果，部署演示页面也只需要点一次按钮。对于刚接触前端安全的同学，这种即时反馈的学习方式效率很高。
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
制作一个交互式学习教程，分步指导新手：1) 通过CDN和npm两种方式安装DOMPurify 2) 基本净化演示：展示危险HTML输入和净化后输出 3) 配置选项练习：允许/禁止特定标签 4) 常见问题解答。每个步骤提供可编辑的代码沙箱，实时显示净化结果。最后提供小测验验证学习效果。 - 点击'项目生成'按钮，等待项目生成完整后预览效果
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考