This section aims to explain how any single-page application (SPA) can be protected from CSRF attacks by using the CSRF Token feature of the Security Gate.
Enable CSRF tokens on the Tab – CSRF Tokens of the corresponding mapping to protect your application against CSRF attacks.
The Security Gate will block any state-changing request with a missing or invalid CSRF token. There are legitimate use cases for which the CSRF token is no longer valid. Typical examples are session timeouts or terminated sessions. In those cases, the gateway's response to a CSRF block might be inappropriate for a SPA.
400 Bad Request with a generic HTML error page. SPAs typically do not expect HTML content in API responses.303 See Other with a location header pointing towards the configured Invalid token redirect location. Redirects cannot be handled by SPAs based on XMLHttpRequest (XHR), such as Angular, and will be directly handled by the web browser.Set the invalid token redirect location in the CSRF Tokens tab on the corresponding mapping to /%ENTRYPATH%/invalid/csrf-token.
Note that the exact path is not important as long as the configured value does not collide with any URL used in your application.
To ensure that the SPA can handle the gateway's response, transform the redirect into for example a 403 Forbidden.
To do so, set the following Apache Expert Settings on the corresponding mapping:
RewriteEngine On RewriteRule "invalid/csrf-token" "-" [F]
The path in the rewrite rule must match the previously configured invalid token redirect location. With this rewrite rule, any request to /%ENTRYPATH%/invalid/csrf-token will be responded to by a 403 Forbidden.
303 See Other towards /%ENTRYPATH%/invalid/csrf-token) to the CSRF block.GET /%ENTRYPATH%/invalid/csrf-token which is answered by a 403 Forbidden. This error is propagated to your SPA which can then handle it appropriately.The exact syntax to intercept an HTTP request or response depends on the exact framework used by your SPA.
The following example has been successfully tested with Angular 11 and 12. It assumes that the SPA uses the Angular framework and implements the HttpInterceptor interface:
Example of a CSRF Block Interceptor in Angular:
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs';
import {catchError} from 'rxjs/operators';
import {Injectable} from '@angular/core';
@Injectable()
export class CsrfBlockInterceptor implements HttpInterceptor {
intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).pipe(
catchError((error: HttpErrorResponse) => {
if (this.isCsrfBlock(error)) {
return this.replayRequest(req, next);
}
return this.anyOtherInternalErrorHandling(error);
})
);
}
private isCsrfBlock (error: HttpErrorResponse): boolean | undefined {
//the end of the url needs to match the one configured as "Invalid token redirect location"
return error.status === 403 && error.url?.endsWith('/invalid/csrf-token');
}
private replayRequest (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req);
}
private anyOtherInternalErrorHandling (error: HttpErrorResponse) {
return observableThrowError(error);
}
}Note that the normal sequence of requests and responses between your SPA and the Security Gate is not modified in any way by our exemplary configuration as long as no CSRF block occurs.
When a CSRF block occurs, then an extra round-trip between your application and the gateway is made to handle the CSRF block transparently. This additional delay should be acceptable for most applications since a CSRF block typically occurs at most once per user session.
In case a CSRF block occurs, the sequence of requests and responses with our exemplary configuration is depicted below. Note that only relevant headers are displayed.
POST request) with an invalid CSRF token. This is for example the case when the user session is no longer valid (possibly due to a timeout).GET request towards the configured invalid token redirect location.403 Forbidden.403 Forbidden response is propagated to your SPA, which intercepts it and recognizes from the request URL in (C) that a CSRF block occurred.