前端安全之DOMPurify底子利用

        DOMPurify时一款专门用于防御XSS攻击的库，通过净化HTML的内容，移除恶意脚本，同时保留安全的HTML标签和数学。以下是底子利用指南，涵盖底子的安装与用法。
1，安装DOMPurify

通过npm或yarn安装

   npm install dompurify --save
# 或
yarn add dompurify
  或通过CDN引入 

   <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.5/purify.min.js"></script>
  

---

 
 2，底子用法

常常设置在表单的提交中，或者需要根据用户改变html内容的时候，净化字符串，放置隐蔽恶意脚本

1. import DOMPurify from 'dompurify'
3. const success = await login(DOMPurify.sanitize(username.value), DOMPurify.sanitize(password.value));
4. // 在提交表单时 净化表单内容 放置恶意信息或脚本

复制代码

 效果举例：

1. DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // 变成 <img src="x">
2. DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); // 变成<svg><g></g></svg>
3. DOMPurify.sanitize('<p>abc<iframe//src=jAva&Tab;script:alert(3)>def</p>'); // 变成 <p>abc</p>
4. DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">'); // 变成  <math><mi></mi></math>
5. DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); // 变成 <table><tbody><tr><td>HELLO</td></tr></tbody></table>
6. DOMPurify.sanitize('<UL><li><A HREF=//google.com>click</UL>'); // 变成 <ul><li><a href="//google.com">click</a></li></ul>

复制代码

---

3，进阶用法

配置config，允许或禁止特定的标签或者属性跳过净化

1. const config = {
2.     ALLOWED_TAGS: ['b', 'i', 'a', 'p'],  // 只允许这些标签
3.     ALLOWED_ATTR: ['href', 'title'], // 只允许这些属性
4.     FORBID_TAGS: ['script', 'style'], // 禁止 script 和 style 标签
5.     FORBID_ATTR: ['onclick', 'onerror'] // 禁止事件属性
6. };
8. const dirtyHTML = '<b onclick="alert(1)">点击我</b>';
9. const cleanHTML = DOMPurify.sanitize(dirtyHtml, config);
11. // 输出结果： <b>点击我</b>

复制代码

 自定义钩子函数

在净化过程中插入自定义逻辑：

1. DOMPurify.addHook('beforeSanitizeElements', (node) => {
2.   // 移除所有图片的 src 属性
3.   if (node.tagName === 'IMG') {
4.     node.removeAttribute('src');
5.   }
6.   return node;
7. });
9. const dirtyHtml = '<img src="x" onerror="alert(1)">';
10. const cleanHtml = DOMPurify.sanitize(dirtyHtml); // 输出结果: <img>

复制代码

---

4. 处理特殊场景

允许 SVG 内容

默认环境下，DOMPurify 会移除 SVG 中的潜在伤害内容。若需允许 SVG：

1. const config = {
2.   USE_PROFILES: { svg: true, svgFilters: true, html: true },
3. };
5. const dirtySvg = '<svg><script>alert(1)</script></svg>';
6. const cleanSvg = DOMPurify.sanitize(dirtySvg, config); // 移除 <script> 后的安全 SVG

复制代码

净化 URL 属性（如 href/src）

防止 javascript: 协议：

1. const config = {
2.   ALLOWED_URI_REGEXP: /^(https?|ftp|mailto):/i, // 只允许 http/https/ftp/mailto
3. };
5. const dirtyLink = '<a href="javascript:alert(1)">点击</a>';
6. const cleanLink = DOMPurify.sanitize(dirtyLink, config); // href 被移除

复制代码

处理富文本编辑器（如 CKEditor、Quill）

在提交富文本内容前净化：

1. // 假设 editor 是富文本编辑器实例
2. const rawContent = editor.getHtml();
3. const cleanContent = DOMPurify.sanitize(rawContent, {
4.   ALLOWED_TAGS: ['p', 'b', 'i', 'u', 'a', 'img'],
5.   ALLOWED_ATTR: ['href', 'title', 'src', 'alt'],
6. });

复制代码

---

5. 常见问题解答

Q1：DOMPurify 能防御全部 XSS 吗？

• 不能。它重要防御 HTML 注入型 XSS，但无法处理：
  
  
  
  • URL 中的 JavaScript 协议（需共同正则校验）。
    
  • CSS 表达式（如 expression(...)）。
    
  • 非 HTML 上下文（如 JSON 注入）。
    
  
  

Q2：如那边理用户上传的 HTML 文件？

• 利用 DOMPurify 解析并净化内容，同时限制文件类型和大小。
  

Q3：DOMPurify 是否影响性能？

• 对于通例内容（如评论、文章），性能影响可忽略。
  
• 处理大型 HTML（如 10MB 以上）时，发起在服务端异步处理。
  

---

6， 完整配置示例

1. const config = {
2.   ALLOWED_TAGS: ['p', 'b', 'i', 'a', 'img', 'br'],
3.   ALLOWED_ATTR: ['href', 'title', 'src', 'alt'],
4.   FORBID_ATTR: ['style', 'class'],
5.   ALLOWED_URI_REGEXP: /^(https?|ftp):/i,
6.   FORBID_TAGS: ['script', 'iframe'],
7.   RETURN_TRUSTED_TYPE: true, // 返回 TrustedHTML 对象（支持 Trusted Types）
8. };
10. const cleanHtml = DOMPurify.sanitize(dirtyHtml, config);

复制代码

---

7. 官方相关

• 官方文档：DOMPurify GitHub
  
• XSS 测试工具：OWASP XSS Filter Evasion Cheat Sheet
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。