web前端安全之XSS和CSRF

前言：昨天我终于弄明白了（一点点）Generator和async，但是还是对如何自己写一个promise云里雾里的，决定先记一下思路，手撕一个简单版的就行。有时间多看几个博客和规范。
今天的主要写博客任务就是搞明白XSS、CRSF攻击及其防御手段

XSS

概念

XSS
XSS攻击全称是跨站脚本攻击（Cross Site Scripting）
跨站脚本攻击是一钟常见的web应用计算机安全漏洞，攻击者往web页面里嵌入恶意的客户端脚本，当用户浏览此网页时，脚本就会在用户的浏览器上执行，从而达到攻击者的目的。比如获取用于的cookie，导航到恶意网站、携带木马等。
大部分的XSS漏洞都是由于没有处理好用户的输入，导致恶意脚本在浏览器中执行，任何输入提交数据的地方否有可能存在XSS。
例如一个评论功能，在提交评论的表单里面：
<input type=“text” name=“content” value=“评论内容” >
正常情况下，用户填入评论内容提交，服务端将评论内容保存到数据库，其他用户查看评论时，从后台提供的接口中取出数据展示。非正常情况下，恶意攻击者在 value 中填写恶意代码。
分类
分为反射型和持久型

常见的攻击方法

1. 绕过 XSS-Filter，利用 <> 标签注入 Html/JavaScript 代码；
2. 利用 HTML 标签的属性值进行 XSS 攻击。例如：<img src=“javascript:alert(‘xss’)”/>；（当然并不是所有的 Web 浏览器都支持 Javascript 伪协议，所以此类 XSS 攻击具有一定的局限性）
3. 空格、回车和 Tab。如果 XSS Filter 仅仅将敏感的输入字符列入黑名单，比如 javascript，用户可以利用空格、回车和 Tab 键来绕过过滤，例如：<img src=“javas cript:alert(/xss/);”/>；
4. 利用事件来执行跨站脚本。例如：<img src=“#” οnerrοr= “alert(1)”/>，当 src 错误的视乎就会执行 onerror 事件；
5. 利用 CSS 跨站。例如：body {backgrund-image: url(“javascript:alert(‘xss’)”)}；
6. 利用字符编码，通过这种技巧，不仅能让 XSS 代码绕过服务端的过滤，还能更好地隐藏 Shellcode；（ JS 支持 unicode、eacapes、十六进制、十进制等编码形式）；
7. DOM 型的 XSS 主要是由客户端的脚本通过 DOM 动态地输出数据到页面上，它不依赖于提交数据到服务器，而是从客户端获得DOM中的数据在本地执行。容易导致 DOM 型的 XSS 的输入源包括：Document.URL、Location(.pathname|.href|.search|.hash)、Document.referrer、Window.name、Document.cookie、localStorage/globalStorage；

XSS的防御

由以上可知，XSS漏洞是由于对用户提交数据没有经过严格的过滤处理造成的，所以防御的原则就是不相信用户输入的数据，对其进行过滤，对输出进行编码

(1) 使用XSS Filter
针对用户提交的数据进行有效的验证，只接受规定的长度或内容的提交，过滤掉其他的输入内容，比如

• 表单数据指定类型
• 过滤或移除特殊的html标签，<script><iframe>
• 过滤js事件的标签：onclick/onerror/onfocus

（2）html实体

当需要往 HTML 标签之间插入不可信数据的时候，首先要做的就是对不可信数据进行 HTML Entity 编码，在 html 中有些字符对于 HTML 来说是具有特殊意义的，所以这些特殊字符不允许在文本中直接使用，需要使用实体字符。 html 实体的存在是导致 XSS 漏洞的主要原因之一，因此我们需要将实体转化为相应的实体编号。
（3）JavaScript编码
**这条原则主要针对动态生成的JavaScript代码，这包括脚本部分以及HTML标签的事件处理属性（如onerror, onload等）。在往JavaScript代码里插入数据的时候，只有一种情况是安全的，那就是对不可信数据进行JavaScript编码，并且只把这些数据放到使用引号包围起来的值部分（data value）之中，除了上面的那些转义之外，还要附加上下面的转义：
\ 转成 \

