在Angular中创建XSRF/CSRF令牌的解决方法如下:
在后端设置CSRF令牌:
在后端服务器中,设置一个CSRF令牌,并将其包含在响应的Cookie中。可以使用csurf
或类似的库来生成和设置CSRF令牌。
const csrf = require('csurf');
app.use(csrf());
app.use((req, res, next) => {
res.cookie('XSRF-TOKEN', req.csrfToken());
next();
});
将CSRF令牌添加到请求头: 在每个请求中,将CSRF令牌添加到请求的头部中。
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { CookieService } from 'ngx-cookie-service';
constructor(private http: HttpClient, private cookieService: CookieService) {}
makeRequest() {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'X-XSRF-TOKEN': this.cookieService.get('XSRF-TOKEN')
});
this.http.get('/api/data', { headers }).subscribe(response => {
// 处理响应
});
}
在Angular中处理CSRF令牌验证错误:
在发出请求时,如果服务器返回403 Forbidden错误,说明CSRF令牌验证失败。在Angular中可以使用HttpInterceptor
来处理这种错误。
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable()
export class CsrfInterceptor implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest, next: HttpHandler): Observable> {
request = request.clone({
withCredentials: true // 发送请求时携带Cookie
});
return next.handle(request).pipe(
tap(
response => {
// 处理正常响应
},
error => {
if (error.status === 403) {
// 处理CSRF令牌验证错误
}
}
)
);
}
}
在Angular模块中注册HttpInterceptor
:
在Angular模块的提供者中注册HttpInterceptor
,以便在每个HTTP请求中应用CSRF拦截器。
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CsrfInterceptor } from './csrf.interceptor';
@NgModule({
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: CsrfInterceptor,
multi: true
}
]
})
export class AppModule {}
通过上述步骤,你将能够在Angular应用中创建XSRF/CSRF令牌并将其与每个请求一起发送,以确保API的安全性。