Rails CSRF Protection + Angular.js: protect_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 ที่ทำงานบนโดเมนของคุณเท่านั้นที่สามารถอ่านคุกกี้ได้เซิร์ฟเวอร์ของคุณจึงมั่นใจได้ว่า XHR มาจาก JavaScript ที่ทำงานบนโดเมนของคุณ

เพื่อใช้ประโยชน์จากสิ่งนี้ (การป้องกัน CSRF) เซิร์ฟเวอร์ของคุณต้องตั้งค่าโทเค็นในคุกกี้เซสชันที่อ่านได้ของ JavaScript ที่เรียกว่า XSRF-TOKEN ในคำขอ HTTP GET แรก ในการร้องขอที่ไม่ใช่ GET ในภายหลังเซิร์ฟเวอร์สามารถตรวจสอบได้ว่าคุกกี้ตรงกับส่วนหัว HTTP X-XSRF-TOKEN

นี่คือวิธีแก้ปัญหาของฉันตามคำแนะนำเหล่านี้:

ขั้นแรกตั้งค่าคุกกี้:

# 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

หากคุณใช้การป้องกัน 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ซึ่งครอบคลุมฐานทั้งหมดบนเซิร์ฟเวอร์มากกว่าไคลเอนต์

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!