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

相关推荐
举个栗子dhy3 分钟前
第四章、路由配置
前端·javascript·react.js
im_AMBER11 分钟前
React 03
前端·笔记·学习·react.js·前端框架·react
.生产的驴3 小时前
React 集成Redux数据状态管理 数据共享 全局共享
前端·javascript·react.js·前端框架·css3·html5·safari
@PHARAOH13 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
举个栗子dhy17 小时前
第二章、全局配置项目主题色(主题切换+跟随系统)
前端·javascript·react.js
举个栗子dhy18 小时前
第一章、React + TypeScript + Webpack项目构建
前端·javascript·react.js
半生过往21 小时前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
天蓝色的鱼鱼1 天前
React 19 发布一年后:对比 React 18,带来了哪些惊喜与变革
前端·react.js
Dontla1 天前
React useCallback介绍(用来缓存函数的引用,避免每次渲染都重新创建函数)主要用于性能优化
react.js·缓存·性能优化
AI智能研究院2 天前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js