XSS和CSRF详解与防护

开年遇到的第一个问题就是解决XSS攻击>_<,可见要时刻保证网站的安全性相当重要。作好网站安全，不只维护网站的稳定性，更保证用户数据的一致性。对此，总结一下笔者在工做中遇到的安全问题以及防护方法。

前端中常见的两种网站应用安全漏洞攻击的方式是 XSS 与 CSRF,本文详细介绍两种攻击方式的概念、原理以及防护方式。

XSS

XSS(Cross-site scripting)跨站脚本攻击是恶意用户在网站中注入的脚本，当正经常使用户打开网站时受到影响并可能获取用户cookie等信息一种安全攻击行为。常见的例子是用户进入某个网站的时候一直弹出alert框等。
常见的 XSS 方式分为两类：持久性和非持久性，也有机构将其分为传统型(由服务器端代码缺陷引发)和基于 DOM 型（有客户端引发）。下面介绍三种类型：

• 反射型 反射型跨站脚本攻击最多见的方式是客户端输入查询信息，服务器端将其返回而且显示在页面上形成攻击。如直出页面，后面根据参数查询返回对应的查询信息和结果。或者用户在input输入框中进行查询等,值得注意的是，使用 innerHTML 插入 <script>alert(document.cooke)</script 并不会执行 script 中的代码，须要构造对应事件触发。如： <img src="xxx.jpg" width="0" height="0" border="0" onload="javascript:alert(document.cookie);">
• 存储型存储型与反射型 XSS 攻击的区别在因而否存储在数据库中，如用户写博客和评论等，这种方式的影响是持久的。
• 基于 DOM恶意用户构造的脚本并不会通过服务器端，彻底发生在客服端，如经过连接（?userName=<img onload="javascript:alert(document.cookie)"/>）的查询参数来显示用户名等。

针对 XSS 攻击，常常有如下两个方式来进行防护：

• 设置重要的cookie信息为 httpOnly 对于重要的 cookie字段，如：能够经过 cookie 某个字段和某个接口获取好友关系的，须要将其设置为 httpOnly,使得恶意用户没法获取。
• 对输入进行检测和转义 对用户输入的或者从连接获取参数须要展现到页面中须要校验合法性和使用转义函数进行转义，如常见的函数以下：

function escHTML(str) {
    if (!str) return '';
    return str.replace(/&/g, '&')
              .replace(/</g, '&lt;')
              .replace(/>/g, '&gt;')
              .replace(/x27/g, '&#039;')
              .replace(/x22/g,'&quto;');
}

CSRF

CSRF(Cross-site request forgery)是一种攻击，迫使用户在受信任网站上执行不须要的一些操做。具体过程以下：

1. 用户向信任站点如example.com发送请求
2. 用户验证经过、得到信任站点的身份信息，并放入cookie中，用户此时能够在站内进行其余请求;
3. 用户未退出登陆example.com,而后访问hack.com网站，该网站返回攻击性代码而且在页面中存在访问example.com的请求;
4. 浏览器在用户可能不知情的状况下向example.com发送请求;
5. 因为同域名能够带上cookie信息，所以信息认证经过，请求伪形成。

针对 CSRF 攻击，经常使用的防护方式以下：

• 检测请求来源 在请求头中有一个refree字段，refree记录了发送请求的域名，好比：hack.com向example.com中发送请求，那么refree就为hack.com，只要在处理请求中作相应的校验就能够中断请求。
• 加入token校验 crsf之因此可以伪造请求成功，其缘由之一在于全部的用户信息放于cookie中；所以能够在每次请求中加入token，而后后台进行校验，若是校验经过则进行处理。生成token方式之一以下：

function getToken (token) {
    var str = token || '';
    var hash = 5381;
    for (var i = 0, len = str.length; i < len; ++i) {
        hash += (hash << 5) + str.charCodeAt(i);
    }
    return hash & 0x7fffffff;
}

具体攻击示例点击查看