在Angular应用中与.Net Core Web API一起使用时,确实可能容易受到CSRF攻击。为了解决这个问题,可以采取以下步骤:
HttpClientXsrfModule
模块来处理CSRF防护。在Angular应用的根模块中,引入HttpClientXsrfModule
模块,并在imports
数组中添加该模块。这将自动处理CSRF令牌的生成和传递。
import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule,
HttpClientXsrfModule.withOptions({
cookieName: 'XSRF-TOKEN',
headerName: 'X-XSRF-TOKEN'
})
],
...
})
export class AppModule { }
在Startup.cs
文件中的ConfigureServices
方法中添加以下代码,以启用.Net Core Web API中的CSRF防护:
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
// 添加CSRF防护
services.AddAntiforgery(options =>
{
options.HeaderName = "X-XSRF-TOKEN"; // Angular应用中设置的header名称
options.Cookie.Name = "XSRF-TOKEN"; // Angular应用中设置的cookie名称
});
}
在Angular应用中,在进行POST、PUT、DELETE等修改操作的请求时,需要将CSRF令牌添加到请求的header中。可以通过HttpClient
的post
、put
、delete
等方法的第三个参数中传递CSRF令牌。
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable()
export class YourService {
constructor(private http: HttpClient) {}
public createItem(item: any) {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'X-XSRF-TOKEN': this.extractCsrfToken() // 从cookie中提取CSRF令牌
});
return this.http.post('/api/items', item, { headers });
}
private extractCsrfToken(): string {
const matches = document.cookie.match(new RegExp('(^|;)\\s*' + 'XSRF-TOKEN' + '\\s*=\\s*([^;]+)'));
return matches ? matches.pop() : '';
}
}
在上述代码中,extractCsrfToken
方法从cookie中提取CSRF令牌,并将其添加到请求的header中。
通过以上步骤,Angular应用与.Net Core Web API一起使用时,可以有效地防止CSRF攻击。