/ 转成 /
（4）http only cookie

许多 XSS 攻击的目的就是为了获取用户的 cookie，将重要的 cookie 标记为 http only，这样的话当浏览器向服务端发起请求时就会带上 cookie 字段，但是在脚本中却不能访问 cookie，这样就避免了 XSS 攻击利用 js 的 document.cookie获取 cookie

CSRF

概念

CSRF
CSRF攻击是跨站请求伪造（Cross-site request forgery）也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF

攻击原理
CSRF攻击原理及过程如下：

1. 用户c打开浏览器，访问受信任的网站A，输入用户名和密码请求登录网站A
2. 在用户信息通过验证后，网站A产生cookie信息并返回给浏览器，此时用户登录A成功，可以正常发送请求
3. 用户未退出A之前，在同一浏览器中，打开一个TAB页访问网站B
4. 网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A
5. 浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行
   攻击实例

受害者 Bob 在银行有一笔存款，通过对银行的网站发送请求 http://bank.example/withdraw?account=bob&amount=1000000&for=bob2 可以使 Bob 把 1000000 的存款转到 bob2 的账号下。通常情况下，该请求发送到网站后，服务器会先验证该请求是否来自一个合法的 session，并且该 session 的用户 Bob 已经成功登陆。

黑客 Mallory 自己在该银行也有账户，他知道上文中的 URL 可以把钱进行转帐操作。Mallory 可以自己发送一个请求给银行：http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory。但是这个请求来自 Mallory 而非 Bob，他不能通过安全认证，因此该请求不会起作用。

这时，Mallory 想到使用 CSRF 的攻击方式，他先自己做一个网站，在网站中放入如下代码： src=”http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory ”，并且通过广告等诱使 Bob 来访问他的网站。当 Bob 访问该网站时，上述 url 就会从 Bob 的浏览器发向银行，而这个请求会附带 Bob 浏览器中的 cookie 一起发向银行服务器。大多数情况下，该请求会失败，因为他要求 Bob 的认证信息。但是，如果 Bob 当时恰巧刚访问他的银行后不久，他的浏览器与银行网站之间的 session 尚未过期，浏览器的 cookie 之中含有 Bob 的认证信息。这时，悲剧发生了，这个 url 请求就会得到响应，钱将从 Bob 的账号转移到 Mallory 的账号，而 Bob 当时毫不知情。等以后 Bob 发现账户钱少了，即使他去银行查询日志，他也只能发现确实有一个来自于他本人的合法请求转移了资金，没有任何被攻击的痕迹。而 Mallory 则可以拿到钱后逍遥法外

CSRF漏洞检测

检测CRSF漏洞是一项比较繁琐的工作，最简单的方法就是抓取一个正常请求的数据包，去掉Referer字段后重新提交，如果该提交还有效，那么基本上可以确定存在CSRF漏洞。

随着对CSRF漏洞研究的不断深入，不断涌现出一些专门针对CSRF漏洞进行检测的工具，如CSRFTester，CSRF Request Builder等。

以CSRFTester工具为例，CSRF漏洞检测工具的测试原理如下：使用CSRFTester进行测试时，首先需要抓取我们在浏览器中访问过的所有链接以及所有的表单等信息，然后通过在CSRFTester中修改相应的表单等信息，重新提交，这相当于一次伪造客户端请求。如果修改后的测试请求成功被网站服务器接受，则说明存在CSRF漏洞，当然此款工具也可以被用来进行CSRF攻击

防御CSRF攻击

目前防御 CSRF 攻击主要有三种策略：

• 验证 HTTP Referer 字段；
• 在请求地址中添加 token 并验证；
• 在 HTTP 头中自定义属性并验证。

