Set Httponly flag

[mabi08]

How can I set the httponly flag? Is it set by default with the secure flag?

[cmp-cc]

HttpOnly cannot be set in the browser client side (in JavaScript). there's no API available to get/set the HttpOnly attribute of the cookie, as that would otherwise defeat the meaning of HttpOnly.

[mabi08]

Got it, thanks for your reply!

[iptizer]

What about adding this to the documentation so other can benefit?

I mean the fact that this is already set by default. Or did I miss this in the documentation somewhere?

[mabi08]

Sorry for my late response had to check it first and the httponly is not set by default while secure is working: I am using this code to set the cookie: Vue.prototype.$cookies.set('jwt', result.data.token, "1d", null, null, true); anything I can change?

[hansgrinwis]

HttpOnly means the cookie is not accessible by Javascript, so it would make no sense. See https://stackoverflow.com/a/14691716 and https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#JavaScript_access_using_Document.cookie

[hansgrinwis]

What you could try, however, is to set Path to /api or Domain to api.yoursite.com so that the JWT gets sent to this path/domain, but is not readable from your script running somewhere else (i.e. not under the specified path/domain). Let me know if that works.

[thomhickey]

Hmm, of course it makes sense. If it's a session cookie or jwt for auth, why make it accessible to JS? Instead, just send it on every request to the back-end which can verify auth of the user/request. This is exactly what httpOnly cookies are designed for. https://blog.logrocket.com/jwt-authentication-best-practices/

[hansgrinwis]

Hmm, of course it makes sense. If it's a session cookie or jwt for auth, why make it accessible to JS? Instead, just send it on every request to the back-end which can verify auth of the user/request. This is exactly what httpOnly cookies are designed for. https://blog.logrocket.com/jwt-authentication-best-practices/

What I meant with "makes no sense" is: you create a cookie in (client) JS which, after that, you cannot read in JS because it's httponly. In the case of JWT, the cookie would be created on the server, not in client JS.

[thomhickey]

Yes, understood. But I have a flow now where I take the jwt by query string in vue, add it to axios default Authorization: Bearer header, add it as an httpOnly cookie, then proceed to render the SPA. This can help mitigate some re-auth on re-fresh issues that come up with back-button or refresh actions by the user as the cookie will be sent and then the jwt can be returned again by query string. Anyway, thanks for clarifying. Auth for SPAs is a mess to be honest.

[hansgrinwis]

Ok, clear! Some thoughts:

MDN says "Cookies created via JavaScript cannot include the HttpOnly flag." (here).

Please note that, even if you would be able to set the cookie as httpOnly, the token is still available in JS because (you just read it off the query string and) it has been "stored" in Axios.

I guess you have no control over how the server communicates the JWT to you. If the server wanted you to have the token inaccessible to JS, it should not have sent it to you as query string anyway. It should have sent it to you as a... (wait for it) HttpOnly cookie.

[thomhickey]

Yeah, the httpOnly is done through an axios call to a same-domain back-end so it can return a set-cookie with httpOnly + secure. It's so convoluted it makes me hate myself and wonder why I'm so stuck on writing SPAs.

[Sgroove]

Has anyone figured out a solution to this? We are in the same situation. I guess the solution would be to call a PHP function from Vuejs (in my case) and set the cookie using PHP?