angular – ng2从cookie获取csrf令牌将其作为标题发布

前端之家收集整理的这篇文章主要介绍了angular – ng2从cookie获取csrf令牌将其作为标题发布前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在花了整整2天搜索网络并阅读文档以及面临同样问题的人们的大量未解决问题之后,我仍然不了解Angular 2如何处理(x-origin)cookie以及如何访问它们.

问题:
后端使用x-csrf-token&发送2个cookie.里面有JSESSIONID.我的工作是将csrf令牌保留在内存中(ng2)并将其(仅)作为标题(不是cookie)发送回每个帖子到后端.

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: http://localhost:4200
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: Access-Control-Allow-Origin,Access-Control-Allow-Credentials
Set-Cookie: x-csrf-token=8555257a-396f-43ac-8587-c6d489e76026; Path=/app
Set-Cookie: JSESSIONID=73E38392C60370E38FBAF80143ECE212; Path=/app/; HttpOnly
Expires: Thu,12 Apr 2018 07:49:02 GMT
Cache-Control: max-age=31536000
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Date: Wed,12 Apr 2017 07:49:02 GMT

我的部分解决方
我创建了一个扩展BaseRequestOptions的自定义RequesstOptions类.添加了一些额外的标头,并将’withCredentials’设置为true.

export class MyRequestOptions extends BaseRequestOptions {

  headers: Headers = new Headers({
    'Accept': 'application/json','Content-Type': 'application/json',});

  withCredentials = true;
}

在我的HttpService中我做了帖子并得到如下:

@Injectable()
export class HttpService {

  constructor(
    protected _http: Http,protected requestOptions: RequestOptions
  ) {  }

  get(url): Observable<any> {
    return this._http.get(url,this.requestOptions).map( res => res.json() );
  }

  post(url: string,object: any): Observable<any> {
    return this._http.post(url,object,this.requestOptions).map( res => res.json() );
  }
}

在我的app.module中我做了这样的魔术:

providers: [
    { provide: RequestOptions,useClass: DocumentumDefaultRequestOptions },{ provide: XSRFStrategy,useFactory: xsrfFactory }
  ],

我的xsrfFactory

export function xsrfFactory() {
  return new CookieXSRFStrategy('x-csrf-token','x-csrf-token');
}

我的部分结果:
此时,角度会发送一个cookie,其中包含jsessionid和x-csrf-token等每个请求(GET和POST无歧视):

POST /app/business-objects/business-objects-type HTTP/1.1
Host: localhost:8040
Connection: keep-alive
Content-Length: 26
Pragma: no-cache
Cache-Control: no-cache
Authorization: Basic ZG1hZG1pbjphZG1pbg==
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/57.0.2987.133 Safari/537.36
Content-Type: application/json
Accept: application/json
Referer: http://localhost:4200/page
Cookie: JSESSIONID=B874C9A170EFC12BEB0EDD4266896F2A; x-csrf-token=0717876e-f402-4a1c-a31a-2d60e48509d3

我十亿美元的问题:

>我如何以及在何处访问x-csrf-token,以及如何将其添加到我的请求中?
> CookieXSRFStrategy是什么(‘x-csrf-token’,’x-csrf-token’);确切地说.我不喜欢黑盒子感觉/理解文档解释它的方式.我可以访问数据吗?

Before sending an HTTP request,the CookieXSRFStrategy looks for a cookie called XSRF-TOKEN and sets a header named X-XSRF-TOKEN with the value of that cookie.

>它没有在我的情况下设置标题…但为什么?
>现在我正在使用sessionid和csrf令牌将cookie发送到后端,但发送的是什么? CookieXSRFStrategy或’withCredentials’标志.

请不要像“document.cookie”那样回答一个班轮.没有元数据,数据就毫无用处

更新角度5.0

Http服务beign不赞成使用HttpClient,CookieXSRFStrategy类也已被弃用,现在这个任务被委托给HttpClientXsrfModule类.如果要自定义标题和cookie名称,只需要像这样导入此模块:

@NgModule({
  imports: [
    HttpClientModule,HttpClientXsrfModule.withConfig({
      cookieName: 'My-Xsrf-Cookie',headerName: 'My-Xsrf-Header',}),]
})
export class MyModule{}

