将 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 文件上传的主要内容,如果未能解决你的问题,请参考以下文章

将 csrf 令牌传递给 Stripe

将 CSRF 令牌从节点传递给 REACT/FLUX

将 csrf 令牌传递给客户端应用程序

如何将 POST 数据中的 CSRF 令牌传递给 Django?

使用 CSRF_COOKIE_HTTPONLY 将 Django CSRF 令牌传递给 Angular

无法将附件传递给控制器​​:422 Unprocessable Entity