Express.js csrf令牌与jQuery Ajax [英] Express.js csrf token with jQuery Ajax
本文介绍了Express.js csrf令牌与jQuery Ajax的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果我在发送表单之前使用chrome开发工具篡改令牌，我仍然看到正在处理数据文本而不是无效的csrf令牌错误。
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（）;
//查看引擎设置
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）{
//将csrfToken传递给视图
res.render（'send' {csrfToken：req.csrfToken（）}）;
}）;
app.post（'/ form'，parseForm，csrfProtection，function（req，res）{
res.send（'data being being processed'）;
}）;
//开发错误处理程序
//将打印stacktrace
if（app.get（'env'）==='development'）{
app.use（function（err，req，res，next）{
res.status（err.status || 500）;
res.render（'error'，{
消息：err.message，
error：err
}）;
}）;
}
//生产错误处理程序
//没有堆栈跟踪泄漏给用户
app.use（function（err，req，res，next）{
res.status（err.status || 500）;
res.render（'error'，{
message：err.message，
error：{}
} ）;
}）;
module.exports = app;
send.jade
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
$ ，method ='POST'）
|最喜欢的颜色：
input（type ='text'，class =favori，name ='favoriteColor'）
按钮（type ='submit'）提交
脚本（src =javascripts /frontend/jquery/jquery-3.0.0-alpha1.js）
脚本（src =javascripts / test.js）
test.js
$（document）.ready（function（）{
$ .ajaxSetup（{
标题：{'X-CSRF-Token'：$（'meta [name =_ csrf]'）。attr（'content'）}
$ b $（'button'）。click（function（e）{
e.preventDefault（）;
var text = $（'。favori' ）$（$）
$（
$ / $ function（data）{
console.log（data）;
}）;
}）;
}）;
解决方案
在有效载荷消息内发送CSRF令牌：点击（function（e）{
e.preventDefault（）;
（$）
$ var text = $（'。favori'）。val（）;
alert（text）;
$ .post（
/ form，
{
文本：text，
_csrf：$（'meta [name =_ csrf]'）。attr（'content'）
}，function（data）{
console.log ）;
}）;
}）;
为了方便您的工作，我认为您可以创建一个Jquery插件来执行此操作： / p>
（function（$）{
$ .postCSRF = function（to，message，callback）{
message._csrf = $（'meta [name =_ csrf]'）。attr（'content'）;
$ .post（to，message，callback）;
};
}（jQuery））;
//使用示例：
$ .postCSRF（'/ form'，{text：'hi'}，function（res）{
console.log（res）
}）;例如： http://jsfiddle.net/w7h4Lkxn/
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);
});
});
});
解决方案 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/
这篇关于Express.js csrf令牌与jQuery Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
