React 怎么实现预防XSS 攻击的

共 2235字,需浏览 5分钟

 ·

2020-12-03 12:15

本文首发于政采云前端团队博客:浅谈 React 中的 XSS 攻击

https://www.zoo.team/article/xss-in-react


前言

前端一般会面临 XSS 这样的安全风险,但随着 React 等现代前端框架的流行,使我们在平时开发时不用太关注安全问题。以 React 为例,React 从设计层面上就具备了很好的防御 XSS 的能力。本文将以源码角度,看看 React 做了哪些事情来实现这种安全性的。

XSS 攻击是什么

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

XSS 攻击类型

反射型 XSS

  • XSS 脚本来自当前 HTTP 请求
  • 当服务器在 HTTP 请求中接收数据并将该数据拼接在 HTML 中返回时,例子:
// 某网站具有搜索功能,该功能通过 URL 参数接收用户提供的搜索词:
https://xxx.com/search?query=123
// 服务器在对此 URL 的响应中回显提供的搜索词:
<p>您搜索的是: 123p>
// 如果服务器不对数据进行转义等处理,则攻击者可以构造如下链接进行攻击:
https://xxx.com/search?query=
// 该 URL 将导致以下响应,并运行 alert('xss'):
<p>您搜索的是: <img src="" onerror ="alert('xss')">p>
// 如果有用户请求攻击者的 URL ,则攻击者提供的脚本将在用户的浏览器中执行。

存储型 XSS

  • XSS 脚本来自服务器数据库中
  • 攻击者将恶意代码提交到目标网站的数据库中,普通用户访问网站时服务器将恶意代码返回,浏览器默认执行,例子:
// 某个评论页,能查看用户评论。
// 攻击者将恶意代码当做评论提交,服务器没对数据进行转义等处理
// 评论输入:
<textarea>
  <img src="" onerror ="alert('xss')">
textarea>
// 则攻击者提供的脚本将在所有访问该评论页的用户浏览器执行

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 前都被转成了字符串,如下:

// 一段恶意代码
"" onerror ="alert('xss')"
// 转义后输出到 html 中
 

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

JSX 语法

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

// JSX
const element = (
  <h1 className="greeting">
    Hello, world!
  h1>

);
// 通过 babel 编译后的代码
const element = React.createElement(
  'h1',
  {className'greeting'},
  'Hello, world!'
);
// React.createElement() 方法返回的 ReactElement
const element = {
  $$typeofSymbol('react.element'),
  type'h1',
  keynull,
  props: {
    children'Hello, world!',
      className'greeting'   
  }
  ...
}

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

const storedData = `{
  "ref":null,
  "type":"body",
  "props":{
  "dangerouslySetInnerHTML":{
  "__html":"
浏览 23
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报