在 React 开发中,有哪些方式可以阻止 HTML 字符串被转义并直接渲染为页面元素?
考察说明
考查对 React 中 HTML 转义机制及危险渲染 API 的理解。
回答思路
- 【回答框架 1】React 默认会对 JSX 中插入的字符串进行 HTML 转义,防止 XSS 攻击。若需直接渲染 HTML,可使用 dangerouslySetInnerHTML 属性,它接受一个对象,其中 __html 属性的值就是要渲染的 HTML 字符串。此操作会绕过 React 的转义机制,需确保 HTML 内容可信。
- 【回答框架 2】使用 dangerouslySetInnerHTML 时,React 不会对内容做任何处理,直接插入 DOM。因此必须对输入进行严格校验和消毒,例如使用 DOMPurify 等库清理脚本和事件属性,避免 XSS 漏洞。
- 【回答框架 3】在需要展示富文本或第三方 HTML 内容时,优先考虑使用受控组件库(如 quill、slate)或渲染为纯文本。若必须使用 dangerouslySetInnerHTML,应隔离不可信数据,并采用白名单过滤。
- 【回答框架 4】React 中不存在其它官方 API 可关闭转义;转义是默认安全行为,任何绕过手段都应视为高风险操作,需要在代码审查和测试中重点关注。
- 【关键点 1】dangerouslySetInnerHTML 是 React 提供的直接渲染 HTML 的接口。
- 【关键点 2】使用前需消毒 HTML 内容,推荐 DOMPurify 等工具。
- 【关键点 3】React 默认转义是安全机制,禁用需谨慎评估风险。
- 【易错点 1】误将用户输入直接传入 dangerouslySetInnerHTML 导致 XSS。
- 【易错点 2】忽略对 HTML 内容进行消毒,即使来源看似可信也可能被污染。
- 【易错点 3】认为可以简单关闭转义,实际上没有官方开关,只能通过危险 API 绕过。