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

相关推荐
半个烧饼不加肉7 小时前
React + ts + react-webcam + CamSplitter 实现虚拟摄像头解决win摄像头独占的问题
前端·react.js·前端框架
小喷友9 小时前
第 6 章:API 路由(后端能力)
前端·react.js·next.js
代码的余温10 小时前
React核心:组件化与虚拟DOM揭秘
前端·react.js·前端框架
小螺号dididi吹10 小时前
【React】状态管理
前端·javascript·react.js
代码的余温11 小时前
React Refs:直接操作DOM的终极指南
前端·javascript·react.js
前端小咸鱼一条14 小时前
React组件化的封装
前端·javascript·react.js
南方kenny15 小时前
TypeScript + React:让前端开发更可靠的黄金组合
前端·react.js·typescript
CF14年老兵16 小时前
✅ Next.js 渲染速查表
前端·react.js·next.js
dyb16 小时前
开箱即用的Next.js SSR企业级开发模板
前端·react.js·next.js
zzywxc78717 小时前
在处理大数据列表渲染时,React 虚拟列表是提升性能的关键技术,但在实际实现中常遇到渲染抖动和滚动定位偏移等问题。
前端·javascript·人工智能·深度学习·react.js·重构·ecmascript