对于未来的读者:

Ajax响应cookie

您无法从任何Ajax响应访问任何cookie,如果您检查the XHR spec,您会注意到禁止访问与“Set-Cookie”匹配的标头:

A forbidden response-header name is a header name that is a byte-case-insensitive match for one of:

  • Set-Cookie
  • Set-Cookie2

但我的cookie不是httpOnly

对你有好处,但是httpOnly只声明你的cookie不能通过document.cookie访问(参见更多内容).

document.cookie API

您可以使用javascript访问的唯一cookie是document.cookie,但document.cookie是指随文档一起发送的cookie(运行脚本的页面),并且不会随时修改. MDN明确指出它涉及当前的文件

Document.cookie

Get and set the cookies associated with the current document. For a general library see this simple cookie framework.

资料来源:MDN

由Ajax响应设置的任何cookie都不属于当前文档.

那么我如何实现我的csrf保护呢?

cookie to header token protection是要走的路.请注意,您将在整个会话期间发送的令牌是相同的,并且不会根据发送cookie的疯狂Ajax请求进行更改.

Web applications that use JavaScript for the majority of their operations may use an anti-CSRF technique that relies on same-origin policy:

  • On login,the web application sets a cookie containing a random token that remains the same for the whole user session

    06001

  • JavaScript operating on the client side reads its value and copies it into a custom HTTP header sent with each transactional request

    06002

  • The server validates presence and integrity of the token

Security of this technique is based on the assumption that only JavaScript running within the same origin will be able to read the cookie’s value. JavaScript running from a rogue file or email will not be able to read it and copy into the custom header. Even though the csrf-token cookie will be automatically sent with the rogue request,the server will be still expecting a valid X-Csrf-Token header.

资料来源:Wikipedia : CSRF

使用Angular 2,CookieXSRFStrategy类可以完成此任务.

原始答案

How and where do i access the x-csrf-token,and how do i add it to my requests?

使用CookieXSRFStrategy似乎是将其添加到您的请求的方式.对于“如何”,不幸的是,答案可能是“你不能”(见进一步).

What does CookieXSRFStrategy(‘x-csrf-token’,‘x-csrf-token’); exactly do. I don’t like the blackBox feeling / understand the way the docs explained it.

CookieXSRFStrategy

06003

Source

基本上,它从document.cookie读取cookie并相应地修改Request标头.

Right now i’m sending the cookie to the backend with the sessionid and the csrf token but what is sending it? The CookieXSRFStrategy or ‘withCredentials’ flag.

这是withCredentials标志,这个标志表示XHR应该发送所有已发送的cookie(即使是之前由Ajax响应设置的那些,但是作为cookie,而不是标题,并且没有办法改变这种行为)

It doesn’t set the header in my case … but why ?

您正在讨论的cookie不是与文档(index.html)一起发送的,而是与另一个ajax请求一起发送的.事实是你无法访问由ajax响应(see this answer)设置的cookie,因为这将是一个安全问题:从随机网页上获取www.stackoverflow.com上的简单ajax将获得堆栈溢出cookie,并且攻击者可以窃取它很容易(如果stackoverflow响应中存在Access-Control-Allow-Origin:*标头).

另一方面,document.cookie API只能访问加载文档时设置的cookie,而不能访问任何其他cookie.

因此,您应该重新考虑服务器端的客户端/服务器通信流,因为您将能够复制到标头的唯一cookie是与脚本运行的文档一起发送的cookie(索引). HTML).

it isn’t a httpOnly cookie so it should be accessible with js even if it is X origin

httpOnly使cookie对document.cookie API不可用,但正如我告诉你的那样,document.cookie指的是随文档发送的cookie,而不是通过Ajax响应发送的cookie.您可以在响应中使用Set-Cookie标头进行数千个ajax调用,document.cookie仍然是相同的字符串,无需任何修改.

十亿美元的解决方

服务器应该只发送一个包含带有文档的令牌的x-csrf-token cookie,并且您应该使用对于使用CookieXSRFStrategy的每个请求对整个会话有效的令牌.为什么?因为that is how it works.

原文链接:https://www.f2er.com/angularjs/143824.html

猜你在找的Angularjs相关文章