Hooks response not working unless hard refresh

[shahensaifullah]

hooks.server.js

import * as cookie from 'cookie';
/** @type {import('@sveltejs/kit').Handle} */
export const handle = async ({ event, resolve }) => {
    const cookies = cookie.parse(event.request.headers.get('cookie') || '');

    const response = await resolve(event);

    if(!('csrf_bongo' in cookies)){
        const data = await fetch('http://127.0.0.1:8000/api/auth/user/csrf')
        response.headers.set('set-cookie', data.headers.get("set-cookie"))
    }
    return response;
};

Here is my response.header:

HeadersList {
  [Symbol(headers map)]: Map(7) {
    'date' => 'Tue, 27 Sep 2022 19:34:33 GMT',
    'content-type' => 'text/plain; charset=utf-8',
    'content-length' => '2',
    'vary' => 'Cookie, Origin',
    'access-control-allow-origin' => '',
    'access-control-allow-credentials' => 'true',
    'set-cookie' => 'csrf_bongo=00fbdd56-721b-4803-b110-bb6a4581c673; expires=Wed, 28 Sep 2022 07:34:34 GMT; path=/; SameSite=Lax'
  },
  [Symbol(headers map sorted)]: null
}

for the first time when code run cookies set to browser. Later when i delete that cookie and refresh the browser cookie is not set to browser. If i hard reload the page, the cookie is set to the browser.
So i log the response.headers when the cookie is not set to the browser. here is the result

HeadersList {
  [Symbol(headers map)]: Map(4) {
    'content-type' => 'text/html',
    'etag' => '"spux9l"',
    'x-sveltekit-page' => 'true',
    'set-cookie' => 'csrf_bongo=05fbdd56-721b-4803-b110-bb6a4581c673; expires=Wed, 28 Sep 2022 07:41:33 GMT; path=/; SameSite=Lax'
  },
  [Symbol(headers map sorted)]: null
}

But set-cookie is not set to the browser. If i hard reload the page, the cookie is set to the browser.

[teemingc]

Which browser are you using? Sometimes it's a visual bug, and switching to a different tab in the web inspector will show the updated list of cookies.

Also, you can now use the SvelteKit Cookies API, which uses the cookie package under the hood.

-   import * as cookie from 'cookie';
/** @type {import('@sveltejs/kit').Handle} */
export const handle = async ({ event, resolve }) => {
-   const cookies = cookie.parse(event.request.headers.get('cookie') || '');
+   const csrf_bongo = event.cookies.get('csrf_bongo');

    const response = await resolve(event);

-   if(!('csrf_bongo' in cookies)){
+   if(!csrf_bongo){
        const data = await fetch('http://127.0.0.1:8000/api/auth/user/csrf')
        response.headers.set('set-cookie', data.headers.get("set-cookie"))
    }
    return response;
};

https://kit.svelte.dev/docs/types#sveltejs-kit-cookies

[teemingc]

Later when i delete that cookie and refresh the browser cookie is not set to browser. If i hard reload the page, the cookie is set to the browser.

Can you clarify the difference between refresh and hard reloading the page?

[shahensaifullah]

this is a hard reload where the browser removes all cached data and reloads the page like when you enter a website first time. but cookies remain there.

[shahensaifullah]

Later when i delete that cookie and refresh the browser cookie is not set to browser. If i hard reload the page, the cookie is set to the browser.

Can you clarify the difference between refresh and hard reloading the page?

Could you please, rephase this problem? Set a cookie in your hooks.server.js and check if cookies is set to your browser and remove that cookie from browser, again reload the browser to check if cookie set to browser again no not.

[teemingc]

Thank you for explaining hard refreshes. I've learnt something new about Chrome :)

After further investigation, I've submitted an issue regarding this bug #7066
In the meantime, the only workaround is to call invalidate to "reset the cache". This is similar to what you were doing with the hard refreshes.
It makes me think it is a cache issue with the way the sveltekit client handles responses.

[shahensaifullah]

great. Sveltekit is the future of the javascript framework. You all doing great <3

[malalecherocks]

I would say the problem is that you are using hooks.server.js which only it's executed on server calls? such as a hard refresh or calling from the client with a fetch(...)

But I'm a noobie so take what I said with a grain of salt

[malalecherocks]

Are you sure??? I have this code...

export async function handle({ event, resolve }) {
	console.log('hooks.server.js handle()',event.url.pathname);

And if I navigate I don't see that in the terminal... only when hard refresh

[malalecherocks]

I have done an npm update and I can tell you that I don't see that in the terminal when I navigate in the client...

[malalecherocks]

I also did a fresh installation with the demo app, and I only added the console.log() to their current hooks.server.js and I can say that it only runs when hard refresh and when a fetch() is executed from client

[teemingc]

Whoops, I stand corrected. Thanks for sharing this!

I made a quick repro to test the behaviour of hooks.server.js:
https://stackblitz.com/edit/sveltejs-kit-template-default-wnshrp?file=src/hooks.server.js

I'd summarise it as running during SSR (normal refreshes), form actions, server loads and endpoints, etc.

[malalecherocks]

Oh I just saw you corrected it... this is important for me because I'm trying to resolve this similar problem: (7082)

Basically trying to prevent user from navigating if no cookie exists...

[danawoodman]

hooks.server.js only runs on server requests (initial SSR, API calls, form actions), hence the name.

You will need client side logic to invalidate a session when a cookie expires/is invalidated. You could have an endpoint that you hit which returns the user or a 401 response or something of the sort, then respond accordingly.

A few ways you can accomplish this:

• Poll every X minutes
• Poll on navigation (probably by hooking into afterNavigate in your layout)
• Check on any client request and redirect them when one fails with a 401 response
• Or better yet a combination of all 3

Also, have a look at https://github.com/pilcrowOnPaper/lucia-sveltekit which implements client side invalidation.

[danawoodman]

Why not just put the CSRF token in a hidden field in the form and not rely on cookies?

Seems pretty fragile, especially with a 10s expiry.

Instead consider attaching the CSRF to the user session and return that in your Svelte file and load them in your forms:

<input type="hidden" name="csrf" value={user.csrf} />

Another option would be to encrypt a token with a time code and decrypt it and allow tokens created in a given range

Also, Im no security expert, but having it in a cookie seems problematic because it gets sent when making requests via the browser, so it could open the token up to get used by the attacker.

PS your code formatting is completely broken, try wrapping it in triple-backticks

[shahensaifullah]

Why not just put the CSRF token in a hidden field in the form and not rely on cookies?

Seems pretty fragile, especially with a 10s expiry.

Instead consider attaching the CSRF to the user session and return that in your Svelte file and load them in your forms:

<input type="hidden" name="csrf" value={user.csrf} />

set 10s only for check what happened after removing the cookie from the browser.
but where is user? there is no user there. This token set for everyone, not only for user. This is not issue to set token user or not. issue is svelte is not set cookie which is from server. csrf always set to custom header.
problem is, svelte initially set the cookie to browser, later, after expired the cookie, why svelte not cookie set to browser?

[shahensaifullah]

my analysis says svelte caching is prevent to set of cookies again.

[danawoodman]

Can you create a basic reproduction reproduction for me to look at?

[shahensaifullah]

Can you create a basic reproduction reproduction for me to look at?

#7066 (comment)
here is a repo where you can look over it.