I need attributes to be passively sent to all calls to my back end server, API and resources (without code to explicitly sending that information to the API via header, request body - etc)
These attributes are only useful to the current tab/session and it's undesirable for the value to persist after the tab has closed. If multiple tabs are open it's important that each tab has its own values.
Essentially sessionStorage - the issue with sessionStorage is that it's not sent to the API on every request.
Setting a value as a cookie works, but the value persists after the tab/window session ends and the cookie is shared between tabs/windows.
Can you set a value in a cookie such that it mimics the behaviour of sessionStorage?
I think the easiest approach would be to create a wrapper for the API that appends the desired values to the request (in whatever manner is needed). For example:
// Mutate the below object to send data to the server
const valuesToSend = {};
const makeRequest = (url) => fetch(url, { body: JSON.stringify(valuesToSend });
valuesToSend.foo = 'foo';
fetch('someurl')
.then(res => res.json())
.then((result) => {
// ...
})
If you really really wanted to store the values in cookies instead, it'd be possible, but it wouldn't really help, since cookies are shared and you'd have to filter for only the cookies matching the current tab - for example, you could generate a unique ID on pageload, and when setting a cookie, prepend the cookie key with the ID. Then when making a request, filter for only values matching the ID, and only send those.
Possible, but cumbersome. A wrapper function is a lot easier.
If that's not an option, another possibility is to use the same sort of approach as above, except that you also set a cookie with the unique ID just before you make a request, and then check that on the server to figure out which values are relevant to the current request. That is:
As long as you set the tab's ID to a cookie before making a request, the server should be able to identify which cookies are relevant to a given request.
This is convoluted. I'd recommend figuring out whether there's a better way to structure the application so that this isn't necessary.
If something like that exist , We can say good bye to CSRF attacks .
You may find this helpful Tab specific cookies without using sessionStorage or any HTML5 features