javascript / expert
Snippet
Globaler CSRF-Schutz über funktionale Interceptoren
Sicherheit in großem Maßstab erfordert ein automatisiertes Token-Management. Dieser funktionale Interceptor extrahiert das CSRF-Token aus den Cookies und fügt es jeder ausgehenden HTTP-Anfrage hinzu, um sicherzustellen, dass das Backend die Authentizität der Client-Anfrage überprüfen kann.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
import { HttpInterceptorFn, HttpRequest, HttpHandlerFn } from '@angular/common/http';import { inject } from '@angular/core';import { DOCUMENT } from '@angular/common';export const csrfInterceptor: HttpInterceptorFn = (req, next) => {const doc = inject(DOCUMENT);const token = doc.cookie.split('; ').find(row => row.startsWith('XSRF-TOKEN='))?.split('=')[1];if (token) {req = req.clone({ setHeaders: { 'X-XSRF-TOKEN': token } });}return next(req);};
angular
Erklärung
1
HttpInterceptorFn
Die moderne funktionale Typdefinition zum Abfangen und Modifizieren von HTTP-Anfragen und -Antworten.
2
inject(DOCUMENT)
Injiziert sicher das globale Document-Objekt unter Einhaltung der Plattform-Abstraktionsschicht von Angular.
3
req.clone({ setHeaders: ... })
HttpRequest-Objekte sind unveränderlich; clone() wird verwendet, um eine modifizierte Kopie mit neuen Headern zu erstellen.