前端安全之DOMPurify基础使用

ops/2025/3/18 15:03:45/

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

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

 效果举例:

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,允许或禁止特定的标签或者属性跳过净化

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>
 自定义钩子函数

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

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:

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: 协议:

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)

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

// 假设 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, 完整配置示例

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. 官方相关

  • 官方文档:DOMPurify GitHub

  • XSS 测试工具:OWASP XSS Filter Evasion Cheat Sheet


http://www.ppmy.cn/ops/166791.html

相关文章

Excel单元格中插入自定义超链接

Excel单元格中插入自定义超链接 方法一、插入静态自定义超链接 适用场景: 手动设置固定显示文本和链接地址 快捷键 Ctrl K 可显示插入超链接窗口. 方法二、适用HYPERLINK函数动态生成超链接 跳转到超链接 HYPERLINK("https://www.bilibili.com/?","CS…

专栏特辑--如何查询Essential Science Indicators (ESI)- 高被引论文--我的文章和高引文章的差距

灵感就是今天终于查询了一下高被引文章,网上对于ESI高被引的查询方法五花八门,很多都是过时的或者极为繁琐的,或者说半天都说不清楚的,现在来总结梳理一下,以备不时之需。这里只讨论高被引文章,不讨论热点(hot)文章。 所谓高被引--就是received enough citations to p…

【第K小数——可持久化权值线段树】

题目 代码 #include <bits/stdc.h> using namespace std;const int N 1e5 10;int a[N], b[N]; int n, m, len; int rt[N], idx; // idx 是点分配器struct node {int l, r;int s; } tr[N * 22];int getw(int x) {return lower_bound(b 1, b len 1, x) - b; }int bui…

Word 小黑第22套

对应大猫23 续编号&#xff08;编号断了&#xff0c;从一开始&#xff09;&#xff1a;点编号&#xff0c;再设置编号值 插入以图标方式显示的文档&#xff1a;插入 -对象 -由文件创建 &#xff08;这里要链接到文件也要勾选 不然扣一分&#xff09; 一个页面设为横向不影响上…

探索具身多模态大模型:开发、数据集和未来方向(下)

25年2月来自广东人工智能和数字经济实验室、深圳大学、巴黎理工学院和巴黎高等师范学院、中山大学的论文“Exploring Embodied Multimodal Large Models: Development, Datasets, and Future Directions”。 近年来&#xff0c;具身多模态大模型 (EMLM) 因其在复杂的现实环境中…

关于Redis的集群(上)

目录 基本概念 数据分片算法 哈希求余 ​编辑一致性哈希算法 哈希槽分区算法 搭建集群环境 创建目录和配置 编写 docker-compose.yml 启动容器 构建集群 基本概念 广义的集群&#xff0c;只要是多个机器构成了分布式系统&#xff0c;都可以成为是一个“集群”。 但…

Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现与实战指南

Spring Boot拦截器&#xff08;Interceptor&#xff09;与过滤器&#xff08;Filter&#xff09;深度解析&#xff1a;区别、实现与实战指南 一、核心概念对比 1. 本质区别 维度过滤器&#xff08;Filter&#xff09;拦截器&#xff08;Interceptor&#xff09;规范层级Serv…

SpringBoot美发门店管理系统开发与设计

在幽络源&#xff0c;我们致力于为开发者提供优质的技术资源和项目源码。今天&#xff0c;我们为大家分享一款基于SpringBoot开发的美发门店管理系统。该系统功能全面&#xff0c;操作便捷&#xff0c;适合中小型美发门店的管理需求。以下是系统的详细介绍。 系统功能模块 1.…