Spring Security 6中单页应用（SPA）的CSRF令牌处理指南

import org.springframework.security.web.csrf.CsrfToken;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class CsrfController {

    /**
     * 提供一个接口供前端获取CSRF令牌信息。
     * Spring Security会自动将CsrfToken注入到方法参数中，
     * 并确保相应的原始令牌已通过cookie发送给客户端。
     *
     * @param csrfToken Spring Security自动注入的CSRF令牌对象
     * @return 包含令牌名称、值和头名称的CsrfToken对象
     */
    @GetMapping("/csrf")
    public CsrfToken csrfToken(CsrfToken csrfToken) {
        return csrfToken;
    }
}

{
    "parameterName": "_csrf",
    "token": "pKpetTa2tv6yhmnko7ZvtaiP7CgX8cB5uBbR1G-ZR6NiKTpIkcltgALX0J-fslyGkJtbgpG_wRFxl_VUgCDm513_dMVUGQ15",
    "headerName": "X-XSRF-TOKEN"
}

// 假设您正在使用fetch API
let csrfTokenValue = '';
let csrfHeaderName = 'X-XSRF-TOKEN'; // 默认值，但最好从后端响应获取

/**
 * 从后端获取CSRF令牌。
 * 通常在应用初始化时调用一次，或在令牌过期时刷新。
 */
async function fetchCsrfToken() {
    try {
        const response = await fetch('/csrf');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        csrfTokenValue = data.token;
        csrfHeaderName = data.headerName; // 确保使用后端指定的头名称
        console.log('CSRF Token fetched:', csrfTokenValue);
    } catch (error) {
        console.error('Failed to fetch CSRF token:', error);
        // 处理错误，例如重定向到登录页或显示错误消息
    }
}

/**
 * 发送一个带有CSRF令牌的POST请求。
 * @param {string} url - 请求的URL
 * @param {object} data - 请求体数据
 */
async function sendPostRequest(url, data) {
    if (!csrfTokenValue) {
        // 如果令牌未获取，尝试获取或提示错误
        console.warn('CSRF Token is not available. Attempting to fetch...');
        await fetchCsrfToken();
        if (!csrfTokenValue) {
            console.error('CSRF Token still not available after fetch attempt. Cannot send request.');
            return;
        }
    }

    try {
        const headers = {
            'Content-Type': 'application/json',
            // 将从/csrf接口获取的令牌值设置到相应的请求头中
            [csrfHeaderName]: csrfTokenValue
        };

        const response = await fetch(url, {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(data)
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const responseData = await response.json();
        console.log('Request successful:', responseData);
        return responseData;
    } catch (error) {
        console.error('Error sending POST request:', error);
        // 处理请求错误
    }
}

// 示例用法：
// 在应用启动时获取令牌
fetchCsrfToken().then(() => {
    // 之后可以发送POST请求
    sendPostRequest('/api/some-resource', { name: 'example', value: 123 });
});