How to properly secure Vue using axios and jwt?

Question

I am interested in the theory about properly securing and integrating Vue CLI app with any generic backend framework using JWT.

Let's get straight to the questions:

Is there something like a response Authorization header which the backend can use to set the token automatically in Axios? (I only found a guide to set it manually from the response body)
Does the browser create a new instance of an app if I refresh and/or reopen a tab? Does this mean that the whole app including custom Axios instance with Authorization header is destroyed and the new one needs to set it once again (from local storage)?
Is Axios with (manually) set Authorization header CSRF safe? The point here is that the header isn't browser provided, but rather app provided (only visible to custom Axios instance in the application), right? So an attacker simply cannot get to the token, right? And so while he can still make a call, it won't get authorized, right?

Wai Ha Lee · Accepted Answer · 2021-03-13 14:53:03Z

1

Short answers:

No you would need to set the Authorization header manually when you get the tokens, jwt is implemented by the client and server, not the browser
If you store jwt in cookies, you don't have to bother about re-setting the authorization header when the page reloads
Only Cookie-based jwt is vulnerable to CSRF exploits

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Mar 13, 2021 at 1:24

jeremy302

8388 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1