CSRF 和 Multer - 无效的 CSRF 令牌错误答案

【问题标题】：CSRF and Multer - Invalid CSRF Token ErrorCSRF 和 Multer - 无效的 CSRF 令牌错误
【发布时间】：2017-07-29 21:11:42
【问题描述】：

当我添加对 CSRF 令牌的支持以确保提交安全时，我的多部分表单遇到了问题。我已将 CSRF 生成全局设置为我的 app.js 文件中的 req 对象，并且除了 multipart 之外的任何其他类型的 Web 表单都没有问题。我已经阅读了 multer 的常见问题，并且与 CSRF 的放置与 multer 设置相关，或者将其作为提交时的查询附加。出于安全原因，我宁愿不采用附加查询的方法，而是希望了解如何修复我的设置以像我的其他表单一样运行。

错误信息：

ForbiddenError: invalid csrf token
    at csrf (/Users/user/Desktop/Projects/node/test-app/node_modules/csurf/index.js:112:19)

app.js：

var csrf = require('csurf');
....

//Set CSRF for Form Tokens
app.use(csrf());
app.use(function(req, res, next){
    res.locals._csrf = req.csrfToken();
    next();
});

路线：

var upload = multer({
    storage: multerS3({
        s3: s3,
        bucket: options.Bucket,
        contentType: multerS3.AUTO_CONTENT_TYPE,
        acl: options.ACL,
        key: function(req, file, cb){
            var fileNameFormatted = file.originalname.replace(/\s+/g, '-').toLowerCase();
            cb(null, req.user.organizationId + '/' + uploadDate + '/' + fileNameFormatted);
        }
    }),
    fileFilter: function(req, file, cb){
        if(!file.originalname.match(/\.(jpg|jpeg|png|gif|csv|xls|xlsb|xlsm|xlsx)$/)){
            return cb('One of your selected files is not supported', false);
        }
        cb(null, true);
    }
}).array('fileUpload', 5);


appRoutes.route('/blog/create')

.get(function(req, res){
    res.render('pages/app/blog-create.hbs',{
        errorMessage: req.flash('error'),
        csrfToken: req.csrfToken()
    });
})

.post(function(req, res){

upload(req, res, function(err){
            if(err){
                req.flash('error', err);
                res.redirect(req.get('referer'));
                return;
            }

 models.Blog.create({
                date: req.body.date,
                title: req.body.title,
                content: req.body.content,
                userId: req.user.userId     
            }).then(function(){
                req.flash('info', 'Blog was successfully created.');
                res.redirect('/app');
            });
})
});

查看：

<form action="/app/blog/create" method="post" enctype="multipart/form-data" id="blogSubmission">
                <input type="hidden" name="_csrf" value="{{csrfToken}}">

....
</form>

【问题讨论】：

标签： node.js express csrf multer

【解决方案1】：

只需要在 csurf 之前加上 Multer -

app.use(multer().single('image-field-name'));
app.use(csurf());

并确保在 POST 期间传递 _csrf 值 -

<input type="hidden" name="_csrf" value="<%= csrfToken %>">

如果上述解决方案不起作用，则只需在 POST 操作中添加“_csrf”值 -

<form action="/admin/?_csrf=<%=csrfToken%>" method="POST" enctype="multipart/form-data">
</form>

【讨论】：

【解决方案2】：

嗨 :) 这有点晚了，但是（首先我可能不会说英语，所以如果您看到任何语法或拼写错误，请使用

{try(){understand()}catch(e){/*do nothing :)*/}}

方法:))

我上个月遇到了你的问题，太糟糕了，我找不到好的答案

但是你在这里:)))（老实说我不太擅长阅读其他代码，所以请阅读我的答案并弄清楚如何编辑你的代码）

老实说，如果您想使用通常的发布表单方法（有一种方法建议您首先获取并保存文件，然后检查它是我真的不太喜欢的 csrf），但如果如果你愿意做一些硬性的前端 javascript，那么你的日子就很好了：

整个想法是为您的表单设置一个标题，然后发送它（全部使用 AJAX 和 JQuery）：

这里有一个小例子说明你应该如何做：

$.ajax({
    cache: false,
    type: 'POST',
    url: 'the URL you want to post to',
    contentType: "what ever you want",
    headers: {"X-CSRF-TOKEN": csrfToken},
    data: your data,
    success: function (res) {
        some code after you get a response from server
        console.log(res)
    }
})

【讨论】：