es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Angular 13 CSRF Token de la etiqueta META de la página.

15 Jul, 2023 Programación

Tengo una aplicación Angular 13 y un backend que utiliza Ruby on Rails. Según la documentación de Angular https://angular.io/api/common/http/HttpClientXsrfModule#description, debería poder utilizar simplemente HttpClientXsrfModule para la protección contra XSRF. Tiene configuraciones opcionales para cookieName y headerName. El problema es que en mi caso no hay una cookie CSRF, el token se almacena en la etiqueta META de la página. Por eso creo que no es posible utilizar HttpClientXsrfModule como indica la documentación.

En su lugar, voy a implementar un interceptor personalizado, sin embargo, no tengo idea de cómo obtener el valor de la etiqueta META dentro del interceptor personalizado de Angular. https://angular.io/guide/http#intercepting-requests-and-responses

Por favor, avíseme cómo puedo obtener el valor de la etiqueta META de la página dentro del interceptor de Angular:

“`typescript
import { Injectable } from '@angular/core';
import {
HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()
export class NoopInterceptor implements HttpInterceptor {

intercept(req: HttpRequest<any>, next: HttpHandler):
Observable<><any>> {
req = req.clone({
setHeaders: { 'X-CSRF-TOKEN': …cómo obtenerlo… }
});
return next.handle(req);
}
}
“`

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener el valor del META tag de encabezado de página dentro del interceptor de Angular, puedes utilizar el objeto document proporcionado por el navegador. Aquí te mostramos cómo puedes modificar tu NoopInterceptor para obtener el valor del token CSRF del META tag:

    import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class NoopInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<><any>> {

    const csrfToken: string = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    req = req.clone({
      setHeaders: { 'X-CSRF-TOKEN': csrfToken }
    });

    return next.handle(req);
  }
}

    Este código utiliza el método querySelector del objeto document para encontrar el META tag con el atributo name igual a "csrf-token". Luego utiliza el método getAttribute para obtener el valor del atributo content del META tag, se asume que contiene el token CSRF.

    Luego se puede utilizar la variable csrfToken para establecer el encabezado 'X-CSRF-TOKEN' de la solicitud HTTP utilizando la propiedad setHeaders del objeto HttpRequest.

    Ten en cuenta que este código asume que solo hay un META tag con el atributo name igual a "csrf-token" en la página. Si hay varios META tags con el mismo nombre, es posible que el código no funcione como se espera. Es posible que necesites modificar el selector o el nombre del atributo para que coincida con el META tag específico que contiene el token CSRF en tu aplicación.

Comments are closed.