Express.js csrf 令牌与 jQuery Ajax答案

【问题标题】：Express.js csrf token with jQuery AjaxExpress.js csrf 令牌与 jQuery Ajax
【发布时间】：2016-02-11 05:35:57
【问题描述】：

我正在尝试在我的项目中实现 csrf 保护，但我无法使其与 jQuery Ajax 一起使用。（不过，它适用于普通的帖子请求）

如果我在发送表单之前使用 chrome 开发工具篡改了令牌，我仍然会看到“正在处理数据”文本而不是 invalid csrf token 错误。

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var csrf = require('csurf');
var bodyParser = require('body-parser');
var router = express.Router();
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
//app.set('strict routing', true);
app.set('view options', {layout: false});

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser());

var csrfProtection = csrf({ cookie: true });
var parseForm = bodyParser.urlencoded({ extended: false });

app.use(express.static(path.join(__dirname, 'public')));

app.get('/form', csrfProtection, function(req, res) {
    // pass the csrfToken to the view
    res.render('send', { csrfToken: req.csrfToken() });
});


app.post('/form', parseForm, csrfProtection, function(req, res) {
    res.send('data is being processed');
});


// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function (err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function (err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

module.exports = app;

发送.jade

html
    head
        meta(name='_csrf', content='#{csrfToken}')
    body
        form(action='/form', method='POST')
            |   Favorite color:
            input(type='text', class="favori", name='favoriteColor')
            button(type='submit') Submit
    script(src="javascripts/frontend/jquery/jquery-3.0.0-alpha1.js")
    script(src="javascripts/test.js")

test.js

$(document).ready(function () {

    $.ajaxSetup({
        headers: {'X-CSRF-Token': $('meta[name="_csrf"]').attr('content')}
    });

    $('button').click(function (e) {
        e.preventDefault();
        var text = $('.favori').val();
        alert(text);
        $.post(
            "/form",
            {
                text: text
            }, function (data) {
                console.log(data);
            });
    });
});

【问题讨论】：

尝试在负载消息$.post( "/form", { text: text, _csrf : $('meta[name="_csrf"]').attr('content') }, function (data) { console.log(data); });中发送csrf令牌
它可以工作，但是我需要为每个 ajax 请求包含 csrf。有没有办法使用 ajaxSetup 来实现同样的事情，这样我就不需要重复同样的事情了？
可能不，我最后一次尝试这样做时，我需要在有效负载 ajax 消息中包含 _csrf 令牌。我可以回答您的问题以便您接受吗？
也许您可以创建一个 Jquery 插件来自动获取 _csrf 令牌并插入到您的有效负载消息中。只是一个想法......
是的，请回答。 // 好主意，我会研究一下。

标签： node.js express csrf

【解决方案1】：

检查标头以查看它是否在 cookie 中或作为表单数据的一部分传递了被篡改的令牌。看起来您的设置是为了使用 cookie。所以在表单上改变它不应该影响cookie。让我知道这是否有助于揭示问题。

【讨论】：

它会随每个请求发送 _csrf 令牌（cookie），因此它可以正常工作。但是，当提出请求时，我如何“验证”它呢？
查看 index.js github.com/expressjs/csurf/blob/master/index.js 你会想要在路由中实现验证令牌。
@salep 当您查看 csurf index.js 时，您会注意到 csrf 函数具有下一个刻度，它将流量传递回其他函数不执行的路由，您需要专门调用这些函数如果您想访问他们的使用情况。 index.js 底部有 csrf verifytoken。

【解决方案2】：

在负载消息中发送 CSRF 令牌：

$('button').click(function (e) {
    e.preventDefault();
    var text = $('.favori').val();
    alert(text);
    $.post(
        "/form",
        {
            text: text,
            _csrf : $('meta[name="_csrf"]').attr('content')
        }, function (data) {
            console.log(data);
        });
});

为了方便您的工作，我认为您可以创建一个 Jquery 插件来执行此操作，如下所示：

(function( $ ) {
    $.postCSRF = function(to, message, callback) {
        message._csrf = $('meta[name="_csrf"]').attr('content');
        $.post(to, message, callback);
    };
}( jQuery ));

// Usage example:
$.postCSRF('/form',{text:'hi'},function(res) {
    console.log(res);
});

示例：http://jsfiddle.net/w7h4Lkxn/

【讨论】：

该死，太好了。谢谢。
甜蜜。或者，您可以在隐藏的输入中添加 csrf。
我们如何在服务器端验证令牌？我们需要将其存储在 cookie 中吗？

【解决方案3】：

您所做的一切都完全正确，但您必须完全禁用对 cookie 的检查！

var csrfProtection = csurf({ cookie: false });

作者在这里提到 https://github.com/expressjs/csurf/issues/52

感谢上面带有标题帖子的代码，因为这对于验证快速会话令牌至关重要，我已经与其他人分享了它

【讨论】：