将 csrf 令牌传递给 blueimp 文件上传答案

【问题标题】：pass csrf token to blueimp fileupload将 csrf 令牌传递给 blueimp 文件上传
【发布时间】：2015-01-31 16:16:38
【问题描述】：

我正在使用 AngularJS 构建一个 SPA（单页应用程序），而对于 FileUpload，我正在尝试使用 Blueimp 文件上传。服务器端在 NodeJS 中，使用 csrf，因此所有请求都将使用 csrf 令牌（AngularJS 设置的 X-XSRF-TOKEN）发送到服务器。现在，当我尝试使用 Blueimp 上传文件时，它会失败并显示

“错误：无效的 csrf 令牌”

因为它在请求中附加了必要的令牌，所以现在我想知道如何设置令牌。请注意，我已经在使用 AngularJS，并且我没有将任何元标记设置为 csrf，但令牌在 cookie 中可用。

谢谢！！

【问题讨论】：

标签： jquery angularjs node.js csrf blueimp

【解决方案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()
            }]
        })

【讨论】：