React 怎么实现预防XSS 攻击的

XSS 攻击是什么

---

Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。XSS 攻击通常指的是利用网页的漏洞，攻击者通过巧妙的方法注入 XSS 代码到网页，因为浏览器无法分辨哪些脚本是可信的，导致 XSS 脚本被执行。XSS 脚本通常能够窃取用户数据并发送到攻击者的网站，或者冒充用户，调用目标网站接口并执行攻击者指定的操作。

XSS 攻击类型

---

反射型 XSS

• XSS 脚本来自当前 HTTP 请求

• 当服务器在 HTTP 请求中接收数据并将该数据拼接在 HTML 中返回时，例子：

// 某网站具有搜索功能，该功能通过 URL 参数接收用户提供的搜索词：

https://xxx.com/search?query=123

// 服务器在对此 URL 的响应中回显提供的搜索词：

您搜索的是: 123

// 如果服务器不对数据进行转义等处理，则攻击者可以构造如下链接进行攻击：

https://xxx.com/search?query=

// 该 URL 将导致以下响应，并运行 alert(‘xss’)：

您搜索的是: 

// 如果有用户请求攻击者的 URL ，则攻击者提供的脚本将在用户的浏览器中执行。

存储型 XSS

• XSS 脚本来自服务器数据库中

• 攻击者将恶意代码提交到目标网站的数据库中，普通用户访问网站时服务器将恶意代码返回，浏览器默认执行，例子：

// 某个评论页，能查看用户评论。

// 攻击者将恶意代码当做评论提交，服务器没对数据进行转义等处理

// 评论输入：

// 则攻击者提供的脚本将在所有访问该评论页的用户浏览器执行

DOM 型 XSS

该漏洞存在于客户端代码，与服务器无关

• 类似反射型，区别在于 DOM 型 XSS 并不会和后台进行交互，前端直接将 URL 中的数据不做处理并动态插入到 HTML 中，是纯粹的前端安全问题，要做防御也只能在客户端上进行防御。

React 如何防止 XSS 攻击

---

无论使用哪种攻击方式，其本质就是将恶意代码注入到应用中，浏览器去默认执行。React 官方中提到了 React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串，因此恶意代码无法成功注入，从而有效地防止了 XSS 攻击。我们具体看下：

自动转义

React 在渲染 HTML 内容和渲染 DOM 属性时都会将 "'&<> 这几个字符进行转义，转义部分源码如下：

for (index = match.index; index < str.length; index++) {

switch (str.charCodeAt(index)) {

case 34: // "

escape = ‘"’;

break;

case 38: // &

escape = ‘&’;

break;

case 39: // ’

escape = ‘’';

break;

case 60: // <

escape = ‘<’;

break;

case 62: // >

escape = ‘>’;

break;

default:

continue;

}

}

这段代码是 React 在渲染到浏览器前进行的转义，可以看到对浏览器有特殊含义的字符都被转义了，恶意代码在渲染到 HTML 前都被转成了字符串，如下：

// 一段恶意代码

 

// 转义后输出到 html 中

<img src="empty.png" onerror ="alert('xss')">

这样就有效的防止了 XSS 攻击。

JSX 语法

JSX 实际上是一种语法糖，Babel 会把 JSX 编译成 React.createElement() 的函数调用，最终返回一个 ReactElement，以下为这几个步骤对应的代码：

// JSX

const element = (

Hello, world!

);

// 通过 babel 编译后的代码

const element = React.createElement(

‘h1’,

{className: ‘greeting’},

‘Hello, world!’

);

// React.createElement() 方法返回的 ReactElement

const element = {

$$typeof: Symbol(‘react.element’),

type: ‘h1’,

key: null,

props: {

children: ‘Hello, world!’,

className: ‘greeting’

}

…

}

我们可以看到，最终渲染的内容是在 Children 属性中，那了解了 JSX 的原理后，我们来试试能否通过构造特殊的 Children 进行 XSS 注入，来看下面一段代码：

const storedData = `{

“ref”:null,

“type”:“body”,

“props”:{

“dangerouslySetInnerHTML”:{

“__html”:“<img src=“empty.png” onerror =“alert(‘xss’)”/>”

}

}

}`;

// 转成 JSON

const parsedData = JSON.parse(storedData);

// 将数据渲染到页面

render () {

return  {parsedData} ;

}

这段代码中， 运行后会报以下错误，提示不是有效的 ReactChild

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {ref, type, props}). If you meant to render a collection of children, use an array instead.

那究竟是哪里出问题了？我们看一下 ReactElement 的源码：

const symbolFor = Symbol.for;

REACT_ELEMENT_TYPE = symbolFor(‘react.element’);

const ReactElement = function(type, key, ref, self, source, owner, props) {

const element = {

// 这个 tag 唯一标识了此为 ReactElement

$$typeof: REACT_ELEMENT_TYPE,

// 元素的内置属性

type: type,

key: key,

ref: ref,

props: props,

// 记录创建此元素的组件

_owner: owner,

};

…

return element;

}

注意到其中有个属性是 $$typeof，它是用来标记此对象是一个 ReactElement，React 在进行渲染前会通过此属性进行校验，校验不通过将会抛出上面的错误。React 利用这个属性来防止通过构造特殊的 Children 来进行的 XSS 攻击，原因是 $$typeof 是个 Symbol 类型，进行 JSON 转换后会 Symbol 值会丢失，无法在前后端进行传输。如果用户提交了特殊的 Children，也无法进行渲染，利用此特性，可以防止存储型的 XSS 攻击。

在 React 中可引起漏洞的一些写法

---

使用 dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。通常来讲，使用代码直接设置 HTML 存在风险，因为很容易使用户暴露在 XSS 攻击下，因为当使用 dangerouslySetInnerHTML 时，React 将不会对输入进行任何处理并直接渲染到 HTML 中，如果攻击者在 dangerouslySetInnerHTML 传入了恶意代码，那么浏览器将会运行恶意代码。看下源码：

function getNonChildrenInnerMarkup(props) {

const innerHTML = props.dangerouslySetInnerHTML; // 有dangerouslySetInnerHTML属性，会不经转义就渲染__html的内容

if (innerHTML != null) {

if (innerHTML.__html != null) {

return innerHTML.__html;

}

} else {

const content = props.children;

if (typeof content === ‘string’ || typeof content === ‘number’) {

return escapeTextForBrowser(content);

}

}

return null;

}
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

后记

---

总结一下这三次面试下来我的经验是：

1. 一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！

2. 代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！

3. 尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！

4. 多刷面经！

我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】即可获取。祝大家早日拿到自己心怡的工作！

篇幅有限，仅展示部分内容

中表现自己知识的深度与广度，让面试官发现你的闪光点！

4. 多刷面经！

我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】即可获取。祝大家早日拿到自己心怡的工作！

篇幅有限，仅展示部分内容