Web前端安全之跨站脚本攻击实战

Web前端安全之跨站脚本攻击(XSS)实战

本人入职后即加入公司的某个内部项目开发，在开发的过程中，本人发现，可能是内部项目的原因，不管是前端研发人员还是后端研发人员，对项目的安全性都很不重视。直至QA阶段，QA人员也没指出项目中的安全性BUG。本人选择几个简单的跨站脚本攻击(XSS)bug点测试，说明一下前端（当然也包括后端）开发中，保证Web安全的重要性。

一、概述

在前端开发中，会有很多表单提交的地方，在表单中，存在很多用户可以输入的地方，最常见的是input输入框，用户的输入内容会提交到后端的数据库，这些内容随后可能会在前端页面的的某些地方展示出来（想像一下留言板）。对于一个普通用户，其输入的内容一般都是合法的，不会去故意输入一些特别的字符，特别是前端Javascript字符。但是，当普通用户误输入、或者是黑客故意输入非法字符时，这些字符如果不进行处理，直接提交到后端数据库，当这条提交的信息以某种形式再次显示在页面时，可能会起到意想不到的后果，轻则导致页面错乱，重则到这整个站点被黑。本文选取该项目几个简单的实际例子，来说明XSS的危害以及Web安全的重要。

二、跨站脚本攻击（XSS）

跨站脚本攻击的概念这里就不再赘述了，这里简单说一下，跨站脚本攻击主要分为反射型和存储型。相较于存储型，反射型的危害会小一些。反射型XSS在很多站点的搜索入口都会存在，本人发现的第一个反射型XSS就是在某网站的首页搜索框。反射型XSS一般只会对攻击者自身所看到的网页产生效果，不会影响其他浏览同一网页的用户。与反射型XSS不同，存储型XSS由于用户的输入内容被存储到数据库中，当不同的用户请求该页面时，该XSS脚本会嵌入在这个页面影响所有访问这个页面的用户。下面以几个实例来演示一下。

三、XSS实例1——破坏网页结构

最弱最弱的XSS可能产生的效果就是破坏网页结构，下面测试一下：

在该项目中，有个可以让用户输入项目名称和项目描述的地方，如下：

当输入名称和备注保存之后，再次选中名称会进入该页面，并显示该项目的名称和备注，这是项目中非常常见的一种场景。测试时，我们输入非正常字符（实际上包含一段JS脚本），再次进入该项目，我们发现页面成功弹出了“xss”字样。如图：

可以看到我们输入的脚本竟然成功执行了，来看看现在的页面结构，如图：

可以看到，由于JS语句成功执行，JS后面的html语句没有任何意义，所以他们以文本的形式输出了。网页结构被破坏了，任何访问此页面的人都会被莫名其妙的弹出两次xss,然后看到这个莫名其妙的破网页。尽管很难看，但其实这已经是XSS造成的最低最低的危害了。

三、XSS实例2——盗取用户cookie

XSS的破坏远不止破坏网页结构，我们关注的重点也根本不是网页结构被破坏这件事，我们关注的是，JS脚本语句竟然执行了。这意味着什么呢？意味着别有用心的人或黑客可以输入一段非法脚本，然后这段脚本可以在所有访问该网页的用户的浏览器中被执行，既然能执行脚本，那意味着也可以用document.cookie获取用户的cookie,而我们知道用户的cookie对于跟踪用户状态（登录等等）是至关重要的。而这些黑客并不会傻子般得在用户的页面弹出一个xss或者破坏页面结构，它会静悄悄的让脚本在页面中执行。关于实例一中的XSS漏洞，由于我没有进一步的去测试盗取cookie,所以我以该项目下的另外一个XSS漏洞做演示。如图：

上图是该项目中的另外一个XSS漏洞点，和实例一类似。这次我们不是仅仅弹出一个xss框而已，这次我们要做的是，获取访问该页面的任何用户的cookie，并把它传给我们自己的服务器上去，这样我们可以利用这些cookie。我们输入的脚本如下：

获取cookie的方式很简单，直接document.cookie，我们这里获取之后用jquery（根据站点实际情况，也可以使用原生ajax）ajax将获取到的cookie发送到我们自己的服务器，这里，由于当前站点与服务器站点可能存在跨域限制，我们采用了jsonp方式实现跨域发送。PHP代码很简单，就是接受cookie然后存到某个位置，这里我们直接存到了服务器所在的某云平台日志里，如图：

随后我们查看云平台的日志，只要有用户访问该页面，它就会拿到该用户的cookie。部分日志如下：

拿到的Cookie中有一个SESSION_ID字段，我们可以通过这个ID，在不登录的情况下，访问后端需要登录授权的接口，PHP脚本如下：

得到的结果如下：

我们成功的拿到了某个接口的数据。

获取cookie已经可以算作到了一个很有威胁的地步了，它不仅影响当前网页，可能还会影响整个站点，后续还可以完成更多可怕的事情。

四、其它XSS

前面说的XSS漏洞是在咱们公司的内部项目，事实上，在市面上其它有些公司的某些网站也会存在很明显的XSS漏洞。现在举几个例子：

1、某BBS反射型XSS

本人在2016年4月测试时发现该论坛搜索框有个反射型XSS漏洞，如下：

今天写这篇文章的时候再次上去看看，发现矮油，该论坛改版了，但是！！！这个搜索框的XSS漏洞还是没有修复。如下：

虽然反射型XSS几乎对网站没有任何危害，但是个人认为还是避免一下比较好。

2、某网站留言板存储型XSS

同样以16年4月某高校图书馆的一个例子为例，该留言板长下面这个样子，

这个留言板表单的很多地方对用户输入都没有过滤，用户的留言会进入数据库，当用户查看留言列表时，这条留言会从数据库中拉出来，放到网页之后他就执行了！！如下：

这里只是用一个a标签进行了测试，实际上输入一段脚本也会执行。这个漏洞貌似今天仍然存在。存储型的XSS漏洞是比较严重的，需要严加防范！

五、结论

XSS实际上是前端开发中遇到的一个很普遍很普遍的一个问题，一方面，前端开发人员应该采用有效的防御手段（XSS Filters等）来进行防范，另一方面，由于前端是不可信的，前端是可以被绕过的，所以最终的防御还得依靠后端进行转义、过滤等等行为才能确保Web应用较好的安全性。