如何在输入中使用 HTML 5 (data-) 添加 CSRF 令牌以上传文件？

Posted 2023-02-26

【中文标题】如何在输入中使用 HTML 5 (data-) 添加 CSRF 令牌以上传文件？

【英文标题】：How can I add CSRF token to upload file using HTML 5 (data-) inside an input?

【发布时间】：2018-09-08 09:54:47

【问题描述】：

我正在使用这个bootstrap-fileinput 插件在我的WebApp 中上传文件。 为了开发这个 WebApp，我正在使用：Bootstrap4、Thymeleaf 和 Spring Boot。

我想使用 html5 约定来使用那个插件，所以这是代码：

<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)"/>
</div>

但是我使用 Spring Security 启用了 CSRF 保护。因此，当我尝试上传 pdf 时，结果是：

Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-CSRF-TOKEN'.

我想使用 HTML5 对流添加 CSRF 令牌，例如：

<input .... data-toke="token"...>

这样我可以避免使用javascript。 有可能吗？

【参考方案1】：

您可以使用$_csrf.token 访问 csrf 令牌的值。所以：

<input ... th:data-token="$_csrf.token" ... />

【讨论】：

没什么变化.. 响应始终是：status":403,"error":"Forbidden","message":"Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-CSRF-TOKEN'.","path":"/path/1/pdf" 但在源页面中该值不为空