验证Referer字段

根据 HTTP 协议，在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。在通常情况下，访问一个安全受限页面的请求来自于同一个网站，比如需要访问 http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory，用户必须先登陆 bank.example，然后通过点击页面上的按钮来触发转账事件。这时，该转帐请求的 Referer 值就会是转账按钮所在的页面的 URL，通常是以 bank.example 域名开头的地址。而如果黑客要对银行网站实施 CSRF 攻击，他只能在他自己的网站构造请求，当用户通过黑客的网站发送请求到银行时，该请求的 Referer 是指向黑客自己的网站。因此，要防御 CSRF 攻击，银行网站只需要对于每一个转账请求验证其 Referer 值，如果是以 bank.example 开头的域名，则说明该请求是来自银行网站自己的请求，是合法的。如果 Referer 是其他网站的话，则有可能是黑客的 CSRF 攻击，拒绝该请求。
（缺点是之前的浏览器可以篡改referer值，然后用户也可以为了保护隐私而不提供referer值）

请求地址中加token并验证

CSRF攻击之所以可以成功，是因为黑客可以完全伪造用户请求，该请求中所有的用户验证信息都在cookie中，黑客可以在不知道验证信息的情况下直接利用用户的cookie来通过安全验证。要抵御 CSRF，关键在于在请求中放入黑客所不能伪造的信息，并且该信息不存在于 cookie 之中。可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。
这种方法比检查Referer要安全一些。
token可以在用户登录后产生并存放与session之中，然后在每次请求的时候把token从session中拿出来，与请求的token进行对比，但这种方法的难点在于如何把 token 以参数的形式加入请求。对于 GET 请求，token 将附在请求地址之后，这样 URL 就变成 http://url?csrftoken=tokenvalue。 而对于 POST 请求来说，要在 form 的最后加上 <input type=”hidden” name=”csrftoken” value=”tokenvalue”/>，这样就把 token 以参数的形式加入请求了。但是，在一个网站中，可以接受请求的地方非常多，要对于每一个请求都加上 token 是很麻烦的，并且很容易漏掉，通常使用的方法就是在每次页面加载时，使用 javascript 遍历整个 dom 树，对于 dom 中所有的 a 和 form 标签后加入 token。这样可以解决大部分的请求，但是对于在页面加载之后动态生成的 html 代码，这种方法就没有作用，还需要程序员在编码时手动添加 token。
该方法还有一个缺点是难以保证 token 本身的安全。特别是在一些论坛之类支持用户自己发表内容的网站，黑客可以在上面发布自己个人网站的地址。由于系统也会在这个地址后面加上 token，黑客可以在自己的网站上得到这个 token，并马上就可以发动 CSRF 攻击。为了避免这一点，系统可以在添加 token 的时候增加一个判断，如果这个链接是链到自己本站的，就在后面添加 token，如果是通向外网则不加。

HTTP头中自定义属性并验证

这种方法也是使用 token 并进行验证，和上一种方法不同的是，这里并不是把 token 以参数的形式置于 HTTP 请求之中，而是把它放到 HTTP 头中自定义的属性里。通过 XMLHttpRequest 这个类，可以一次性给所有该类请求加上 csrftoken 这个 HTTP 头属性，并把 token 值放入其中。这样解决了上种方法在请求中加入 token 的不便，同时，通过 XMLHttpRequest 请求的地址不会被记录到浏览器的地址栏，也不用担心 token 会透过 Referer 泄露到其他网站中去。
然而这种方法的局限性非常大。XMLHttpRequest 请求通常用于 Ajax 方法中对于页面局部的异步刷新，并非所有的请求都适合用这个类来发起，而且通过该类请求得到的页面不能被浏览器所记录下，从而进行前进，后退，刷新，收藏等操作，给用户带来不便。

参考文献

XSS及CSRF攻击防御
浅析XSS和CSRF攻击及防御