Rails CSRF 保护 + Angular.js：protect_from_forgery 让我在 POST 上注销

Question

如果在 application_controller 中提到了protect_from_forgery 选项，那么我可以登录并执行任何 GET 请求，但在第一个 POST 请求时，Rails 会重置会话，这会将我注销。

我暂时关闭了 protect_from_forgery 选项，但想将它与 Angular.js 一起使用。有什么办法吗？

Answer 1

如果你使用默认的 Rails CSRF 保护 (<%= csrf_meta_tags %>)，你可以像这样配置你的 Angular 模块：

myAngularApp.config ["$httpProvider", ($httpProvider) ->
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
]

或者，如果您不使用 CoffeeScript（什么！？）：

myAngularApp.config([
  "$httpProvider", function($httpProvider) {
    $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
  }
]);

如果您愿意，您可以仅在非 GET 请求上发送标头，如下所示：

myAngularApp.config ["$httpProvider", ($httpProvider) ->
  csrfToken = $('meta[name=csrf-token]').attr('content')
  $httpProvider.defaults.headers.post['X-CSRF-Token'] = csrfToken
  $httpProvider.defaults.headers.put['X-CSRF-Token'] = csrfToken
  $httpProvider.defaults.headers.patch['X-CSRF-Token'] = csrfToken
  $httpProvider.defaults.headers.delete['X-CSRF-Token'] = csrfToken
]

另外，请务必查看HungYuHei's answer，它涵盖了服务器而非客户端的所有基础。

Answer 2

我认为从 DOM 读取 CSRF-value 不是一个好的解决方案，它只是一种解决方法。

这里是angularJS官网http://docs.angularjs.org/api/ng.$http的文档形式：

由于只有在您的域上运行的 JavaScript 才能读取 cookie，因此您的服务器可以确信 XHR 来自在您的域上运行的 JavaScript。

要利用这一点（CSRF 保护），您的服务器需要在 JavaScript 可读会话中设置一个令牌 在第一个 HTTP GET 请求中调用 XSRF-TOKEN 的 cookie。在随后 非 GET 请求，服务器可以验证 cookie 是否匹配 X-XSRF-TOKEN HTTP 头

这是我基于这些说明的解决方案：

首先，设置cookie：

# app/controllers/application_controller.rb

# Turn on request forgery protection
protect_from_forgery

after_action :set_csrf_cookie

def set_csrf_cookie
  cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
end

然后，我们应该在每个非 GET 请求上验证令牌。
由于 Rails 已经使用类似的方法构建，我们可以简单地覆盖它以附加我们的逻辑：

# app/controllers/application_controller.rb

protected
  
  # In Rails 4.2 and above
  def verified_request?
    super || valid_authenticity_token?(session, request.headers['X-XSRF-TOKEN'])
  end

  # In Rails 4.1 and below
  def verified_request?
    super || form_authenticity_token == request.headers['X-XSRF-TOKEN']
  end

Answer 3

我看到了其他答案，并认为它们很棒而且经过深思熟虑。我让我的 rails 应用程序使用了我认为更简单的解决方案，所以我想我会分享。我的 rails 应用程序带有这个默认值，

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception
end

我阅读了 cmets，这似乎是我想要使用 angular 并避免 csrf 错误的原因。我改成这个了，

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :null_session
end

现在它可以工作了！我看不出有什么理由不应该这样做，但我很想听听其他海报的一些见解。

Answer 4

angular_rails_csrf gem 会自动为您的所有控制器添加对HungYuHei's answer 中描述的模式的支持：

# Gemfile
gem 'angular_rails_csrf'

Answer 5

我在我的应用程序中使用了 HungYuHei 回答的内容。然而，我发现我正在处理一些其他问题，其中一些是因为我使用 Devise 进行身份验证，还有一些是因为我的应用程序默认设置：

protect_from_forgery with: :exception

我注意到相关的stack overflow question and the answers there，我写了一个更详细的blog post，总结了各种注意事项。该解决方案的相关部分在应用程序控制器中：

  protect_from_forgery with: :exception

  after_filter :set_csrf_cookie_for_ng

  def set_csrf_cookie_for_ng
    cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
  end

  rescue_from ActionController::InvalidAuthenticityToken do |exception|
    cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
    render :error => 'Invalid authenticity token', {:status => :unprocessable_entity} 
  end

protected
  def verified_request?
    super || form_authenticity_token == request.headers['X-XSRF-TOKEN']
  end

Answer 6

合并所有先前答案的答案，它依赖于您正在使用Devise 身份验证gem。

首先，添加gem：

gem 'angular_rails_csrf'

接下来，将 rescue_from 块添加到 application_controller.rb 中：

protect_from_forgery with: :exception

rescue_from ActionController::InvalidAuthenticityToken do |exception|
  cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
  render text: 'Invalid authenticity token', status: :unprocessable_entity
end

最后，将拦截器模块添加到您的 Angular 应用程序中。

# coffee script
app.factory 'csrfInterceptor', ['$q', '$injector', ($q, $injector) ->
  responseError: (rejection) ->
    if rejection.status == 422 && rejection.data == 'Invalid authenticity token'
        deferred = $q.defer()

        successCallback = (resp) ->
          deferred.resolve(resp)
        errorCallback = (resp) ->
          deferred.reject(resp)

        $http = $http || $injector.get('$http')
        $http(rejection.config).then(successCallback, errorCallback)
        return deferred.promise

    $q.reject(rejection)
]

app.config ($httpProvider) ->
  $httpProvider.interceptors.unshift('csrfInterceptor')

Answer 7

我发现了一个非常快速的破解方法。我所要做的就是：

一个。在我看来，我初始化了一个包含令牌的$scope 变量，比如说在表单之前，或者在控制器初始化时更好：

<div ng-controller="MyCtrl" ng-init="authenticity_token = '<%= form_authenticity_token %>'">

b.在我的 AngularJS 控制器中，在保存我的新条目之前，我将令牌添加到哈希中：

$scope.addEntry = ->
    $scope.newEntry.authenticity_token = $scope.authenticity_token 
    entry = Entry.save($scope.newEntry)
    $scope.entries.push(entry)
    $scope.newEntry = {}

没有什么需要做的了。

Answer 8

 angular
  .module('corsInterceptor', ['ngCookies'])
  .factory(
    'corsInterceptor',
    function ($cookies) {
      return {
        request: function(config) {
          config.headers["X-XSRF-TOKEN"] = $cookies.get('XSRF-TOKEN');
          return config;
        }
      };
    }
  );

它正在 angularjs 方面工作！