Rails Perlindungan CSRF + Angular.js: protect_from_forgery membuat saya logout di POST

Jika protect_from_forgeryopsi tersebut disebutkan dalam application_controller, maka saya bisa masuk dan melakukan permintaan GET, tetapi pada permintaan POST pertama Rails me-reset sesi, yang mengeluarkan saya.

Saya protect_from_forgerymematikan opsi untuk sementara, tetapi ingin menggunakannya dengan Angular.js. Apakah ada cara untuk melakukan itu?

Saya pikir membaca nilai CSRF dari DOM bukanlah solusi yang baik, itu hanya solusi.

Berikut ini adalah dokumen bentuk situs resmi angularJS http://docs.angularjs.org/api/ng.$http :

Karena hanya JavaScript yang berjalan di domain Anda yang dapat membaca cookie, server Anda dapat yakin bahwa XHR berasal dari JavaScript yang berjalan di domain Anda.

Untuk memanfaatkan ini (Perlindungan CSRF), server Anda perlu menetapkan token dalam cookie sesi yang dapat dibaca JavaScript yang disebut XSRF-TOKEN pada permintaan GET HTTP pertama. Pada permintaan non-GET selanjutnya server dapat memverifikasi bahwa cookie cocok dengan header HTTP X-XSRF-TOKEN

Ini solusi saya berdasarkan instruksi itu:

Pertama, atur 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

Kemudian, kita harus memverifikasi token pada setiap permintaan non-GET.
Karena Rails telah dibangun dengan metode yang serupa, kita bisa menimpanya untuk menambahkan logika kita:

# 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

Jika Anda menggunakan perlindungan CSRF Rails default ( <%= csrf_meta_tags %>), Anda dapat mengonfigurasi modul Angular Anda seperti ini:

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

Atau, jika Anda tidak menggunakan CoffeeScript (apa !?):

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

Jika suka, Anda dapat mengirim tajuk hanya pada permintaan non-GET dengan sesuatu seperti berikut:

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
]

Juga, pastikan untuk memeriksa jawaban HungYuHei , yang mencakup semua pangkalan di server daripada klien.

The angular_rails_csrf permata otomatis menambahkan dukungan untuk pola yang dijelaskan dalam jawaban HungYuHei ini untuk semua pengendali Anda:

# Gemfile
gem 'angular_rails_csrf'

Jawaban yang menggabungkan semua jawaban sebelumnya dan itu bergantung bahwa Anda menggunakan Devisepermata otentikasi.

Pertama-tama, tambahkan permata:

gem 'angular_rails_csrf'

Selanjutnya, tambahkan rescue_fromblok ke 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

Dan akhirnya, tambahkan modul interseptor ke aplikasi sudut Anda.

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

Saya melihat jawaban-jawaban lain dan berpikir mereka hebat dan dipikirkan dengan baik. Saya membuat aplikasi rel saya bekerja dengan apa yang saya pikir merupakan solusi yang lebih sederhana jadi saya pikir saya akan berbagi. Aplikasi rel saya datang dengan ini default di dalamnya,

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

Saya membaca komentar dan sepertinya itulah yang ingin saya gunakan angular dan menghindari kesalahan csrf. Saya mengubahnya menjadi ini,

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

Dan sekarang berhasil! Saya tidak melihat alasan mengapa ini tidak berhasil, tetapi saya ingin mendengar beberapa wawasan dari poster lain.

Saya telah menggunakan konten dari jawaban HungYuHei di aplikasi saya. Saya menemukan bahwa saya berurusan dengan beberapa masalah tambahan, beberapa karena penggunaan Devise untuk otentikasi, dan beberapa karena default yang saya dapatkan dengan aplikasi saya:

protect_from_forgery with: :exception

Saya perhatikan pertanyaan stack overflow terkait dan jawabannya di sana , dan saya menulis posting blog yang jauh lebih verbose yang merangkum berbagai pertimbangan. Bagian dari solusi yang relevan di sini adalah, di pengontrol aplikasi:

  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

Saya menemukan peretasan yang sangat cepat untuk ini. Yang harus saya lakukan adalah sebagai berikut:

Sebuah. Dalam pandangan saya, saya menginisialisasi $scopevariabel yang berisi token, katakanlah sebelum formulir, atau bahkan lebih baik pada inisialisasi pengontrol:

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

b. Di pengontrol AngularJS saya, sebelum menyimpan entri baru saya, saya menambahkan token ke hash:

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

Tidak ada lagi yang perlu dilakukan.

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

Ini bekerja di sisi sudut!