Rails CSRF Protection + Angular.js: protect_from_forgery me fait me déconnecter sur POST

Si l' protect_from_forgeryoption est mentionnée dans application_controller, alors je peux me connecter et effectuer toutes les requêtes GET, mais à la toute première requête POST, Rails réinitialise la session, ce qui me déconnecte.

J'ai protect_from_forgerydésactivé temporairement l' option, mais j'aimerais l'utiliser avec Angular.js. Y a-t-il un moyen de faire cela?

Je pense que lire la valeur CSRF à partir de DOM n'est pas une bonne solution, c'est juste une solution de contournement.

Voici un document du site officiel angularJS http://docs.angularjs.org/api/ng.$http :

Étant donné que seul le JavaScript qui s'exécute sur votre domaine peut lire le cookie, votre serveur peut être assuré que le XHR provient de JavaScript s'exécutant sur votre domaine.

Pour tirer parti de cette (protection CSRF), votre serveur doit définir un jeton dans un cookie de session lisible par JavaScript appelé XSRF-TOKEN lors de la première requête HTTP GET. Lors des demandes non GET suivantes, le serveur peut vérifier que le cookie correspond à l'en-tête HTTP X-XSRF-TOKEN

Voici ma solution basée sur ces instructions:

Tout d'abord, définissez le 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

Ensuite, nous devons vérifier le jeton sur chaque requête non GET.
Puisque Rails a déjà construit avec la méthode similaire, nous pouvons simplement la remplacer pour ajouter notre logique:

# 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

Si vous utilisez la protection Rails CSRF par défaut ( <%= csrf_meta_tags %>), vous pouvez configurer votre module angulaire comme ceci:

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

Ou, si vous n'utilisez pas CoffeeScript (quoi !?):

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

Si vous préférez, vous pouvez envoyer l'en-tête uniquement sur les demandes non GET avec quelque chose comme ce qui suit:

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
]

Assurez-vous également de consulter la réponse de HungYuHei , qui couvre toutes les bases sur le serveur plutôt que sur le client.

La gemme angular_rails_csrf ajoute automatiquement le support du modèle décrit dans la réponse de HungYuHei à tous vos contrôleurs:

# Gemfile
gem 'angular_rails_csrf'

La réponse qui fusionne toutes les réponses précédentes et repose sur le fait que vous utilisez Deviseune gemme d'authentification.

Tout d'abord, ajoutez la gemme:

gem 'angular_rails_csrf'

Ensuite, ajoutez un rescue_frombloc dans 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

Et enfin, ajoutez le module intercepteur à votre application angulaire.

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

J'ai vu les autres réponses et j'ai pensé qu'elles étaient excellentes et bien pensées. J'ai fait fonctionner mon application de rails avec ce que je pensais être une solution plus simple, alors j'ai pensé partager. Mon application rails est livrée avec ce paramètre par défaut,

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

J'ai lu les commentaires et il semblait que c'était ce que je voulais utiliser angular et éviter l'erreur csrf. Je l'ai changé en ceci,

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

Et maintenant ça marche! Je ne vois aucune raison pour laquelle cela ne devrait pas fonctionner, mais j'aimerais beaucoup entendre d'autres affiches.

J'ai utilisé le contenu de la réponse de HungYuHei dans mon application. J'ai constaté que je rencontrais cependant quelques problèmes supplémentaires, certains à cause de mon utilisation de Devise pour l'authentification, et d'autres à cause du défaut que j'ai obtenu avec mon application:

protect_from_forgery with: :exception

Je note la question relative au dépassement de pile et les réponses , et j'ai écrit un article de blog beaucoup plus détaillé qui résume les différentes considérations. Les parties de cette solution qui sont pertinentes ici sont, dans le contrôleur d'application:

  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

J'ai trouvé un hack très rapide à cela. Tout ce que j'avais à faire est le suivant:

une. À mon avis, j'initialise une $scopevariable qui contient le jeton, disons avant le formulaire, ou encore mieux à l'initialisation du contrôleur:

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

b. Dans mon contrôleur AngularJS, avant d'enregistrer ma nouvelle entrée, j'ajoute le jeton au hachage:

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

Il n'y a plus rien à faire.

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

Ça marche du côté angularjs!