在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,如果元素丢失或者无效,会拒绝处理该元素。

相关推荐
OEC小胖胖5 小时前
【React 设计模式】受控与非受控:解构 React 组件设计的核心模式
前端·react.js·设计模式·前端框架·web
水煮白菜王16 小时前
从零搭建 React 工程化项目
前端·javascript·react.js
会飞的鱼先生16 小时前
react的基本使用
前端·react.js·前端框架
无羡仙1 天前
虚拟列表:怎么显示大量数据不卡
前端·react.js
萌萌哒草头将军1 天前
字节也在用的 @tanstack/react-query 到底有多好用!🔥🔥🔥
前端·javascript·react.js
Duck不必1 天前
从零到一:现代化 React 组件库搭建指南
react.js·前端框架
Python私教1 天前
yggjs_react使用教程 v0.1.1
前端·react.js·前端框架
小鸡脚来咯1 天前
react速成
前端·javascript·react.js
剽悍一小兔1 天前
React15.x版本 子组件调用父组件的方法,从props中拿的,这个方法里面有个setState,结果调用报错
前端·javascript·react.js
柯南二号1 天前
【前端】React回调函数解析
前端·react.js·前端框架