Express.js csrf 令牌与 jQuery Ajax

Posted 2023-03-10

【中文标题】Express.js csrf 令牌与 jQuery Ajax

【英文标题】：Express.js csrf token with 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 令牌并插入到您的有效负载消息中。只是一个想法......

是的，请回答。 // 好主意，我会研究一下。

【参考方案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

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