防止跨站攻击——CSRFToken

怎么防止跨站攻击：

表单：在 Form 表单中添加一个隐藏的的字段，值是 csrf_token。

非表单：在ajax获取数据时，添加headers:{ 'X-CSRFToken':getCookie('csrf_token') }。

原理：在浏览器访问网站A时，网站A设置cookie会增加随机值csrf_token，这个值是随机的。返回给浏览器时，cookie会储存在浏览器，同时会把csrf_token传给表单里面的隐藏字段。所以当浏览器用自己的表单时会自带csrf_token，网站A取到这个值和cookie里的csrf_token一致就通过。而网站B里面的表单没有这个值，所以不能通过，这样就阻止了恶意攻击。非表单也是这样的原理。

CSRFProtect(app)

  上一步的作用：    # 开启CSRF保护（不会设置随机值。只会对比随机值，没有或错误都无法访问路由

                               # 从现在起，程序会获取cookie中的随机值，以及从表单或者ajax中获取随机值，进行对比

                               # 如果对比失败，则无法访问路由

                               # 后续需要设置随机值到cookie中，以及增加ajax中的headers

表单：在 Form 表单中添加一个隐藏的的字段，值是 csrf_token。

<form method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label>账户：</label><input type="text" name="to_account" placeholder="请输入对方账户"><br/>
    <label>金额：</label><input type="number" name="money" placeholder="请输入转账金额"><br/>
    <input type="submit" value="转账">
</form>

非表单：在ajax获取数据时，添加 headers:{ 'X-CSRFToken':getCookie('csrf_token') }。

        $.ajax({
            url:"/passport/login",
            method: "post",
            data: JSON.stringify(params),
            contentType: "application/json",
            headers:{
                'X-CSRFToken':getCookie('csrf_token')
            },
            success: function (resp) {
                if (resp.errno == "0") {
                    // 刷新当前界面
                    location.reload();
                }else {
                    $("#login-password-err").html(resp.errmsg)
                    $("#login-password-err").show()
                }
            }
        })