週二. 8 月 11th, 2020

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

Spring Boot 的 CSRF_TOKEN 在 Vue 與 axios 整合

1 min read
spring-boot-csrf-token-vue

Spring Boot 的 CSRF_TOKEN 與 axios 整合

 

程式代碼如下:

axios.js

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

const CSRF_TOKEN = document.cookie.match(new RegExp(`XSRF-TOKEN=([^;]+)`)) == null ? "" : document.cookie.match(new RegExp(`XSRF-TOKEN=([^;]+)`))[1];
const instance = axios.create({
  headers: { "X-XSRF-TOKEN": CSRF_TOKEN }
});
console.log(CSRF_TOKEN);

export const AXIOS = instance;

 

在 spring boot 在 WebSecurityConfigurerAdapter 的 config 將 CSRF 的 token 放在 cookie 裡

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
...

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

在流覽器就可在 cookie 中看到 CSRF 的 token ( 在流覽器看到 key 為 XSRF-TOKEN )

spring-boot-csrf-token-vue

 

ref: stack overflow

 

Copyright © All rights reserved. | Newsphere by AF themes.