前端/移动开发面试题更新 2026-08-05

在 React 开发中,有哪些方式可以阻止 HTML 字符串被转义并直接渲染为页面元素?

前端/移动开发安全意识技术原理React

考察说明

考查对 React 中 HTML 转义机制及危险渲染 API 的理解。

回答思路

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