Tengo mi aplicación net core y el medio antifalsificación configurados en Startup.cs:
services.AddAntiforgery(options => options.HeaderName = "X-XSRF-TOKEN");en el método ConfigureServices, y
app.UseAntiForgeryMiddleware();en el método Configurar.
Middleware antifalsificación:
public class AntiForgeryMiddleware { private readonly IAntiforgery antiforgery; private readonly AntiforgeryOptions options; private readonly RequestDelegate next; public AntiForgeryMiddleware(RequestDelegate next, IAntiforgery antiforgery, IOptions<AntiforgeryOptions> options) { this.next = next; this.antiforgery = antiforgery; this.options = options.Value; } public async Task Invoke(HttpContext context) { try { if (string.Equals(context.Request.Path.Value, "/", StringComparison.OrdinalIgnoreCase) || string.Equals(context.Request.Path.Value, "/index.html", StringComparison.OrdinalIgnoreCase)) { // We can send the request token as a JavaScript-readable cookie, and Angular will use it by default. var tokens = antiforgery.GetAndStoreTokens(context); context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken, new CookieOptions() { HttpOnly = false }); } if (string.Equals("POST", context.Request.Method, StringComparison.OrdinalIgnoreCase)) { await antiforgery.ValidateRequestAsync(context); context.Response.StatusCode = 204; } } catch (Exception ex) { throw ex; } await next(context); } }yo suelo
[ValidateAntiForgeryToken]en la acción de mi controlador.
¿Cómo configuro la solicitud de publicación angular2 para enviar el encabezado x-xsrf-token que coincidirá con la aplicación net core?
Gracias a la estrategia CookieXSRFStrategy proporcionada por Angular, Angular hace esa parte por usted.
En el caso de Angular, usará su servicio $http para enviar solicitudes AJAX. Este servicio incluirá automáticamente un encabezado con el nombre X-XSRF-TOKEN si puede encontrar el valor del token como una cookie con el nombre XSRF-TOKEN.
En el extremo .net, solo tiene que crear algún middleware que obtenga el token de solicitud y almacene su valor como la cookie XSRF-TOKEN ( HttpOnly = false ).
Proceso de validacion:-
1) La aplicación devolverá al navegador una cookie XSRF-TOKEN con el token de solicitud y otra cookie .AspNetCore.Antiforgery.* con el token de cookie.
2) Siempre que Angular envíe una solicitud Ajax, la solicitud incluirá un encabezado X-XSRF-TOKEN con el token de solicitud y la cookie .AspNetCore.Antiforgery.* con el token de cookie.
3) La validación Antiforgery se asegurará de que ambos tokens sean válidos y compartan el mismo secreto, etc.
Dado que el nombre de encabezado predeterminado para el token de solicitud es RequestVerificationToken , debemos cambiarlo y asegurarnos de que Antiforgery busque el token de solicitud en un encabezado con el nombre X-XSRF-TOKEN. Agreguemos manualmente Antiforgery y configuremos las opciones en el método ConfigureServices:
services.AddAntiforgery(opts => opts.HeaderName = "X-XSRF-Token");Ahora debemos asegurarnos de generar los tokens e incluir el token de solicitud en una cookie con el nombre XSRF-TOKEN para que el servicio Angular $http pueda leerlo e incluirlo como encabezado.
¡Esta no puede ser una cookie solo de http, ya que el código Angular necesita leer el valor de la cookie para que pueda incluirse como encabezado en solicitudes posteriores!
De lo que está hablando es de insertar el encabezado x-xsrf-token en su solicitud y enviarlo al backend.
Puede lograr eso modificando las opciones de encabezado cuando realiza una llamada http:
Servicio
@Injectable export class YourService { constructor(private http: Http) { } makeSomeRequst(data: any) { let headers = new Headers({ 'X-XSRF-TOKEN': yourTokenFromLocalStorage }); let options = new RequestOptions({ headers: headers }); this.http.post('url to your API call', data, options) .subscribe(result => { console.log('Your request was done and compliant to security on backend'); }, err => { console.error('There was a problem with authentication'); console.log(err) }); } }Con esto, modificará el encabezado e insertará el token para cumplir con su mecanismo de seguridad. Si desea automatizarlo, puede seguir este tutorial sobre cómo crear un interceptor para llamadas http e insertar un token para todas ellas en un solo lugar, no para hacerlo manualmente en cada servicio:
Debe extender Http de Angular y proporcionar nuevas dependencias en su módulo. Sigue el tutorial completo aquí:
https://medium.com/aviabird/http-interceptor-angular2-way-e57dc2842462