Falsk项目cookie中的 csrf_token 和表单中的 csrf_token实现

Flask中请求体的请求开启CSRF保护可以按以下配置

　　from flask_wtf.csrf import CSRFProtect 　　app.config.from_object(Config) 　　CSRFProtect(app)

但CSRFProtect只做验证工作，cookie中的 csrf_token 和表单中的 csrf_token 需要按以下方式实现

理清思路

根据 csrf_token 校验原理，具体操作步骤有以下几步：

1. 后端生成 csrf_token 的值，在前端请求登录或者注册界面的时候将值传给前端，传给前端的方式可能有以下两种：
   • 在模板中的 From 表单中添加隐藏字段
   • 将 csrf_token 使用 cookie 的方式传给前端
2. 在前端发起请求时，在表单或者在请求头中带上指定的 csrf_token
3. 后端在接受到请求之后，取到前端发送过来的 csrf_token，与第1步生成的 csrf_token 的值进行校验
4. 如果校验对 csrf_token 一致，则代表是正常的请求，否则可能是伪造请求，不予通过

而在 Flask 中，CSRFProtect 这个类专门只对指定 app 进行 csrf_token 校验操作，所以开发者需要做以下几件事情：

• 生成 csrf_token 的值
• 将 csrf_token 的值传给前端浏览器
• 在前端请求时带上 csrf_token 值

完成代码逻辑

• 生成 csrf_token 的值

　　# 导入生成 csrf_token 值的函数 　　from flask_wtf.csrf import generate_csrf 　　# 调用函数生成 csrf_token 　　csrf_token = generate_csrf() 

• 将 csrf_token 的值传给前端浏览器
  • 实现思路：可以在请求勾子函数中完成此逻辑

　　@app.after_request 　　def after_request(response): 　　# 调用函数生成 csrf_token 　　csrf_token = generate_csrf() 　　# 通过 cookie 将值传给前端 　　response.set_cookie("csrf_token", csrf_token) 　　return response 

• 在前端请求时带上 csrf_token 值
  • 根据登录和注册的业务逻辑，当前采用的是 ajax 请求
  • 所以在提交登录或者注册请求时，需要在请求头中添加 X-CSRFToken 的键值对

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