react 项目中预防xss攻击的插件 dompurify

一、安装

$ yarn add dompurify 
$ yarn add --dev @types/dompurify 

二、使用

import DOMPurify from 'dompurify';
// 1、处理：
DOMPurify.sanitize(htmlContent)
// 2、之后放进 dangerouslySetInnerHTML 
dangerouslySetInnerHTML={{ __html: cleanHTML }} 

如：

三、异常处理

使用后，发现 svg 字符串好多 正常属性无法展示，打印出使用前后的字符串内容，放在在线对比工具里对比下，找出是哪些标签或属性被过滤，需要手动添加到允许的参数中，如：

// 将字符串经过 DOMPurify 转为可信任的内容
const safeStr = DOMPurify.sanitize(newData, {
  // 增加信任的标签
  ADD_TAGS: ['use', 'animate'],
  // 增加信任的属性
  ADD_ATTR: ['from', 'to'],
  // 增加允许设置 DATA_URI 的标签
  ADD_DATA_URI_TAGS: ['feImage'],
});

更多 DOMPurify 设置，请参考：https://www.5axxw.com/wiki/content/mi94lt