将 csrf 令牌传递给 blueimp 文件上传
Posted
技术标签:
【中文标题】将 csrf 令牌传递给 blueimp 文件上传【英文标题】:pass csrf token to blueimp fileupload 【发布时间】:2015-01-31 16:16:38 【问题描述】:我正在使用 AngularJS 构建一个 SPA(单页应用程序),而对于 FileUpload,我正在尝试使用 Blueimp 文件上传。服务器端在 NodeJS 中,使用 csrf,因此所有请求都将使用 csrf 令牌(AngularJS 设置的 X-XSRF-TOKEN)发送到服务器。现在,当我尝试使用 Blueimp 上传文件时,它会失败并显示
“错误:无效的 csrf 令牌”
因为它在请求中附加了必要的令牌,所以现在我想知道如何设置令牌。请注意,我已经在使用 AngularJS,并且我没有将任何元标记设置为 csrf,但令牌在 cookie 中可用。
谢谢!!
【问题讨论】:
【参考方案1】:如果我理解正确,您可以编写一个在请求标头中设置令牌的 interseptor: AngularJS $http
【讨论】:
AngularJS 部分工作正常,我需要在文件上传之前设置相同,我认为在 jquery FileUpload (jquery ajax) 中。有什么想法吗?【参考方案2】:我已经使用以下方法修复了它:
$.ajaxSetup( headers: 'X-XSRF-TOKEN': $.cookie("XSRF-TOKEN") );
谢谢
【讨论】:
这里的风险在于,这会为所有 xhr 请求设置它,这意味着如果您向第三方发出 xhr 请求,您可能会将令牌泄露给第三方。 太好了,谢谢。这拯救了我的一天!您可以通过直接在 ajax 请求中添加该行来保护自己,以便标头仅对该特殊请求有效。【参考方案3】:万一有人像我一样偶然发现了这个页面,应该是
$.ajaxSetup(
headers:
'X-CSRF-TOKEN': $.cookie("XSRF-TOKEN")
);
CSRF 而不是 XSRF。
【讨论】:
这里的风险在于,这会为所有 xhr 请求设置它,这意味着如果您向第三方发出 xhr 请求,您可能会将令牌泄露给第三方。【参考方案4】:包括 CSRF 令牌在内的其他表单数据可以通过 fileupload 插件上的 formData
选项与上传请求一起传递。
https://github.com/blueimp/jQuery-File-Upload/wiki/Options#formdata
$('#whatever').fileupload(
url: '/Document/Upload'
paramName: 'file',
dataType: 'json',
pasteZone: null,
formData: [
name: 'X-CSRF-TOKEN',
value: getAntiCSRFToken()
]
)
【讨论】:
以上是关于将 csrf 令牌传递给 blueimp 文件上传的主要内容,如果未能解决你的问题,请参考以下文章
如何将 POST 数据中的 CSRF 令牌传递给 Django?