一、安装
$ 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