Rails CSRF Protection + Angular.js: protect_from_forgery mi fa disconnettere da POST

Se l' protect_from_forgeryopzione è menzionata in application_controller, allora posso accedere ed eseguire qualsiasi richiesta GET, ma alla prima richiesta POST Rails resetta la sessione, il che mi disconnette.

Ho protect_from_forgerydisattivato temporaneamente l' opzione, ma vorrei usarla con Angular.js. C'è un modo per farlo?

Penso che leggere il valore CSRF da DOM non sia una buona soluzione, è solo una soluzione alternativa.

Ecco un modulo del sito web ufficiale angularJS http://docs.angularjs.org/api/ng.$http :

Dal momento che solo JavaScript che viene eseguito sul tuo dominio potrebbe leggere il cookie, il tuo server può essere certo che l'XHR provenga da JavaScript in esecuzione sul tuo dominio.

Per trarne vantaggio (protezione CSRF), il tuo server deve impostare un token in un cookie di sessione leggibile JavaScript chiamato XSRF-TOKEN alla prima richiesta GET HTTP. Nelle successive richieste non GET il server può verificare che il cookie corrisponda all'intestazione HTTP X-XSRF-TOKEN

Ecco la mia soluzione basata su queste istruzioni:

Innanzitutto, imposta il 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

Quindi, dovremmo verificare il token su ogni richiesta non GET.
Poiché Rails ha già creato un metodo simile, possiamo semplicemente ignorarlo per aggiungere la nostra logica:

# 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

Se stai usando la protezione CSRF predefinita di Rails ( <%= csrf_meta_tags %>), puoi configurare il tuo modulo angolare in questo modo:

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

Oppure, se non stai usando CoffeeScript (che cosa !?):

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

Se preferisci, puoi inviare l'intestazione solo su richieste non GET con qualcosa di simile al seguente:

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
]

Inoltre, assicurati di controllare la risposta di HungYuHei , che copre tutte le basi sul server anziché sul client.

La gemma angular_rails_csrf aggiunge automaticamente il supporto per lo schema descritto nella risposta di HungYuHei a tutti i tuoi controller:

# Gemfile
gem 'angular_rails_csrf'

La risposta che unisce tutte le risposte precedenti e fa affidamento sul fatto che stai utilizzando la Devisegemma di autenticazione.

Prima di tutto, aggiungi la gemma:

gem 'angular_rails_csrf'

Quindi, aggiungi il rescue_fromblocco in 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

E infine, aggiungi il modulo intercettore alla tua app angolare.

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

Ho visto le altre risposte e ho pensato che fossero grandiose e ben ponderate. Ho fatto funzionare la mia app Rails con quella che pensavo fosse una soluzione più semplice, quindi ho pensato di condividere. La mia app rails è arrivata con questa impostazione predefinita,

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

Ho letto i commenti e mi è sembrato quello che voglio usare angolare ed evitare l'errore CSRF. L'ho cambiato in questo,

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

E ora funziona! Non vedo alcun motivo per cui questo non dovrebbe funzionare, ma mi piacerebbe sentire alcune intuizioni da altri poster.

Ho usato il contenuto della risposta di HungYuHei nella mia applicazione. Ho scoperto che avevo a che fare con alcuni problemi aggiuntivi, alcuni a causa del mio uso di Devise per l'autenticazione e alcuni a causa dell'impostazione predefinita che ho ottenuto con la mia applicazione:

protect_from_forgery with: :exception

Ho notato la relativa domanda di overflow dello stack e le risposte lì e ho scritto un post sul blog molto più dettagliato che riassume le varie considerazioni. Le parti di quella soluzione che sono rilevanti qui sono, nel controller dell'applicazione:

  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

Ho trovato un trucco molto veloce per questo. Tutto quello che dovevo fare è il seguente:

un. A mio avviso, inizializzo una $scopevariabile che contiene il token, diciamo prima del modulo, o ancora meglio all'inizializzazione del controller:

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

b. Nel mio controller AngularJS, prima di salvare la mia nuova voce, aggiungo il token all'hash:

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

Non è necessario fare altro.

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

Funziona sul lato angularjs!