前端安全之CSRF攻击

CSRF定义

CSRF,即(Cross-site request forgery), 中文名为跨站请求伪造。是一种挟持用户在当前已登录的Web应用程序上执行非本意的操作的一种攻击方式。CSRF攻击的本质在于利用用户的身份，执行非本意的操作。根据CSRF的全名，可以得出的结论是：CSRF的请求是跨域且伪造的。

跨域指的是请求来源于其他网站。比如说，目标网站上的删除文章功能接收到来自其他网站的删除文章的请求，那么这个请求就是跨域的。

伪造指的是如果这个请求不是用户自身的意愿，那么这个请求就是伪造的。

简单的说，跨站请求伪造的攻击是攻击者通过一些技术手段欺骗用户的浏览器去访问用户曾经认证过的网站并执行一些操作（如发送邮件、发消息、甚至财产操作如转账和购买商品等）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去执行。这利用了web登录身份认证的一个漏洞：简单的身份认证只能保证请求来自用户的浏览器，但不能识别请求是用户自愿发出的。

CSRF分类

GET CSRF
POST CSRF

假如有这么一个场景，目标网站A的url：www.a.com。恶意网站B的url：www.b.com。

GET CSRF：

两个网站的域名不一样，目标网站A上有一个删除文章的功能，通常是用户单击’删除文章‘链接时才会删除指定的文章。这个链接是www.a.com/blog/del?id=1, id代表不同的文章。实际上就是发起一个GET请求。

如果在目标网站A上存在XSS漏洞，那么可以利用这个XSS漏洞来进行攻击。注意，XSS攻击是在用户的浏览器上进行的。如果对XSS攻击不熟悉的朋友，可以看看这篇文章。传送门：前端安全之XSS攻击

1. 使用Ajax发起一个GET请求，因为是在目标网站上，所以符合同源策略。请求参数为id=1, 请求目标地址为www.a.com/blog/del。

2. 或者在目标网站A上动态创建一个标签(script, img, iframe等)，将其src指向www.a.com/blog/del?id=1, 那么攻击就会发起。实际上通过这种方式发起的请求就是一个GET请求。

3. 最后欺骗用户登录目标网站A，那么攻击就会发生。

如果在目标网站A上不存在XSS漏洞，那么可以利用GET CSRF进行攻击

1. 无法使用Ajax发起GET请求。因为CSRF请求是跨域的，而Ajax有同源策略的限制。

2. 可以通过在恶意网站B上静态或者动态创建img,script等标签发起GET请求。将其src属性指向www.a.com/blog/del?id=1。通过标签的方式发起的请求不受同源策略的限制。

3. 最后欺骗已经登录目标网站A的用户访问恶意网站B，那么攻击就会发生。此时恶意网站B的请求是身份认证后的。

对比CSRF和XSS攻击可以看出，CSRF攻击有以下几个关键点

请求是跨域的。可以看出请求是从恶意网站B上发出的
通过img, script等标签来发起一个GET请求。因为这些标签不受同源策略的限制
发出的请求是身份认证后的。这一点是CSRF中最重要的一点。如以下代码

恶意网站B发出的删除文章的GET请求的请求头

GET /blog/del?id=1 HTTP/1.1

Host: www.a.com

* Referer: http://www.b.com/csrf.html

Connection: Keep-Alive

Cookie: name=kk

Other-Request-Name: Other-Request-Value:

目标网站A发出的删除文章的GET请求的请求头

GET /blog/del?id=1 HTTP/1.1

Host: www.a.com

* Referer: http://www.a.com/blog/

Connection: Keep-Alive

Cookie: name=kk

Other-Request-Name: Other-Request-Value:

对比以上的代码可以看出，只有Referer字段不同。也就是说，只有请求来源不相同，而发送删除文章的请求时都会带上相同的cookie信息。这样的请求就是身份认证后的，CSRF攻击就会成功。

