Why am I getting a 403 error “CSRF token missing” with Spring boot+ Angular 7? - spring-boot

Question

I'm implementing csrf in Spring Boot+Angular 7 Application, my concern is when I am doing login then I can login into the application without any issue. But After login csrf cookie is not changing so that I am getting 403 (CSRF is expired) error from the server,
But when I do refresh then it will work properly. main reason is that cookie is not fetching properly, I don't know that where issue is coming, like from Client Side or Server Side. Please help
I am sharing my code
Spring Boot Code
#Override
protected void configure(HttpSecurity http) throws Exception {
http.httpBasic().and().csrf() // csrf config starts here
.csrfTokenRepository(csrfTokenRepository())
.ignoringAntMatchers("/", "/login", "/captcha-servlet", "/validateOTP", "supportApp/logout")
.and()
.addFilterAfter(new CustomCsrfFilter(), CsrfFilter.class);
}
private CsrfTokenRepository csrfTokenRepository() {
HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
repository.setHeaderName("X-XSRF-TOKEN");
return repository;
}
CSRF Filter
public class CustomCsrfFilter extends OncePerRequestFilter {
#Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
throws ServletException, IOException {
CsrfToken csrf = (CsrfToken) request.getAttribute(CsrfToken.class.getName());
if (csrf != null) {
Cookie cookie = WebUtils.getCookie(request, "XSRF-TOKEN");
String token = csrf.getToken();
cookie = new Cookie("XSRF-TOKEN", token);
cookie.setPath("/");
response.addCookie(cookie);
}
filterChain.doFilter(request, response);
}
}
Angular CSRF Code
import { HttpClient, HttpXsrfTokenExtractor, HttpHeaders } from '#angular/common/http';
constructor(private http: HttpClient, private tokenExtractor: HttpXsrfTokenExtractor) { }
const _csrf_token = this.tokenExtractor.getToken() as string;
return this.http.post(this._singleuserUrl, uid, {headers: new HttpHeaders().set('X-XSRF-TOKEN', _csrf_token), withCredentials: true});

Answer 1

It looks like you forgot to import HttpClientXsrfModule into app.module.ts
Work for me in Angular 6.
app.module.ts
imports: [
HttpClientXsrfModule.withOptions({
cookieName: "XSRF-TOKEN",
headerName: "X-XSRF-TOKEN"
}),
...
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: HttpXSRFInterceptor, multi: true },
...
],
Additional, I use interceptor to set token into HEADER
HttpXSRFInterceptor
#Injectable()
export class HttpXSRFInterceptor implements HttpInterceptor {
constructor(private tokenExtractor: HttpXsrfTokenExtractor) {
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const headerName = 'XSRF-TOKEN';
const respHeaderName = 'X-XSRF-TOKEN';
let token = this.tokenExtractor.getToken() as string;
if (token !== null && !req.headers.has(headerName)) {
req = req.clone({ headers: req.headers.set(respHeaderName, token) });
}
return next.handle(req);
}
}
Besides, you could use postman to clarify if the config in server works OK.
Hope it could help.