Это демонстрация аутентификации на основе токена с использованием 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 start
Приложение будет запущено на http://localhost:8081.
Чтобы убить процесс на порту 8081 (Windows):
1. netstat -ano | findstr 8081
2. taskkill /pid ПОРТ /F