江苏龙网

  1. 主页 > 生活百科 > >

浅谈 React 中的 XSS 攻击

XSS 攻击


浅谈 React 中的 XSS 攻击

文章插图
 
【浅谈 React 中的 XSS 攻击】作者：陈吉
转发链接：https://mp.weixin.qq.com/s/HweEFh78WXLawyQr_Vsl5G
前言前端一般会面临 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>您搜索的是: 123</p>// 如果服务器不对数据进行转义等处理 ， 则攻击者可以构造如下链接进行攻击：https://xxx.com/search?query=<img src=https://www.isolves.com/it/aq/sj/2020-09-24/"empty.png" onerror ="alert('xss')">// 该 URL 将导致以下响应 ， 并运行 alert('xss')：

您搜索的是: 浅谈 React 中的 XSS 攻击

// 如果有用户请求攻击者的 URL ， 则攻击者提供的脚本将在用户的浏览器中执行 。存储行 XSS
  • XSS 脚本来自服务器数据库中
  • 攻击者将恶意代码提交到目标网站的数据库中 ， 普通用户访问网站时服务器将恶意代码返回 ， 浏览器默认执行 ， 例子：
// 某个评论页 ， 能查看用户评论 。// 攻击者将恶意代码当做评论提交 ， 服务器没对数据进行转义等处理// 评论输入：<textarea>  <img src=https://www.isolves.com/it/aq/sj/2020-09-24/"empty.png" onerror ="alert('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;    }  }


推荐阅读


上一篇：不会这些东东，不敢说你会nginx?

下一篇：正史中的关羽真有这么厉害吗 关羽是哪部作品的人物