dangerouslySetInnerHTML
2023年12月06日
一、认识
dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。通常来讲，使用代码直接设置 HTML 存在风险，因为很容易无意中使用户暴露于跨站脚本（XSS）的攻击。因此，你可以直接在 React 中设置 HTML，但当你想设置 dangerouslySetInnerHTML 时，需要向其传递包含 key 为 __html 的对象，以此来警示你。
二、语法
const htmlStr = "测试<a>高亮测试</a>测试"
<div dangerouslySetInnerHTML={{ __html: htmlStr }}></div>
三、问题
3.1 dangerousSetInnerHTMl 知道不？和 innerHTML 的区别？
在 React 中, 你可以使用 dangerouslySetInnerHTML 来直接设置元素的 HTML 内容, 它的命名中包含 dangerously 就已经暗示了它的风险性, 因为直接插入 HTML 可能导致 XSS（跨站脚本攻击）。dangerouslySetInnerHTML 要求你传递一个对象, 该对象必须包含一个属性 __html, 其值就是你想插入的 HTML 字符串。因为绕过了 React 的 DOM 管理机制, 直接注入 HTML, 所以它被标记为 危险。开发者需要确保插入的 HTML 是安全的, 不包含恶意代码。dangerouslySetInnerHTML 是 React 提供的 API, 需要传递一个对象 { __html: ... }, 并且只能用在 JSX 内。
传统 DOM 的 innerHTML 属性直接获取或设置元素的 HTML 内容, 同样, 直接设置 innerHTML 也存在 XSS 风险，需要开发者手动确保传入的字符串是安全的。innerHTML 是浏览器原生的 DOM 属性，直接赋值即可。