Как включить токен CSRF в приложение Vue. js с бэкэндом Spring Boot? - PullRequest
Новая
       4

Как включить токен CSRF в приложение Vue. js с бэкэндом Spring Boot?

0 голосов
/ 17 февраля 2020

Я пытаюсь сделать POST-запрос к моему бэкэнд-REST API, используя Fetch API браузера следующим образом: 

   submitRegistration() {
         const formElement = document.getElementById('register-form');
         fetch('http://localhost:8080/register', {
             method: 'POST',
             body: new FormData(formElement),
         });
     }

Я беру данные из этой формы: 

<v-form id="register-form" @submit.prevent="submitRegistration" class="text-center" ref="form" v-model="valid" lazy-validation>
    <v-text-field type="text" name="username" v-model="form.username" :counter="25" :rules="usernameRules" label="Username" required></v-text-field>
    <v-text-field type="password" name="userPassword" v-model="form.password" :counter="25" :rules="passwordRules" label="Password" required></v-text-field>
    <v-text-field type="text" name="userEmail" v-model="form.email" :rules="emailRules" label="E-mail" required></v-text-field>
    <v-btn type="submit" text class="primary">Register</v-btn>
</v-form>

Однако в ответ я получаю 403 Forbidden от своего внутреннего сервера. Проблема в маркере CSRF, но я не знаю, как его сгенерировать, чтобы включить в запрос POST к бэкэнд-API.

EDIT : в Spring Boot настроено мое сопоставление CORS как это: 

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedOrigins("http://localhost:9000").allowCredentials(true);
        }
    };
}

Я публикую это, потому что возвращаемый объект Response дает мне статус 403 и имеет тип "cors", даже если ошибка будет устранена, если я полностью отключу CSRF с помощью HttpSecurity - http.csrf().disable();

1 Ответ

0 голосов
/ 18 февраля 2020

Эту проблему можно решить, сделав сначала GET вызов на сервер, а затем следуя решению здесь со следующими дополнениями / исправлениями:

  1. In метод submitRegistration(), добавьте сверху: 

        // Do a fetch to GET the XSRF-TOKEN as a cookie
    fetch('http://localhost:8080/register');
    const csrfToken = this.getCookie('XSRF-TOKEN');
    const headers = new Headers({
        'X-XSRF-TOKEN': csrfToken
    });

  2. Наш POST-запрос теперь выглядит следующим образом: 

       fetch('http://localhost:8080/register', {
        method: 'POST',
        headers,
        credentials: 'include',
        body: new FormData(formElement),
    })

  3. В бэкэнде нам нужно добавить следующее к нашему переопределенному методу configure(): 

    @Override
protected void configure(HttpSecurity http) throws Exception {
    http.csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
}

    Это говорит серверу отправлять обратно токен CSRF как повар ie с именем "XSRF -TOKEN " и считывает токен CSRF из заголовка " X-XSRF-TOKEN ".

...