POST CSRF：POST请求实际上就是在恶意网站B上发起一个POST请求，同样的，这个请求也是跨域和身份认证后的。如静态或动态的创建一个form表单，当用户访问到这个恶意网站B时，就会提交这个表单。

假如目标网站A上有‘写文章’的功能，那么我们就可以动态创建form标签，然后修改文章的题目。

www.b.com/csrf.html

function setForm () {

    var form = document.createElement('form')

    form.action = 'www.a.com/blog/article'

    form.methods = 'POST'

    var input = document.createElement('input')

    input.type = 'text'

    input.value = 'csfr攻击啦！'

    input.id = 'title'

    form.appendChild(input)

    document.body.appendChild(form)

    form.submit()

}

setForm()

上面代码可以看出，动态创建了form表单，然后调用submit方法。就可以通过跨域的伪造请求来实现修改目标网站A的某篇文章的标题了。

以上说了GET和POST的CSRF攻击。本质上都是欺骗用户以自己的身份去执行非本意的操作。欺骗流程大致如下

1. 首先欺骗用户登录目标网站。

2. 然后欺骗用户登录恶意网站。这种恶意的网站有很多种形式，藏身于网页中的许多地方。此外，攻击者也不需要控制放置恶意网址的网站。例如他可以将这种地址藏在论坛，博客等任何用户生成内容的网站中。这意味着如果服务器端没有合适的防御措施的话，用户即使访问熟悉的可信网站也有受攻击的危险。

CSRF危害

模拟表单提交盗取用户资金。实际上就是上面所说的POST CSRF攻击
篡改目标网站上的用户数据。
盗取用户隐私数据

CSRF防范

检测请求头中的Referer字段

从GET CSRF例子中可以看到，目标网站A和恶意网站B发出的请求中，请求头唯一的不同就是Referer字段。通常来说，Referer字段通常与Host字段的域名是一样的。

以上面删除文章功能为例，在目标网站A中的Referer字段为http://www.a.com/blog/，而恶意网站B中的Referer字段为http://www.b.com/csrf.html。所以根据Referer字段与Host字段在同一域名下的规则，可以检测Referer字段值，如果发现其与Host值不在同一域名下，这时候服务器就能够识别出恶意的访问了。

添加检验token

由于CSRF的本质在于攻击者欺骗用户去访问自己设置的地址，所以如果要求在访问敏感数据请求时，要求用户浏览器提供不保存在cookie中，并且攻击者无法伪造的数据作为校验，那么攻击者就无法再执行CSRF攻击。这种数据通常是表单中的一个数据项。服务器将其生成并附加在表单中，其内容是一个随机数。即<input type="hidden" name="_csrf_token" value="xxxx">）的形式。

当客户端通过表单提交请求时，这个随机数也一并提交上去以供校验。正常的访问时，客户端浏览器能够正确得到并传回这个随机数，而通过CSRF传来的欺骗性攻击中，攻击者无从事先得知这个随机数的值，服务器端就会因为校验token的值为空或者错误，拒绝这个可疑请求。

为了防范CSRF，在需要增删改数据时，使用POST请求，而不要使用GET请求。

具体的方案如下：

1. 服务端在收到客户端请求时，生成一个随机数，在渲染页面时将随机数埋入页面(一般埋入form表单中)，<input type="hidden" name="_csrf_token" value="xxxx">）`的形式。每次刷新页面后这个随机数都会改变，并在服务器中存储。

2. 服务端设置Set-Cookie, 把该随机数作为cookie种入用户浏览器。

3. 当用户发送GET或POST请求时带上_csrf_token参数（对于form表单直接提交即可）

4. 后台在接受到请求后解析请求头中的cookie字段，获取_csrf_token的值，然后和用户请求提交的_csrf_token值做比较。如果相等则表示请求来源是合法的。

参考资料：

1.《web前端黑客技术》

2.聊聊CSRF