Это демонстрация аутентификации на основе токена с использованием JSON Web Token и CSRF, Spring Security, Spring Boot и Vue js. Это решение частично основано на блогах Где хранить ваши JWT-файлы - Cookies vs HTML5 Web Storage и Где хранить JWT в браузере? Как защитить от CSRF?
| Компонент | Технология |
|---|---|
| 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 |
Для генерации и проверки JWT я использую JJWT. JJWT - автономная библиотека Java, обеспечивающая создание и верификацию сквозных веб-токенов JSON.
У нас есть несколько вариантов, где хранить маркер:
- Веб-хранилище HTML5 (
HTML5 Web Storage, а точнееlocalStorageилиsessionStorage); - Cookies.
Он доступен через JavaScript в том же домене. Это означает, что любой JavaScript, запущенный на вашем сайте, будет иметь
доступ к веб-хранилищу, и из-за этого может быть уязвим для атак межсайтового скриптинга (XSS).
Таким образом, чтобы предотвратить XSS, я храню маркер JWT в
Http-Only/Secure куки. Файлы куки, если они используются с флагом HttpOnly, недоступны через JavaScript и невосприимчивы к XSS.
Тем не менее, файлы куки уязвимы для атаки другого типа: межсайтовой подделки запроса (CSRF). Атака CSRF - это тип атаки, которая возникает, когда вредоносный веб-сайт, электронная почта или блог заставляют веб-браузер пользователя выполнять нежелательные действия на доверенном сайте, на котором пользователь в настоящее время аутентифицирован.
Чтобы предотвратить атаки CSRF, мы должны создать дополнительный Javascript читаемый файл куки, который называется: XSRF-TOKEN. Этот файл куки должен быть создан, когда пользователь вошел в систему и должен содержать случайную, недопустимую строку. Каждый раз, когда JavaScript приложение хочет сделать запрос, ему нужно будет прочитать этот токен и отправить его в пользовательский HTTP-заголовок.
File->New->Project From Existing Source-> укажите путь к проекту;CTRL + SHIFT + ALT + S->Modules->+->Import Module->Выберите backend папку, указав что это GRADLE проект;- -//- то же самое для папки
frontend, только не указывая что это gradle-проект, а выбравCreate module from existing sources.
gradle Build : Перейдите в корневую папку build.gradle и выполните:
gradle bootRun
или запустите из IDE класс com.alexatiks.Application.
Приложение будет запущено на http://localhost:8091.
Перейдите в корневую папку frontend (должен содержать package.json)
npm install
npm run serve
Приложение будет запущено на http://localhost:8080.
Чтобы убить процесс на порту 8080 (Windows):
1. netstat -ano | findstr 8080
2. taskkill /pid ПОРТ /F
Admin - admin:password
User - user:password
/login - эндпоинт аутентефикации authentication endpoint with unrestricted access
/secured - пример эндпоинта, который разрешён только для авторизованных пользователей
/onlyforadmin - пример эндпоинта, который разрешён только для пользователей с ролью 'ADMIN'
