This is a demonstration of stateless token-based authentication using JSON Web Token and CSRF protection, Spring Security, Spring Boot and Vue js. This solution is partially based on the blog entries Where to Store your JWTs – Cookies vs HTML5 Web Storage and Where to store JWT in browser? How to protect against CSRF?
| Component | Technology |
|---|---|
| Frontend | Vue.js 2 |
| Backend (REST) | SpringBoot (Java) |
| Security | Token Based (Spring Security, JJWT, CSRF) |
| Client Build Tools | vue-cli, Webpack, npm |
| Server Build Tools | Gradle |
To generating and verifying JWT I use JJWT. JJWT – a self-contained Java library providing end-to-end JSON Web Tokens creation and verification.
We have a couple of options where to store the token:
- HTML5 Web Storage (localStorage or sessionStorage)
- Cookies
It is accessible through JavaScript on the same domain. This means that any JavaScript running on your site will have access to web storage, and because of this can be vulnerable to cross-site scripting (XSS) attacks.
So, to prevent XSS I store the JWT token in a Http-Only/Secure cookie. Cookies, when used with the HttpOnly cookie flag, are not accessible through JavaScript, and are immune to XSS.
However, cookies are vulnerable to a different type of attack: cross-site request forgery (CSRF). A CSRF attack is a type of attack that occurs when a malicious web site, email, or blog causes a user’s web browser to perform an unwanted action on a trusted site on which the user is currently authenticated.
To prevent CSRF attacks, we must create an extra Javascript readable cookie which is called: XSRF-TOKEN. This cookie must be created when the user is logged in and should contain a random, un-guessable string. Every time the JavaScript application wants to make a request, it will need to read this token and send it along in a custom HTTP header.
- Create project from existing source
- From the Project Structure dialog: Modules | new | Import Module | Select backend folder | Import module from external model
- From the Project Structure dialog: Modules | new | Import Module | Select frontend folder | Create module from existing sources
# Gradle Build : Navigate to the root folder where build.gradle is present
gradle bootRun
# or
# run bootRun task from IDE
Application will be running at http://localhost:8091.
# Navigate to frontend folder (should contain package.json )
npm install
npm run serve
# or
# run serve command from IDE
Application will be running at http://localhost:8080.
Admin - admin:password
User - user:password
/login - authentication endpoint with unrestricted access
/secured - an example endpoint that is restricted to authorized users
/onlyforadmin - an example endpoint that is restricted to authorized users with the role 'ADMIN'
The code is released under the MIT license.