enabling CSRF via Angular HttpClientModule, error: TS2552: Cannot find name HttpXsrfInterceptor

Question

Question comming from a front-end beginner. I would like to add csrf tokens to some of the requests in a frontend app. The application is using Angular in version 12.2.17. I follow instructions from Angular documentation: https://angular.io/api/common/http/HttpClientXsrfModule

In the code I am adding the interceptor as follows:

import {HTTP_INTERCEPTORS, HttpClientModule, HttpClientXsrfModule  } from "@angular/common/http";


imports: [
        ...
        HttpClientXsrfModule
    ],
providers: [
         ...
        { provide: HTTP_INTERCEPTORS, useExisting: HttpXsrfInterceptor, multi: true }
    ],

When I do that, the line with "HttpXsrfInterceptor" is triggering error tooltip in IntelliJ:

TS2552: Cannot find name HttpXsrfInterceptor . Did you mean HTTP_INTERCEPTORS ?

What should I change to configure the HttpXsrfInterceptor correctly?

What I have tried:

If I try to change the imports line to :

import {HTTP_INTERCEPTORS, HttpClientModule, HttpClientXsrfModule, HttpXsrfInterceptor } from "@angular/common/http";

Then I am getting another error message from the mentioned line:

TS2724: "@angular/common/http" has no exported member named HttpXsrfInterceptor . Did you mean HTTP_INTERCEPTORS ?

AFAIK you only have to add the module to imports. No need to add anything to provides unless you need custom behavior. — rveerd
– rveerd, Commented Jan 4, 2024 at 13:55
That was my first try but when I did that, there was no effect and no X-XSRF-TOKEN was not added to the requests, so I thought to follow the documentation from Angular — fascynacja
– fascynacja, Commented Jan 4, 2024 at 13:56
You need to get the cookie from the server before Angular can add the header. Perhaps you need to perform an initial request to get the cookie? — rveerd
– rveerd, Commented Jan 4, 2024 at 14:17
Also Angular 12 is pretty old and no longer support. There may be bugs. — rveerd
– rveerd, Commented Jan 4, 2024 at 14:17
@rveed Yep you are very correct. But as you can imagine, upgrading versions in legacy apps its not always so trivial:) Sometimes you have to work with what you get. — fascynacja
– fascynacja, Commented Jan 4, 2024 at 14:19

fascynacja · Accepted Answer · 2024-01-09 14:23:56Z

Finally the code which compiled without error is:

import {GlobalHttpInterceptorInterceptor} from "./pathto/myinterceptor";
...

 providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: GlobalHttpInterceptorInterceptor,
      multi: true
    }
  ]

where GlobalHttpInterceptorInterceptor is an interceptor defined as:

@Injectable()
export class GlobalHttpInterceptorInterceptor implements HttpInterceptor {

  constructor( 
    private tokenExtractor: HttpXsrfTokenExtractor
  ) {}

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

    Observable<HttpEvent<any>> {
      console.log("global intercept  ");
      const cookieheaderName = 'X-CSRF-TOKEN';
      let csrfToken = this.tokenExtractor.getToken() as string;
      console.log("global csrfToken: " + csrfToken);
      if (csrfToken !== null && !req.headers.has(cookieheaderName)) {
          console.log("global cloning request for : " + csrfToken);
          req = req.clone({ headers: req.headers.set(cookieheaderName, csrfToken) });
      }
      console.log("global return the handling");

    return next.handle(req);
  }
}

Collectives™ on Stack Overflow

enabling CSRF via Angular HttpClientModule, error: TS2552: Cannot find name HttpXsrfInterceptor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related