Express.js csrf token with jQuery Ajax

问题

I am trying to implement csrf protection into my project but I can't make it work with jQuery Ajax. (It works with normal posts requests, though)

If I tamper the token using chrome dev tools before I send the form, I still see "data is being processed" text rather than invalid csrf token error.

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;

send.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);
            });
    });
});

回答1:

Send the CSRF token inside the payload message:

$('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);
        });
});

To facilitate your work I think you can create a Jquery plugin to do it, something like this:

(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);
});

Example: http://jsfiddle.net/w7h4Lkxn/

回答2:

Check the header to see if its passing the tampered token in the cookie or as part of the form data. It looks like your setup is for using cookies. So changing it on the form shouldn't affect the cookie. Lemme know if that helps reveal the issue.

回答3:

your doing everything exactly right but you have to disable checking for the cookie entirely!

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

the author mentions it here https://github.com/expressjs/csurf/issues/52

thanks for the above code with the header post as this was crucial for validating the express session token and i have shared it with others

来源：https://stackoverflow.com/questions/33628343/express-js-csrf-token-with-jquery-ajax