Rails CSRF Protection + Angular.js: protection_from_forgery змушує мене вийти з POST

Якщо protect_from_forgeryпараметр згадується у application_controller, я можу ввійти та виконувати будь-які GET-запити, але вже на перший POST-запит Rails скидає сеанс, який виходить із системи.

Я тимчасово вимкнув цю protect_from_forgeryопцію, але хотів би використовувати її з Angular.js. Чи є якийсь спосіб це зробити?

Я вважаю, що читання CSRF-значення з DOM не є гарним рішенням, це лише обхідне рішення.

Ось офіційний веб-сайт angularJS http://docs.angularjs.org/api/ng.$http :

Оскільки тільки JavaScript, який працює на вашому домені, може читати файли cookie, ваш сервер може бути впевнений, що XHR прийшов з JavaScript, що працює на вашому домені.

Щоб скористатися цим (Захист CSRF), ваш сервер повинен встановити маркер у файлі cookie, що читається в JavaScript, під назвою XSRF-TOKEN при першому запиті HTTP GET. На наступних запитах, які не є GET, сервер може перевірити, що файл cookie відповідає заголовку HTTP X-XSRF-TOKEN

Ось моє рішення на основі цих інструкцій:

Спочатку встановіть файл 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

Якщо ви використовуєте захист CSRF Rails за замовчуванням ( <%= csrf_meta_tags %>), ви можете налаштувати свій кутовий модуль так:

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 , яка охоплює всі основи на сервері, а не клієнт.

The Angular_rails_csrf камінь автоматично додає підтримку для шаблону , описаного в відповідь HungYuHei по всім контролерам:

# Gemfile
gem 'angular_rails_csrf'

Відповідь, що поєднує всі попередні відповіді, і покладається на те, що ви використовуєте Devise дорогоцінний камінь автентифікації.

Перш за все, додайте дорогоцінний камінь:

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

І нарешті, додайте модуль перехоплювача до кутового додатка.

# 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')

Я побачив інші відповіді і подумав, що вони чудові і добре продумані. У мене програма для рейок працює, хоча з тим, що я вважав, є більш простим рішенням, тому я подумала, що поділюсь. Мій додаток для рейок прийшов із цим дефолтом у ньому,

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

Я читав коментарі, і здавалося, що саме так я хочу використовувати кутовий і уникати помилки 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

А тепер це працює! Я не бачу жодної причини, чому це не повинно працювати, але я хотів би почути деяку інформацію з інших плакатів.

Я використовував вміст відповіді HungYuHei у своїй заяві. Я виявив, що маю справу з кількома додатковими проблемами, однак деякі з-за мого використання Devise для аутентифікації, а деякі через дефолт, який я отримав зі своєю заявою:

protect_from_forgery with: :exception

Я зауважую відповідне запитання про переповнення стека та відповіді там , і я написав набагато більш багатослівний пост у блозі, який узагальнює різні міркування. Релевантні тут частини цього рішення в контролері програми:

  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

Я знайшов дуже швидкий злом до цього. Все, що мені потрібно було зробити, це:

а. На мій погляд, я ініціалізую $scopeзмінну, яка містить маркер, скажімо перед формою, а ще краще при ініціалізації контролера:

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

б. Перед тим, як зберегти новий запис, у своєму контролері AngularJS я додаю маркер у хеш:

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

Більше нічого не потрібно робити.

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

Це працює з боку angularjs!