csrf原理及flask的处理方法

为什么需要CSRF？

Flask-WTF 表单保护你免受 CSRF 威胁，你不需要有任何担心。尽管如此，如果你有不包含表单的视图，那么它们仍需要保护。

例如，由 AJAX 发送的 POST 请求，然而它背后并没有表单。在 Flask-WTF 0.9.0 以前的版本你无法获得 CSRF 令牌。这是为什么我们要实现 CSRF。

CSRF攻击的原理:

①用户正常登录A银行网站,

②A网站返回cookie信息给用户,浏览器保存cookie信息

③在A网站没有退出登录的情况下(或者说cookie信息没过期), 登录了恶意网站B

④恶意网站B,提前准备好转账表单或者其它请求 ,将其隐藏. 把提交到A网站的按钮设置为一个"领取优惠券"的图片链接.用户点击链接

⑤在用户主观未知的情况下,访问A网站,此时浏览器会自动携带cookie信息

⑥A网站识别到cookie信息,默认为是用户本人做出的请求,根据请求做出相应的操作.

⑦用户收到损失.

具体操作步骤：

根据 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 保护，需要开启 CsrfProtect 模块:

from flask_wtf.csrf import CsrfProtect
CsrfProtect(app)

像任何其它的 Flask 扩展一样，你可以惰性加载它:

from flask_wtf.csrf import CsrfProtect
csrf = CsrfProtect()
 
def create_app():
  app = Flask(__name__)
  csrf.init_app(app)

Note
需要为 CSRF 保护设置一个秘钥。通常下，同 Flask 应用的 SECRET_KEY 是一样的。

在表单添加保护操作：

如果模板中存在表单，不需要做任何事情。与之前一样:

<form method="post" action="/">
  {{ form.csrf_token }}
</form>

但是如果模板中没有表单，就需要一个 CSRF 令牌:

<form method="post" action="/">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
</form>

自定义错误相应和关闭保护：

无论何时未通过 CSRF 验证，都会返回 400 响应。可以自定义这个错误响应:

@csrf.error_handler
def csrf_error(reason):
  return render_template('csrf_error.html', reason=reason), 400

建议对所有视图启用 CSRF 保护。也提供了某些视图函数不需要保护的装饰器:

@csrf.exempt
@app.route('/foo', methods=('GET', 'POST'))
def my_handler():
  # ...
  return 'ok'

默认情况下也可以在所有的视图中禁用 CSRF 保护，通过设置 WTF_CSRF_CHECK_DEFAULT 为 False，仅仅当需要的时候选择调用 csrf.protect()。这也能够在检查 CSRF 令牌前做一些预先处理:

@app.before_request
def check_csrf():
  if not is_oauth(request):
    csrf.protect()

Ajax提交数据：

在 meta 标签中渲染 CSRF 令牌:

<meta name="csrf-token" content="{{ csrf_token() }}">

在 script 标签中渲染同样可行:

<script type="text/javascript">
  var csrftoken = "{{ csrf_token() }}"
</script>

下面的例子采用了在 meta标签渲染的方式，在 script 中渲染会更简单，无须担心没有相应的例子。

无论何时，发送 AJAX POST 请求，为其添加 X-CSRFToken 头:

var csrftoken = $(‘meta[name=csrf-token]').attr(‘content')
 
KaTeX parse error: Expected '}', got 'EOF' at end of input: …|OPTIONS|TRACE)/i.test(settings.type) && !this.crossDomain) {
xhr.setRequestHeader(“X-CSRFToken”, csrftoken)
}
}
})

或者这么写ajax：
在提交请求时，需要在请求头中添加 X-CSRFToken 的键值对：

$.ajax({
  ...
  headers: {
    "X-CSRFToken": getCookie("csrf_token")
  },
  ...
})