前端安全之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内容的时候,净化字符串,放置隐藏恶意脚本

javascript 复制代码
import DOMPurify from 'dompurify'

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

效果举例:

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

3,进阶用法

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

javascript 复制代码
const config = {
    ALLOWED_TAGS: ['b', 'i', 'a', 'p'],  // 只允许这些标签
    ALLOWED_ATTR: ['href', 'title'], // 只允许这些属性
    FORBID_TAGS: ['script', 'style'], // 禁止 script 和 style 标签
    FORBID_ATTR: ['onclick', 'onerror'] // 禁止事件属性
};

const dirtyHTML = '<b onclick="alert(1)">点击我</b>';
const cleanHTML = DOMPurify.sanitize(dirtyHtml, config);

// 输出结果: <b>点击我</b>
自定义钩子函数

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

javascript 复制代码
DOMPurify.addHook('beforeSanitizeElements', (node) => {
  // 移除所有图片的 src 属性
  if (node.tagName === 'IMG') {
    node.removeAttribute('src');
  }
  return node;
});

const dirtyHtml = '<img src="x" onerror="alert(1)">';
const cleanHtml = DOMPurify.sanitize(dirtyHtml); // 输出结果: <img>

4. 处理特殊场景

允许 SVG 内容

默认情况下,DOMPurify 会移除 SVG 中的潜在危险内容。若需允许 SVG:

javascript 复制代码
const config = {
  USE_PROFILES: { svg: true, svgFilters: true, html: true },
};

const dirtySvg = '<svg><script>alert(1)</script></svg>';
const cleanSvg = DOMPurify.sanitize(dirtySvg, config); // 移除 <script> 后的安全 SVG
净化 URL 属性(如 href/src)

防止 javascript: 协议:

javascript 复制代码
const config = {
  ALLOWED_URI_REGEXP: /^(https?|ftp|mailto):/i, // 只允许 http/https/ftp/mailto
};

const dirtyLink = '<a href="javascript:alert(1)">点击</a>';
const cleanLink = DOMPurify.sanitize(dirtyLink, config); // href 被移除
处理富文本编辑器(如 CKEditor、Quill)

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

javascript 复制代码
// 假设 editor 是富文本编辑器实例
const rawContent = editor.getHtml();
const cleanContent = DOMPurify.sanitize(rawContent, {
  ALLOWED_TAGS: ['p', 'b', 'i', 'u', 'a', 'img'],
  ALLOWED_ATTR: ['href', 'title', 'src', 'alt'],
});

5. 常见问题解答

Q1:DOMPurify 能防御所有 XSS 吗?

  • 不能。它主要防御 HTML 注入型 XSS,但无法处理:

    • URL 中的 JavaScript 协议(需配合正则校验)。

    • CSS 表达式(如 expression(...))。

    • 非 HTML 上下文(如 JSON 注入)。

Q2:如何处理用户上传的 HTML 文件?

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

Q3:DOMPurify 是否影响性能?

  • 对于常规内容(如评论、文章),性能影响可忽略。

  • 处理大型 HTML(如 10MB 以上)时,建议在服务端异步处理。


6, 完整配置示例

javascript 复制代码
const config = {
  ALLOWED_TAGS: ['p', 'b', 'i', 'a', 'img', 'br'],
  ALLOWED_ATTR: ['href', 'title', 'src', 'alt'],
  FORBID_ATTR: ['style', 'class'],
  ALLOWED_URI_REGEXP: /^(https?|ftp):/i,
  FORBID_TAGS: ['script', 'iframe'],
  RETURN_TRUSTED_TYPE: true, // 返回 TrustedHTML 对象(支持 Trusted Types)
};

const cleanHtml = DOMPurify.sanitize(dirtyHtml, config);

7. 官方相关

相关推荐
拾光拾趣录7 分钟前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
还是奇怪7 分钟前
深入解析三大Web安全威胁:文件上传漏洞、SQL注入漏洞与WebShell
sql·安全·web安全
拾光拾趣录27 分钟前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区38 分钟前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠1 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路2 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9492 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8682 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie2 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端