Аутентификация JWT с использованием файлов cookie httponly с Spring Boot и Angular 5 ⇐ JAVA

[Anonymous]

Итак, я разрабатываю приложение Angular 5, которое требует аутентификации. Приложение Angular получает данные из API Spring Boot. Для аутентификации я отправляю адрес электронной почты и пароль в API, который, если он верен, отправляет мне обратно токен JWT.
Я читал, что хранить токен в localStorage — не очень хорошая идея, поскольку он доступен с помощью JavaScript и, следовательно, уязвим для атак. Поэтому я хочу сохранить JWT в файл cookie с флагами httponly и secure.

Однако проблема в том, что приложение Angular и приложение Spring Boot работают в разных источниках, и поэтому ответ, полученный от Spring, не может установить файл cookie.

Я хочу знать, как добиться этого при успешном входе в систему, мой API устанавливает файлы cookie для приложения Angular, которое может находиться в другом домене.

Вот мой ресурс аутентификации:

@PostMapping("/login")
public ResponseEntity loginUser(@RequestBody LoginRequest request, HttpServletResponse res) {
LoginResponse response = new LoginResponse("this_is_my_token");
Cookie cookie = new Cookie("token", "this_is_my_token");
cookie.setPath("/");
cookie.setSecure(true);
cookie.setHttpOnly(true);
res.setHeader("Access-Control-Allow-Credentials", "true");
res.addCookie(cookie);
return ResponseEntity.ok().body(response);
}


Я также настроил фильтр CORS:

@Bean
public WebMvcConfigurer cors() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:4200") //current angular host, later will be changed
.allowCredentials(true)
.allowedHeaders("*");
}
};
}


Тогда в моем приложении Angular есть этот сервис:

@Injectable()
export class LoginSerivce {
private headers: HttpHeaders;

constructor(private http: HttpClient) {
this.headers = new HttpHeaders({
"Content-Type": "application/json",
"Access-Control-Allow-Credentials": "true"
});
}

public getToken() {
const data = JSON.stringify({
email: "test",
geslo: "Test"
});
this.http.post("http://localhost:8080/v1/auth/login",
data, {headers: this.headers, withCredentials: true})
.toPromise()
.then(
(resp) => {
console.log(resp);
},
(err) => {
console.log("error: ", err);
}
);
}
}


Подробнее здесь: https://stackoverflow.com/questions/493 ... -angular-5