Angular 16: CSRF config: can I still use the HttpXsrfInterceptor and HttpXsrfCookieExtractor classes? Intelli-J says they are not existing

Issue

In this excellent article on CSRF configuration for Angular, two options are described for the CSRF config:

First: use the default Csrf config:

providers: [
{ provide: HTTP_INTERCEPTORS, useExisting: **HttpXsrfInterceptor**, multi: true }
]

Second: If you're using a custom interceptor, then add the following in the provider section:

{ provide: HTTP_INTERCEPTORS, useClass: CustomInterceptor, multi: true }
{ provide: HttpXsrfTokenExtractor, useClass: **HttpXsrfCookieExtractor** }

The import statement is:

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

... and of course:

imports: [
    CommonModule,
    ...
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'X-COOKIE-CSRF-TOKEN',
      headerName: 'X-HEADER-CSRF-TOKEN'
    })
  ],

When working with Intelli-J, both the HttpXsrfInterceptor and HttpXsrfCookieExtractor classes are missing. I searched for deprecation messages, but could not find them. Did I miss anything on a change in CSRF protection in Angular 16?

So, when the first option was not possible, I switched to the second option. The problem is that the HttpXsrfCookieExtractor is missing. Without configuring it, the getToken() will always result in a 'null' cookie.

How can I configure in Angular 16 (or even 15?) either the default CSRF mechanism or the custom interceptor mechanism?

Solution

If you want to use CSRF either import HttpClientXsrfModule or add provideHttpClient(withXsrfConfiguration())

Answered By - Matthieu Riegler