Question

我正在尝试发送登录详细信息，但响应错误是显示缺少csrf令牌。如何从角度2发送csrf令牌后端Django。

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Cookie } from 'ng2-cookies'; 
import  'rxjs/add/operator/map';

@Injectable()
export class AuthenticationService {
    constructor(private http: HttpClient){}

    login(username:string,password:string){
        return this.http.post<any>('/api/auth',{username:username,password:password},)
            .map(user => {
                //login successful if there a jwt token in the response
                if(user && user.token){
                    localStorage.setItem('currentUser',JSON.stringify(user));
                }
                return user;
            })
    }

    logout(){
        //remove user from local storage to log user out 
        localStorage.removeItem('CurrentUser');
    }
}

Answer 1

后端和前端都必须共同努力。当通过任何方式在后端启用CSRF时，它基本上意味着每个请求都应该通过每个HTTP请求中的HTTP头向服务器端发送唯一的（不完全唯一的，稍后更多）标识符。

因此客户端（在这种情况下为角度）必须知道HTTP标头的名称，并且必须设置该标头的值。

此HTTP标头（或有效的CSRF标记）的值是棘手的部分。通常为了设置它，客户端继续调用服务器端/ csrf类型的API，使用有效凭据来获取此值并将其设置为全局变量（所有这些/ csrf调用通常定期进行，比如说15-30秒。唯一性的实现留给服务器）。或者为简单起见，CSRF令牌值仅在用户登录时设置一次，并在整个会话期间保留在客户端。

然后，此CSRF令牌将作为HTTP标头的值与客户端的每个HTTP请求一起发送。服务器通过读取该标头来验证CSRF令牌，并让HTTP请求通过。

请注意，以上所有内容也可以通过cookie而不是HTTP标头实现。

行动事项：

与后端团队合作，了解CSRF令牌的HTTP标头名称以及设置其值的策略。或者检查是否在任何cookie中设置了它，如果不是HTTP标头。
了解如何通过角度js以标准化方式设置它：Django csrf token + Angularjs和AngularJS + Django Rest Framework + CORS ( CSRF Cookie not showing up in client )（ Django ）和How to add csrf token to angular 2 application（<强>弹簧）
详情了解CSRF：https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)和https://dzone.com/articles/cross-site-request-forgery

我如何发送CSRF令牌

1 个答案: