6c9902b584
This commit implements CSRF token support for all session-based API requests to fix the "CSRF token missing" and "CSRF token mismatch" errors introduced after CSRF protection was added in commit 62c4cc84. Changes: - Created csrfService.ts utility for fetching and caching CSRF tokens - Added getPostHeadersWithCsrf() helper to authUtils for async token injection - Updated all service files (*Service.ts) to include CSRF tokens in POST/PUT/PATCH/DELETE requests - Updated components with inline fetch calls to use getCsrfToken() - Fixed CSRF middleware to use single lusca instance instead of creating new instances per request - Improved generateToken() to use req.csrfToken() when available - Added CalDAV path exemption to CSRF protection Technical details: - CSRF tokens are fetched from /api/csrf-token endpoint - Tokens are cached and reused across requests to avoid unnecessary fetches - Tokens are included in x-csrf-token header for state-changing requests - Public endpoints (login, register) remain exempt from CSRF protection - Bearer token authentication remains exempt from CSRF protection Files modified: - Backend: app.js, middleware/csrf.js - Frontend: 13 service files, 8 component files - New file: frontend/utils/csrfService.ts This ensures all session-based requests properly include CSRF tokens while maintaining support for API token authentication.
59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import { getApiPath } from '../config/paths';
|
|
|
|
let csrfToken: string | null = null;
|
|
let tokenPromise: Promise<string> | null = null;
|
|
|
|
export const getCsrfToken = async (): Promise<string> => {
|
|
if (csrfToken) {
|
|
return csrfToken;
|
|
}
|
|
|
|
if (tokenPromise) {
|
|
return tokenPromise;
|
|
}
|
|
|
|
tokenPromise = fetch(getApiPath('csrf-token'), {
|
|
credentials: 'include',
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch CSRF token');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
csrfToken = data.csrfToken;
|
|
tokenPromise = null;
|
|
return csrfToken!;
|
|
})
|
|
.catch((error) => {
|
|
tokenPromise = null;
|
|
throw error;
|
|
});
|
|
|
|
return tokenPromise;
|
|
};
|
|
|
|
export const clearCsrfToken = (): void => {
|
|
csrfToken = null;
|
|
tokenPromise = null;
|
|
};
|
|
|
|
export const fetchWithCsrf = async (
|
|
url: string,
|
|
options: RequestInit = {}
|
|
): Promise<Response> => {
|
|
const needsCsrf = ['POST', 'PUT', 'PATCH', 'DELETE'].includes(
|
|
options.method?.toUpperCase() || 'GET'
|
|
);
|
|
|
|
if (needsCsrf) {
|
|
const token = await getCsrfToken();
|
|
options.headers = {
|
|
...options.headers,
|
|
'x-csrf-token': token,
|
|
};
|
|
}
|
|
|
|
return fetch(url, options);
|
|
};
|