在React项目中利用 Symbol 防止 XSS 攻击的小技巧

我们都知道,React 元素是一个 plain object:

js 复制代码
 let el = {
   type: 'marquee',
   props: {
     bgcolor: '#ffa7c4',
     children: 'hi',
   },
   key: null,
   ref: null,
   $$typeof: Symbol.for('react.element'),
 }

如果你的服务器有允许用户存储任意 JSON 对象的漏洞,而前端需要一个字符串,这可能会发生一个问题:导致潜在的安全风险

js 复制代码
 // 服务端允许用户存储 JSON
 let expectedTextButGotJSON = {
   type: 'div',
   props: {
     dangerouslySetInnerHTML: {
       __html: 'dangerous InnerHTML'
     },
   },
   // ...
 };
 let message = { text: expectedTextButGotJSON };

然后在某段 JSX 中使用了它,攻击者就可以运行我们不期望的 html 代码:

js 复制代码
 // React 0.13 中有风险
 <p>
   {message.text}
 </p>

但是 React 在之后的版本中使用了 Symbol 标记 React 元素:

js 复制代码
 let el = {
   type: 'marquee',
   props: {
     bgcolor: '#ffa7c4',
     children: 'hi',
   },
   key: null,
   ref: null,
   $$typeof: Symbol.for('react.element'),
 }

因为 JSON 不支持 Symbol 类型。所以即使服务器存在用 JSON 作为文本返回安全漏洞,JSON 里也不包含 Symbol.for('react.element')。React 会检测 element.$$typeof,如果元素丢失或者无效,会拒绝处理该元素。

相关推荐
BrendanDash36 分钟前
React 19.2 已发布,现已上线 npm!
前端·react.js
Winson℡10 小时前
React Native 中的 useCallback
javascript·react native·react.js
二狗mao20 小时前
React学习(一)描述UI
react.js
一只猪皮怪51 天前
React 18 前端最佳实践技术栈清单(2025版)
前端·react.js·前端框架
Misnice1 天前
React渲染超大的字符串
前端·javascript·react.js
带娃的IT创业者1 天前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
千叶寻-2 天前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
光影少年2 天前
react打包优化和配置优化都有哪些?
前端·react.js·掘金·金石计划
三月的一天2 天前
React单位转换系统:设计灵活的单位系统与单位系统转换方案
前端·javascript·react.js
家里有只小肥猫3 天前
react 初体验2
前端·react.js·前端框架