XSS攻击 - 不要再硬背了

XSS攻击是所有程序员都知道的一件事，它也是前后端面试的一个常考点。也正如标题所说，很多人在背它，为什么要背它？这点我深有感悟，最近我突破了那个key，所以我想将它分享出来。

XSS攻击，其实都是利用浏览器漏洞来执行恶意脚本，以此来对用户造成伤害的一种攻击种类。有人会思考“浏览器漏洞”？似乎很近又很远。

渲染HTML内容，你说它算是漏洞吗？对攻击者来说它是漏洞，对用户来说它就不是漏洞，如果没有GUI，我们可能还停留在报纸时代。

URL，你说它算是漏洞吗？没有它，我们可能会用专门的一个小本来记录各资源与IP之间的映射关系。所以它对使用者来说就不是漏洞。但是对攻击者来说，它就可以算是一个漏洞，攻击者会千方百计的让你点链接，甚至是自动帮你点链接这都是很可能会存在的事情。

所以上面就是我对“漏洞”的理解，说来也是奇怪，不知道从什么时候开始，我看事物的
方式，都会存在正反的自我博弈。

那么接下来，我将介绍下常见的XSS攻击类型。

存储型攻击

将恶意脚本存储在数据库中，当用户访问该网站时，恶意脚本会被加载和执行，它会对访问该网站的所有用户造成影响。

恶意脚本是如何被加载和执行的呢？从前端的技术层面看，2种方式，一种是服务端渲染，一种前后端分离，并且应用的还是老版本的VUE框架或者 React框架。

我们知道的案例，网上呼声最高的应该就是“用户的评论”渲染问题。服务端渲染更容易被侵入，下面我们来举个例子：

video文件内容如下：

var express = require('express');
var router = express.Router();/* GET home page. */
router.get('/', (req, res, next) => {res.send(`<!DOCTYPE html><html><head><meta charset="utf-8" /><title>访问视频的页面</title></head><body><div>hello video</div><script>alert('这是一个恶意弹窗')</script></body></html>`);
});module.exports = router;

express搭建的服务器的首页注册video路由：

var videoRouter = require('./routes/video');app.use('/video', videoRouter);

当我们尝试访问/video的时候，页面会提示“这是一个恶意弹窗”的弹窗。表示用户被攻击了。

在这里插入图片描述

在前后端分离的项目里，只要是可以渲染html代码的API，存储型的XSS攻击都是可以生效的。

VUE里提供了一个v-html的指令。

React提供了一个dangerouslySetInnerHTML属性可以渲染html。这个属性在最新的
React18版本中被增强了。它默认会对script脚本进行转义。

所以，总结一下存储型XSS的攻击过程：

用户在输入框里输入html代码，前后端都没做转义，所以数据库中存储了字符串类型的js脚本或html代码。
如果是服务端渲染，前端拿到最新的数据（可能是字符串化的js脚本或html代码），因为前后端都没判断数据的合法性，所以前端将它拼接到html文件中，浏览器收到响应后，直接渲染页面，造成用户被攻击。
如果是前后端分离的项目了，前端使用了可以渲染html代码的方法，直接将数据渲染到页面上，导致页面渲染失败，攻击生效。

反射型攻击

它的攻击方式分为2类：

一类是攻击者将恶意脚本注入到URL参数中，通过各种手段诱导用户点击链接，当用户访问他们的链接时，恶意脚本也就被执行了。

一类是如果页面中，有一些内容是直接渲染URL的参数，并且此时渲染的方法是v-html这类的API，那么恶意脚本也会被执行。

这里有小伙伴会问，我即使点击了链接，对用户有什么影响？那小编就来细细的说一下。

攻击者可以利用恶意的URL，跳转到第三方网站。比如跳转到各种病毒网站。
攻击者可以构造出参数为恶意的script脚本的URL，当用户访问时，就会被攻击。比如，script脚本里有清空body元素的代码，这会让网站白屏。
如果某些银行公司的开发直接将用户的信息以明文的方式存储在localStorage、cookie中，那么，攻击者就可以通过通过script脚本获取到用户的信息，比如：姓名、手机号、登录凭证等。