-
-
Notifications
You must be signed in to change notification settings - Fork 264
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: fetch override to attach XSRF token to fix csrfProtection issue (#…
…1014) During the migration from Axios to fetch, we overlooked the fact that Axios automatically handled CSRF tokens, while fetch does not. When CSRF protection was turned on, requests were failing with an "invalid CSRF token" error for users accessing the app even via HTTPS. This commit overrides fetch to ensure that the CSRF token is included in all requests. fix #1011
- Loading branch information
1 parent
a0f80fe
commit 4945b54
Showing
2 changed files
with
47 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
const getCsrfToken = (): string | null => { | ||
if (typeof window !== 'undefined') { | ||
const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/); | ||
return match ? decodeURIComponent(match[1]) : null; | ||
} | ||
return null; | ||
}; | ||
|
||
const isSameOrigin = (url: RequestInfo | URL): boolean => { | ||
const parsedUrl = new URL( | ||
url instanceof Request ? url.url : url.toString(), | ||
window.location.origin | ||
); | ||
return parsedUrl.origin === window.location.origin; | ||
}; | ||
|
||
// We are using a custom fetch implementation to add the X-XSRF-TOKEN heade | ||
// to all requests. This is required when CSRF protection is enabled. | ||
if (typeof window !== 'undefined') { | ||
const originalFetch: typeof fetch = window.fetch; | ||
|
||
(window as typeof globalThis).fetch = async ( | ||
input: RequestInfo | URL, | ||
init?: RequestInit | ||
): Promise<Response> => { | ||
if (!isSameOrigin(input)) { | ||
return originalFetch(input, init); | ||
} | ||
|
||
const csrfToken = getCsrfToken(); | ||
|
||
const headers = { | ||
...(init?.headers || {}), | ||
...(csrfToken ? { 'XSRF-TOKEN': csrfToken } : {}), | ||
}; | ||
|
||
const newInit: RequestInit = { | ||
...init, | ||
headers, | ||
}; | ||
|
||
return originalFetch(input, newInit); | ||
}; | ||
} | ||
|
||
export {}; |