CSRF

CSRF 介绍

CSRF攻击就是，跨站请求伪造攻击，它的实现思路就是，通过一些手段去挟持用户在当前已登陆的Web应用程序上执行非本意的操作的攻击方式

image

即通过一些技术手段去欺骗用户浏览器去访问一个用户曾经登陆过获得授权的网站，并执行一些危险的操作。由于浏览器曾经认证过，所以被访问网站会认为是真正的用户在请求访问。

其实本质就是：简单的身份验证，只能保证请求来自用户浏览器，而不能确保该行为是用户自愿执行的。

下面就介绍一些防范措施

CSRF 如何防御

1. 检查 Refresh 字段

检查Refresh字段的这种解决办法，是基于它本身就是HTTP请求头中的一个字段。在处理铭感数据请求的时候，该字段一般携带的值应该是和请求的地址位于同一域名下

Referer 可以告诉服务器，当前请求是从哪个页面来的

以上图为例，假设我在一个商成页面中发起请求资源，那么 Refresh 的值应该和请求的网页地址一致，是 www.semilinker.com。 而如果是CSRF攻击，那么Refresh的值应该会包含恶意网站的地址，这个时候服务器就能校验出该请求是危险请求。

缺点 Referer并非一定安全，会存在攻击者直接攻击服务器，篡改Referer的值的风险，而且这种措施需要服务端添加一层校验。

2. 同步表单 CSRF 校验

CSRF 攻击之所以能成功，就是服务器无法判断请求是攻击请求还是不是攻击请求。那么我们可以让所有请求都携带上一个攻击者无法获取到的标识，便可以区分请求的类型。

同步表单 CSRF 校验就是返回页面同时，返回一个token，并且把它渲染在页面上，在form表单提交的时候通过隐藏或者作为查询参数把 CSRF token 提交到服务器。

比如：

    <form method="POST" action="/upload?_csrf={{由服务端生成}}" enctype="multipart/form-data">
        用户名: <input name="name" />
        选择头像: <input name="file" type="file" />
    <button type="submit">提交</button>
</form>

3. 使用验证码

在一些必要的操作上面，要求强制用户使用验证码验证，才能进行后续操作，但是这种对用户体验不是很好，因为不能所有的操作都通过验证码来校验。

4. 双重 Cookie 防御

双重cookie就是将 token 设置在 cookie 中。在提交(put,post)等请求的时候，提交cookie。并通过请求头或请求体中携带上的 Cookie 中以设置的 token，服务器接收到请求后，再进行对比校验。

    let csrfToken = Cookies.get('csrfToken');

    function csrfSafeMethod(method) {
    // 以下HTTP方法不需要进行CSRF防护
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    $.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader('x-csrf-token', csrfToken);
        }
    },
    });

5. Axios CSRF 防御

Axios 提供 xsrfCookieName 和 xsrfHeaderName 两个属性，设置CSRF的 Cookie名称 和 HTTP 请求头的名称，它们的默认值如下

    // lib/defaults.js
    var defaults = {
    adapter: getDefaultAdapter(),

    // 省略部分代码
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    };   

然后

    // lib/adapters/xhr.js
    module.exports = function xhrAdapter(config) {
    return new Promise(function dispatchXhrRequest(resolve, reject) {
        var requestHeaders = config.headers;
        
        var request = new XMLHttpRequest();
        // 省略部分代码
        
        // 添加xsrf头部
        if (utils.isStandardBrowserEnv()) {
        var xsrfValue = (config.withCredentials || isURLSameOrigin(fullPath)) && config.xsrfCookieName ?
            cookies.read(config.xsrfCookieName) :
            undefined;

        if (xsrfValue) {
            requestHeaders[config.xsrfHeaderName] = xsrfValue;
        }
        }

        request.send(requestData);
    });
    };    

可以看出来，其实Axios，就是利用双重Cookie来防御CSRF攻击的。

以上