Express.js csrf令牌与jQuery Ajax [英] Express.js csrf token with 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屋!