如何使用 fetch API 和 VanillaJS 将 CSRF 令牌添加到 HTTP header

Question

我正在尝试将 POST-request 发送到配置为使用 Spring 安全性的服务器。提交请求时，出现 403 错误。这是由于 CSRF 保护引起的问题。在我的 Spring 安全配置中禁用 CSRF 时，POST 请求工作正常。

我正在使用提取 API 发送我的 POST-request。这允许指定 body 附带的 HTTP-header，其中包含我正在尝试 POST 的 JSON-object。我现在正在尝试将 CSRF 令牌添加到我的 HTTP-header。为此，我在我的 HTML 的 head-section 中添加了以下两个 meta-tags：

<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>

然后我将以下行添加到我的 JavaScript:

 const token = document.querySelector('meta[name="_csrf"]').content;
 const header = document.querySelector('meta[name="_csrf_header"]').content;

 let responsePromise = fetch(
     "myEndpoint",
     { method: 'POST', headers: {'Content-Type': 'application/json', header: token}, body: JSON.stringify(myJSON) });
    })

我假设 Spring 安全填写我的 CSRF-token 的内容。到目前为止，错误消息仍然存在。我认为我的 _csrf meta-tag 中可能没有任何内容。记录内容（令牌和 header）时，我只收到：

${_csrf.headerName}
${_csrf.token}

虽然我期待看到 header 名称“X-CSRF-Token”和实际令牌。那么会不会是Spring安全没有自动填写这个内容呢？

=======更新：

我的项目是Maven项目。我已将 Thymeleaf-dependency 添加到我的 pom.xml。我对 thymeleaf 了解不多，但它似乎是实现具有 Spring 安全性的登录机制的最简单方法。无论如何，在我的 meta-tags 中将 content 替换为 th:content 时，实际上会找到 header 和令牌并将记录在我的控制台中。我仍然无法 POST 我的请求，但 403 仍然存在。

Answer 1

在 thymeleaf 处理的属性前添加 'th'

<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>

如何使用 fetch API 和 VanillaJS 将 CSRF 令牌添加到 HTTP header

How to add the CSRF token to the HTTP header using fetch API and VanillaJS

csrf

spring-security

fetch-api