Как настроить CRSF с Spring Boot и Angular 7 - PullRequest
Новая
       32

Как настроить CRSF с Spring Boot и Angular 7

0 голосов
/ 30 апреля 2019

Я использую Spring Boot и Angular из Spring.io sight . Раздел Страница входа в систему, часть с добавлением выхода . У меня проблема с настройкой CRSF. Они пишут это

Последний вариант является лучшим, потому что Angular имеет встроенную поддержку CSRF (которую он называет «XSRF») на основе файлов cookie.

но похоже, что это не так в Angular 7 (в статье они используют angular 4). Потому что, когда я установил точку останова в CsrfFilter, метод doFilterInternal возвращает мне нулевой токен CRSF, и ответ браузера равен 

{"timestamp":"2019-04-30T08:15:16.593+0000","status":403,"error":"Forbidden","message":"Forbidden","path":"/api/logout"}

Я пытался добавить 

HttpXsrfTokenExtractor

для угловой части приложения, а затем при отправке запроса установить X-XSRF-TOKEN примерно так 

const token = this.tokenExtractor.getToken();
    this.httpClient.post('api/logout', {}, {headers: new HttpHeaders().set('X-XSRF-TOKEN', token)}).pipe(finalize(() => {
      this.userService.user.authenticated = false;
      this.userService.user.name = '';
      this.router.navigateByUrl('login');
    })).subscribe();

Но я получаю эту ошибку 

ERROR TypeError: Cannot read property 'length' of null
    at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.applyUpdate (http.js:241)
    at http.js:212
    at Array.forEach (<anonymous>)
    at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.init (http.js:212)
    at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.forEach (http.js:277)
    at Observable._subscribe (http.js:1529)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
    at subscribeTo.js:21
    at subscribeToResult (subscribeToResult.js:11)

и я не очень то понял.

Я ожидаю, что смогу выйти из системы, и CsrfFilter.class покажет мне настоящий токен CSRF.

1 Ответ

0 голосов
/ 30 апреля 2019

Наконец я узнал, что происходит.В целях разработки я установил в приложении Angualar proxy.conf.json, что все мои запросы должны быть перенаправлены в приложение Spring Boot, поскольку я разрабатываю оба приложения по отдельности из-за динамической перезагрузки содержимого в приложении Angualr, но в конце концов мне нужно одно приложение.С помощью maven-fronten-plugin я создаю приложение Angual и копирую папку dist в статический контент в Spring Boot.Proxy.conf.json был 

{
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

Я не знал, что могу просто поставить "/ **" для прокси всех моих звонков.Так что в приложении Spring Boot в свойствах приложения я установил 

server.servlet.context-path=/api

Кажется, что эта конфигурация как-то нарушает нормальный поток.Поэтому я удалил контекстный путь из приложения Spring Boot и изменил конфигурацию прокси для приложения Angular.Теперь все работает нормально.

...