如何在帶有 Spring Boot 后端的 Vue.js 應用程序中包含 CSRF 令牌？

Question

我正在嘗試使用瀏覽器的 Fetch API 向我的后端 REST API 發出 POST 請求，如下所示：

   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 令牌，但我不知道如何生成它以將其包含在對后端 API 的 POST 請求中。

編輯：在 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”類型，即使如果我使用 HttpSecurity 完全禁用 CSRF 錯誤也解決了 - http.csrf().disable();

Answer 1

這可以通過首先對服務器進行GET調用，然后按照此處的解決方案進行以下添加/更正來解決：

1. 在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 令牌作為名為“XSRF-TOKEN”的 cookie 發回，並從名為“X-XSRF-TOKEN”的標頭讀取 CSRF 令牌。