Phoenix 和 Angular 中的 CSRF 保护

Question

我有一个 Angular 应用程序，我打算将 Phoenix 用作后端。 Phoenix 默认支持 CSRF 保护，其中 CSRF 令牌存储到会话中。这在 Phoenix 渲染视图时工作正常，但是当我的前端使用 Angular js 构建时，我如何访问 CSRF 令牌。目前，我正在向 get_csrf_token() menthod 发出获取请求，但我正在寻找更好的解决方案。

csrf_token = get_csrf_token()

注意：您也可以推荐任何其他支持 CSRF 保护的 elixir 框架。

Answer 1

您可以将 CSRF 令牌存储在应用程序布局中带有 csrf_meta_tag/0 的元标记中，然后从 angular 读取它并将其设置为 [=12= 的默认值 header ]:

angular.module('MyApplication', []).config(["$httpProvider", function ($httpProvider) {
  var token = document.querySelector('meta[name=csrf-token]').content;
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = token;
}])

Phoenix 和 Angular 中的 CSRF 保护

CSRF Protection in Phoenix and Angular

elixir

csrf-protection

angularjs

phoenix-framework

plug