如何为使用HTML5 data-属性的文件上传Input添加CSRF Token？

云原生阿岚

2026-5-21

为bootstrap-fileinput添加CSRF Token（Spring Boot + Thymeleaf环境）

因为你已经启用了Spring Security的CSRF保护，所有POST请求都需要携带有效的CSRF Token才能通过验证。bootstrap-fileinput的AJAX上传请求默认不会自动带上这个Token，所以需要手动配置，下面提供两种适配Thymeleaf的实现方式：

方法1：通过HTML data属性直接配置

你可以在现有的<input>标签上添加data-ajax-headers属性，利用Thymeleaf的表达式注入CSRF的Header名称和Token值：

<div class="file-loading">
  <input 
    id="uploadPDF" 
    type="file" 
    class="file" 
    data-theme="fas" 
    data-allowed-file-extensions='["pdf"]' 
    data-language="it" 
    data-type="POST" 
    th:data-upload-url="@{/path/{id}/pdf(id=${myObject.id})}"
    th:data-ajax-headers='{"${_csrf.headerName}": "${_csrf.token}"}'
  />
</div>

这里Thymeleaf会自动替换${_csrf.headerName}和${_csrf.token}为Spring Security生成的对应值（默认Header名称是X-CSRF-TOKEN）。

方法2：通过JavaScript初始化插件（更灵活）

如果需要更复杂的配置，推荐用JS初始化插件，明确设置AJAX请求的Headers：

首先，在页面头部通过Thymeleaf获取CSRF信息：

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

然后编写JS代码初始化fileinput：

// 获取CSRF Token和Header名称
const csrfToken = document.querySelector('meta[name="_csrf"]').content;
const csrfHeader = document.querySelector('meta[name="_csrf_header"]').content;

// 初始化fileinput
$('#uploadPDF').fileinput({
  theme: 'fas',
  allowedFileExtensions: ['pdf'],
  language: 'it',
  uploadUrl: /*[[@{/path/{id}/pdf(id=${myObject.id})}]]*/ '',
  ajaxSettings: {
    headers: {
      [csrfHeader]: csrfToken
    }
  }
});

这种方式的好处是可以更灵活地控制插件的其他行为，比如上传前的校验、回调函数等。