在 Angular 2 / ASP.NET MVC 应用程序中防止 CSRF答案

【问题标题】：Preventing CSRF in Angular 2 / ASP.NET MVC application在 Angular 2 / ASP.NET MVC 应用程序中防止 CSRF
【发布时间】：2017-07-31 09:59:19
【问题描述】：

我正在开发一个示例 SPA，使用 ASP.NET MVC 作为后端，使用 Angular 2 作为前端。

我按照以下步骤在我的应用程序中防止跨站点请求伪造攻击

由于 ASP.NET MVC 发送一个名为“__RequestVerificationToken”的 cookie，并期望在 HTTP 请求中使用一个名为“__RequestVerificationToken”的标头来防止 CSRF，因此我在我的 Angular 模块中添加了以下代码
```
{provide: XSRFStrategy, useFactory: xsrfFactory}
```

xsrfFactory 在函数下面

export function xsrfFactory() {
    return new CookieXSRFStrategy('__RequestVerificationToken', '__RequestVerificationToken');
}

下面是带有“[ValidateAntiForgeryToken]”属性的控制器动作代码，将使用Angular 2的Http服务对其进行AJAX调用。

[CustomAuth]
[ValidateAntiForgeryToken]
public ActionResult GetAuthors()
{            

    List<BookStoreAdmin.ViewModels.Author> authors = BookStoreAdmin.BAL.Author.GetAuthors();

    BookStoreAdmin.ViewModels.Response<List<BookStoreAdmin.ViewModels.Author>> response = new Response<List<ViewModels.Author>>();

    response.success = true;
    response.errorMessage = null;
    response.data = authors;            

    return Json(response, JsonRequestBehavior.AllowGet);
}

下面是进行 AJAX 调用的代码。
```
 loadAuthors(): Observable<AuthorModel[]> {      

     return this.http.get('http://localhost:57599/author/GetAuthors')
    .map((data) => data.json()); 

 }      
```
当我的应用程序使用 Http angular service 进行 AJAX 调用时，我希望它具有名称为 "__RequestVerificationToken" 的请求标头，但这标题不见了，知道是什么原因吗？

如果需要提供更多信息，请告诉我？

【问题讨论】：

标签： asp.net-mvc angular csrf-protection

【解决方案1】：

我看不到您是否在 angular2 http 调用中传递了标头。

您可以使用RequestOptions API，它允许您添加header。发出请求时添加header后，ValidateAntiForgeryToken应该可以接收发送的header。

在此处阅读 RequestOptions 的更多信息：

https://angular.io/docs/ts/latest/api/http/index/RequestOptions-class.html

【讨论】：

按照link，应该是自动添加的。

【解决方案2】：

迟到的答案，但可能对某人有用。

我认为标头未设置，因为这是一个 GET 请求。虽然这是 Angular 2，但 Angular 4 security docs 可能与此处相关，因为他们声明

默认情况下，拦截器会在所有变异请求（POST 等）上发送此 cookie 到相对 URL，但不会在 GET/HEAD 请求或具有绝对 URL 的请求上发送。

为了在his answer 中以@micronyks 状态显式包含此标头，您可以使用RequestOptions API。这是一个代码示例

var headers = new Headers();
headers.append('__RequestVerificationToken', <token>);
return this.http.get(url, {headers: headers});

【讨论】：