dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 `innerHTML` 的替换方案,用来在 JSX 中渲染 HTML 格式的字符串内容
通常来讲,使用代码直接设置 HTML 存在风险,因为很容易无意中使用户暴露于[跨站脚本(XSS)]的攻击
为了安全可以通过类似于 `dompurify` 包,来对 HTML 字符串内容进行“消毒”
步骤:1 .安装 dompurify 和 类型声明文件:npm add dompurify 和 npm add -D @types/dompurify
2.导入 dompurify 包
3.通过 dangerouslySetInnerHTML 来展示消毒后的 HTML 内容
import DOMPurify from 'dompurify'
<div
className="content-html dg-html"
dangerouslySetInnerHTML={{
+ __html: DOMPurify.sanitize(content)
}}
/>