Mã thông báo CSRF bị thiếu hoặc không chính xác. Django + AngularJS

Question

Tôi nhận được mã thông báo CSRF bị thiếu hoặc lỗi không chính xác trong khi thực hiện yêu cầu POST đến một từ xa django api từ máy cục bộ của tôi.

Cài đặt của tôi trên AngularJS:

.config(['$httpProvider', function($httpProvider){ 

$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 

}]); 

nhưng vẫn im nhận được CSRF dấu hiệu thiếu hoặc không chính xác lỗi.

Tôi kiểm tra xem tiêu đề nào đang được gửi và dường như góc không gửi HTTP_X_CSRFTOKEN.

Nhưng tôi có thể thấy rằng cookie csrftoken = một cái gì đó được gửi.

Có ai biết điều gì đang xảy ra không?

Tiêu đề yêu cầu

POST /s/login/ HTTP/1.1 
Host: server.somewhere.io:8000 
Connection: keep-alive 
Content-Length: 290 
Pragma: no-cache 
Cache-Control: no-cache 
Accept: application/json, text/plain, */* 
Origin: http://localhost 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36 
Content-Type: application/json;charset=UTF-8 
Referer: http://localhost/thesocialmarkt/ 
Accept-Encoding: gzip, deflate 
Accept-Language: en-GB,en;q=0.8,en-US;q=0.6,pt-BR;q=0.4,pt;q=0.2 
Cookie: csrftoken=hiYq1bCNux1mTeQuI4eNgi97qir8pivi; sessionid=1nn1phjab5yd71yfu5k8ghdch2ho6exc 

Answer 1

Như @ Chris Hawkes chỉ vào này Stackoverflow trả lời của @Ye Liu

Kể từ khi ứng dụng góc không được cung cấp bởi django, để cho cần đặt cookie, ứng dụng góc cần thực hiện yêu cầu GET đối với django trước tiên.

Tôi xác minh rằng miễn là bạn không thực hiện yêu cầu nhận http, csrftoken cookie sẽ không được đặt. Vì vậy, chỉ

$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 

sẽ không hoạt động. Trước tiên, bạn cần phải thực hiện nếu không thực tế sau đó giả http nhận được yêu cầu để django rest_framework.

Cập nhật: Nhận xét của bạn đẩy tôi để nghiên cứu thêm nó, Xin vui lòng đọc blog này, nơi được đã đề cập như,

client-side GENERATED CSRF-tokens. Yêu cầu khách hàng tạo và gửi cùng một giá trị bí mật duy nhất trong cả Cookie và tiêu đề HTTP tùy chỉnh. Xét một trang web chỉ được phép đọc/ghi một Cookie cho tên miền riêng của mình, chỉ trang web thật có thể gửi cùng một giá trị trong cả hai tiêu đề

Vì vậy, cho phép thử với yêu cầu duy nhất này đầu tiên.

$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken; 

nơi bạn đang tiêm $cookies vào bộ điều khiển/dịch vụ.

Nếu nó hoạt động thì có thể viết interceptors sẽ là lựa chọn tốt và cũng sẽ giúp bạn gỡ lỗi.

Tôi chắc chắn bạn đang sử dụng phiên bản AngularJs ít nhất 1.2, Xem changeset này và gần đây cam kết dịch vụ http góc việc kiểm tra CSRF với mã này,

var xsrfValue = urlIsSameOrigin(config.url) 
      ? $$cookieReader()[config.xsrfCookieName || defaults.xsrfCookieName] 
      : undefined; 
     if (xsrfValue) { 
      reqHeaders[(config.xsrfHeaderName || defaults.xsrfHeaderName)] = xsrfValue; 
     } 

Vì vậy, nó là cần thiết mà bạn đang gửi lẽ ấy mà hiện diện trong cookie.

Hơn nữa để phân tích công cụ nhà phát triển sử dụng trình duyệt của bạn để xem yêu cầu/phản hồi với yêu cầu http và phân tích tiêu đề và cookie.

Answer 2

nếu bạn đang sử dụng $ http trong AngularJS cho yêu cầu ajax và nếu bạn đang phải đối mặt với bất kỳ vấn đề CSRF token sau đó sử dụng này:

$http.defaults.xsrfCookieName = 'csrftoken'; 
$http.defaults.xsrfHeaderName = 'X-CSRFToken';