My express server setup is quite simple:
app.use(bodyParser.json());
app.use(cookieParser());
app.use(csurf({ cookie: true }));
// routes
app.use(Routes imported from another file);
Currently, the client side consists of a basic form in react. I'm loading some initial data before the react app loads and setting the csrf cookie there.
I have created a straightforward function for parsing the csrf cookie on the client side. Since I am proxying the express server in create-react-app, I cannot just set a meta tag in the header.
const csrfToken = () => {
const cookies = decodeURIComponent(document.cookie).split(';');
const token = cookies.find(cookie => cookie.includes('_csrf'));
if (token) {
return token.split('=')[1]
}
}
When sending data along with the token, I am using fetch
const response = await fetch(url, {
credentials: 'include',
method: 'POST',
headers: {
'Connection': 'keep-alive',
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken()
},
body: JSON.stringify({ ...body })
});
Despite trying to troubleshoot by commenting out the csurf line and verifying that all necessary elements are present in the request, I am still receiving a 403 error. It seems like everything is correct, but something must be missing. I'm not sure what could be causing this issue, especially since my setup closely resembles others found online.