本文介绍了使用AJAX时CSRF令牌无效的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我开始学习NodeJs
,在js知识的推动下,我开始编写一些代码来创建用户注册逻辑。
基本上我已经通过以下方式配置了ExpressJS
:
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const session = require('express-session');
const csrf = require('csurf');
const cookieParser = require('cookie-parser');
app.use(session({
secret: 'foofofoo',
resave: false,
saveUninitialized: true,
cookie: { secure: true }
}));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(csrf());
app.use(function (req, res, next) {
var csrfToken = req.csrfToken();
res.cookie('XSRF-TOKEN', csrfToken);
res.locals.csrfToken = csrfToken;
next();
});
然后我为用户注册创建了一个基本的.ejs
视图:
<meta name="csrf-token" content="<%= csrfToken %>">
<p>
<label class="w3-text-blue"><b>User Name</b></label>
<input class="w3-input w3-border" id="uname" name="uname" type="text"></p>
<p>
<label class="w3-text-blue"><b>Password</b></label>
<input class="w3-input w3-border" id="upass" name="pass" type="text"></p>
<p>
<button class="w3-btn w3-blue" id="regForm">Register</button></p>
csrfToken
由上面的middleware
获取。
当用户按下按钮regForm
时,将调用此代码:
$("#regForm").click(function () {
let uname = $("#uname").val();
let upass = $("#upass").val();
let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
let regData =
{
'name': uname,
'pass': upass
};
$.ajax({
type: 'POST',
url: '/registerUser',
headers: {"X-CSRF-Token": token },
data: regData,
success: function (data) {
$("#mainDiv").html(data);
}
});
});
查看ajax
请求,令牌被正确传递:
但在控制台中我得到:
ForbiddenError:无效的CSRF令牌
这是路由方法:
app.post('/registerUser', function(req, res, next){
//todo
});
推荐答案
来自csurf docs:
在视图中,将csrfToken值设置为名为_CSRF的隐藏输入字段的值
首先,更改此设置:
<meta name="csrf-token" content="<%= csrfToken %>">
至此:
<input type="hidden" name="_csrf" value="<%= csrfToken %>" id="csrf">
然后在jQuery页面上更改此设置:
let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
{
'name': uname,
'pass': upass
};
至此:
let token = $('#csrf').val();
{
'name': uname,
'pass': upass,
'_csrf':token
};
如果您仍然有问题,请让我知道您尝试此操作时会发生什么情况。
PS:this问题是您问题的很好参考。
这篇关于使用AJAX时CSRF令牌无效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!