前端安全问题---XSS和CSRF

XSS概念

XSS又称CSS，全称CrossSiteScript，跨站脚本攻击，是Web程序中常见的漏洞，XSS属于被动式且用于客户端的攻击方式，所以容易被忽略其危害性。

XSS的攻击原理

其原理是攻击者向有 XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如，盗取用户 Cookie、破坏页面的正常结构，插入广告等恶意内容、重定向到其它网站，D-doss攻击等；XSS攻击类似于SQL注入攻击，攻击之前，我们先找到一个存在XSS漏洞的网站。理论上，所有可输入的地方没有对输入数据进行处理的话，都会存在XSS漏洞，漏洞的危害取决于攻击代码的威力。

XSS的攻击方式

• 反射型
  发出请求时，XSS代码出现在url中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码。这个过程像一次反射，所以叫反射型XSS。
• 存储型
  存储型XSS和反射型XSS的差别在于，提交的代码会存储在服务器端（数据库、内存、文件系统等），下次请求时目标页面时不用再提交XSS代码。

XSS的防范措施（encode + 过滤）

XSS的防范措施主要有三个：

• 编码：
  对用户输入的数据进行 HTML Entity 编码。
  Encode的作用是将等一些字符进行转化，使得浏览器在最终输出结果上是一样的。
• 过滤：
  移除用户输入的和事件相关的属性。如onerror可以自动触发攻击，还有onclick等。移除用户输入的Style节点、Script节点、Iframe节点。（尤其是Script节点，它可是支持跨域的呀，一定要移除）。
• 校正
  避免直接对HTML Entity进行解码。使用DOM Parse转换，校正不配对的DOM标签。

CSRF的基本概念

**CSRF（Cross-Site Request Forgery，跨站点伪造请求）**是一种网络攻击方式，该攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点，从而在未授权的情况下执行在权限保护之下的操作，具有很大的危害性。具体来讲，可以这样理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。

CSRF的攻击原理

上图中过程为如下：

1. 用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；

2. 在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；

3. 用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；

4. 网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；

5. 浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行。

用户是网站A的注册用户，且登录进去，于是网站A就给用户下发cookie。

从上图可以看出，要完成一次CSRF攻击，受害者必须满足两个必要的条件：

• 登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）
• 在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。

温馨提示一下，cookie保证了用户可以处于登录状态，但网站B其实拿不到 cookie。

CSRF如何防御

方法一、Token 验证：（用的最多）

1. 服务器发送给客户端一个token；
2. 客户端提交的表单中带着这个token。
3. 如果这个 token 不合法，那么服务器拒绝这个请求。

方法二：隐藏令牌：

把 token 隐藏在 http 的 head头中。

方法二和方法一有点像，本质上没有太大区别，只是使用方式上有区别。

方法三、Referer 验证：

Referer 指的是页面请求来源。意思是，只接受本站的请求，服务器才做响应；如果不是，就拦截。

CSRF 和 XSS 的区别

• 区别一：

CSRF：需要用户先登录网站A，获取 cookie。

XSS：不需要登录。

• 区别二：（原理的区别）

CSRF：是利用网站A本身的漏洞，去请求网站A的api。

XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容