Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

SallahUddin007's avatar

Unable to retrieve XSRF-TOKEN cookie from Laravel Sanctum API using Chrome extension

Hi,

I'm trying to retrieve the XSRF-TOKEN cookie from my Laravel Project which is using Laravel Fortify with Laravel Sanctum API using a fetch call from a Chrome extension, but I'm unable to do so. I've followed the instructions in the Laravel Sanctum documentation and have set the SANCTUM_STATEFUL_DOMAINS variable in my .env file correctly, but I'm still encountering issues.

I've verified that my server is properly configured to allow cross-origin requests by checking the response headers of my API requests in my browser's developer tools. The Access-Control-Allow-Origin header is set to the origin of my Chrome extension.

However, it seems that my server's CORS settings may not be allowing the X-XSRF-TOKEN header to be sent in requests. I've tried adding the X-XSRF-TOKEN header to my server's CORS configuration using the Access-Control-Allow-Headers header, but this hasn't resolved the issue.

You can check the screenshot of the network tab request "api/sanctum/csrf-cookie" xcsrf-token is in the response header but there is also a warning icon. it's first day of my account so i can not provide direct link of screenshot but i'm add link in parts jsut remove space and "+" sign pasteboard + .co + FYA4JL5MB7Mr + .png

It might be, SESSION_DOMAIN issue. since it's a Chrome extension it doesn't have any domain.

Any assistance in resolving this issue would be greatly appreciated.

Steps to reproduce Make a fetch call to the sanctum/csrf-cookie endpoint with the credentials option set to 'include' from Chrome extension,

Additional information Laravel version: 8.60.0 PHP version: 8.0.7 Operating system: Windows 10

0 likes
12 replies
SallahUddin007's avatar

@vincent15000 here's the code which i'm using for fetch xcsrf token from laravel sanctum async function getCsrfToken(apiUrl) { const apiUrl = '127.0.0.1:8000'; return fetch(apiUrl + '/api/sanctum/csrf-cookie', { credentials: 'include', mode: 'cors', headers: { 'X-Requested-With': 'XMLHttpRequest' }, withCredentials: true }).then((response) => { return response.csrf_token.get('X-CSRF-TOKEN'); }); }

laravel sanctum config's in .env file

SESSION_DOMAIN="127.0.0.1" SANCTUM_STATEFUL_DOMAINS="127.0.0.1:8000,chrome-extension://ohfnmoknmmnkfocgigbockoiidnmclnj"

1 like
vincent15000's avatar

@SallahUddin007 Why do you need to retrieve the CSRF token ? Is it for authentication ? In that case Laravel do that automatically.

SallahUddin007's avatar

@vincent15000 you're right, but issue is i'm working on chrome-extension development and using laravel api for login authentication,

By default when we send a call on /sanctum/csrf-cookie it returns cookie in the header and auto-save to the browser and the laravel/sanctum required top-level domain to retrieve and store cookie in API call.

but in my case, api call is initiating from chrome extension and it don't have any domain so the laravel sanctum is not responding proper headers to save cookine after fetch call complete

1 like
SallahUddin007's avatar

@vincent15000 it's like for create todo's and reminders but it's connected to laravel app which provide various of functionality for teams.

Chrome extension allows user to use functionality through api after authentication.

1 like
Pippo's avatar

I don't know what is this chrome extension, anyway if you are not using axios and you are managing by your own the token, if i'm not wrong, you have to url-decode it before you send it back

1 like
SallahUddin007's avatar

@Pippo hi there, Clarification I'm using default fetch() to get xcsrf-token from laravel sanctum.

1 like
Pippo's avatar

@SallahUddin007 The token is sent in a cookie, you have to extract it more or less like this:

    const value = `; ${document.cookie}`;
	const parts = value.split('; XSRF-TOKEN=');
	let token = false;

	if (parts.length === 2) 
				token = decodeURIComponent(parts.pop().split(';').shift());

	if (!token) 
				throw new Error ('Token not found');

otherwise with axios the dirty work is already done by it

3 likes
SallahUddin007's avatar

@Pippo Yes you're right token is sent in a cookie, but how can i extract this because it's in the fetch call response header, and api endpoint is using laravel sanctum with laravel fortify.

By default when we send a call on /sanctum/csrf-cookie it returns cookie in the header and auto-save to the browser, the laravel/sanctum required top-level domain to retrieve and store cookie in API call but in my case, I'm using it in chrome extension development it doesn't have any domain to add in top-level domain for laravel/sanctum.

I hope it clarifies what I meant to say...

1 like
Pippo's avatar

@SallahUddin007 if you can force/set the Referer header in the message sent by the chrrome extension

1 like
SallahUddin007's avatar

@Pippo Already tried to set headers in fetch call but didn't work, In config/session.php session.same_site: lax which support cors request but i changed that to none and null which means cors issue have to resolved but it doesn't work

Somehow laravel sanctum is not allowing host to retrieve header cookies data.

1 like

Please or to participate in this conversation.