csrf/implementation

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Angular HttpClient CSRF protection defaults

Angular's HttpClient automatically handles CSRF protection via its interceptor. By default, it reads a token from a cookie named XSRF-TOKEN and sets it as an HTTP header named X-XSRF-TOKEN. This is configured in app.config.ts using provideHttpClient(withXsrfConfiguration({})). The interceptor automatically handles reading from the cookie and setting the header for all requests.

Angular CSRF configuration with custom cookie and header names

In Angular's app.config.ts, CSRF protection can be customized using withXsrfConfiguration() with options: cookieName (string, default 'XSRF-TOKEN') specifies the cookie name containing the token, and headerName (string, default 'X-XSRF-TOKEN') specifies the HTTP header name for token submission. Example: withXsrfConfiguration({ cookieName: 'XSRF-TOKEN', headerName: 'X-XSRF-TOKEN' })

React axios CSRF protection implementation

For React applications using axios, create a request interceptor that reads the XSRF-TOKEN cookie and adds it to the X-CSRF-Token header for state-changing methods. The interceptor should check if the request method is not GET, HEAD, or OPTIONS before adding the token. The token is extracted from document.cookie by splitting on '; ' and finding the cookie starting with 'XSRF-TOKEN='.

Axios CSRF protection for state-changing methods

Axios CSRF protection requires setting the X-CSRF-Token header for specific HTTP methods. Set axios.defaults.headers.post['X-CSRF-Token'], axios.defaults.headers.put['X-CSRF-Token'], axios.defaults.headers.delete['X-CSRF-Token'], and axios.defaults.headers.patch['X-CSRF-Token'] to the CSRF token value. For TRACE method, set axios.defaults.headers.trace = { 'X-CSRF-Token': csrf_token }. Token is extracted from meta[name='csrf-token'] content attribute. Alternatively, use axios.interceptors.request.use() to add the header only for non-GET, non-HEAD, non-OPTIONS methods.

jQuery $.ajaxSetup() CSRF protection

jQuery CSRF protection uses $.ajaxSetup() with a beforeSend callback. The callback should check if the HTTP method is safe using a csrfSafeMethod() function that returns true for GET, HEAD, and OPTIONS methods (case-insensitive). Only add the X-CSRF-Token header to unsafe methods via xhr.setRequestHeader(). Also check !settings.crossDomain to avoid sending tokens to cross-domain requests. Extract token from meta[name='csrf-token'] using $('meta[name="csrf-token"]').attr('content').

TypeScript CSRFProtection utility class

A reusable TypeScript CSRFProtection class manages CSRF token extraction and header injection. Constructor accepts Partial<CSRFOptions> with optional overrides. Default options: cookieName='XSRF-TOKEN', headerName='X-CSRF-Token', unsafeMethods=['POST', 'PUT', 'PATCH', 'DELETE']. Methods: getToken() extracts token from document.cookie; requiresProtection(method: string) checks if method requires protection; addTokenToHeaders(method: string, headers: Record<string, string>) adds token to headers if needed.

Angular custom CSRF interceptor implementation

An Angular CsrfInterceptor implements HttpInterceptor to manually handle CSRF tokens. Safe methods (GET, HEAD, OPTIONS) skip token addition. For other methods, extract the XSRF-TOKEN cookie by splitting document.cookie on '; ' and finding the cookie starting with 'XSRF-TOKEN='. Clone the request and set the X-CSRF-Token header using request.clone({ headers: request.headers.set() }). Return next.handle() with the modified or original request.

React TypeScript axios CSRF implementation with createCSRFProtectedAxios

createCSRFProtectedAxios() is a TypeScript function that returns an AxiosInstance configured with CSRF protection. Parameters (optional): baseURL (default ''), csrfHeaderName (default 'X-CSRF-Token'), csrfCookieName (default 'XSRF-TOKEN'). Creates axios instance with baseURL, then adds request interceptor that checks if method is not 'get', 'head', or 'options' (case-insensitive). If true, extracts token from the specified cookie and sets it in the specified header.

React TypeScript fetch API CSRF protection with CSRFProtectedFetch

CSRFProtectedFetch is a TypeScript class wrapping fetch API with CSRF protection. Constructor accepts Partial<CSRFFetchOptions>: csrfHeaderName (default 'X-CSRF-Token'), csrfCookieName (default 'XSRF-TOKEN'), baseUrl (default ''). fetch<T>(url, options) method adds CSRF token header for non-safe methods (GET, HEAD, OPTIONS). post<T>(url, data, options) shorthand automatically sets method='POST', body=JSON.stringify(data), and Content-Type: application/json header.

Cookie-to-Header CSRF pattern: safe HTTP methods

Safe HTTP methods that do not require CSRF token protection are GET, HEAD, and OPTIONS. These methods should be excluded from CSRF token header injection. Unsafe methods requiring CSRF protection include POST, PUT, PATCH, and DELETE.

Framework CSRF protection support: Angular, React, Vue

Angular provides Cookie-to-Header CSRF pattern out of the box through HttpClient, automatically handling token extraction and header injection. React and Vue do not provide built-in CSRF protection and require developers to implement the pattern manually or use helper libraries such as axios interceptors.

CSRF token not settable from another origin

The Cookie-to-Header CSRF pattern prevents attackers from setting a matching custom header from another origin due to browser Same-Origin Policy. Even if a browser includes cookies with a forged request, the attacker cannot set the matching custom header (X-CSRF-Token or similar) from a different origin.

Give your agent this brain