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 读取它并将其设置为 $httpProvider 的默认标头：

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