How to properly secure Vue using axios and jwt?

user_7008101 0
Viewed 125

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?
jwt vue.js http
1 Answers

Short answers:

  1. 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

  2. If you store jwt in cookies, you don't have to bother about re-setting the authorization header when the page reloads

  3. Only Cookie-based jwt is vulnerable to CSRF exploits

user_80869060
Related