Ajax post 给出 403、csrf、node&express

Question

所以之前我设法通过一个表单传递 csrf 令牌，一个登录表单。但是在尝试通过单击某个元素来更改页面时无法传递 csrf 令牌，p.

App.js

var csrf = require('csurf');
//bunch of requires

var routes = require('./routes/index');
var users = require('./routes/users');
var profile = require('./routes/profile');
var statistics = require('./routes/statistics');

var app = express();


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

app.use(logger('dev'));

//Security shyts

app.use(helmet());
app.use(helmet.xssFilter({ setOnOldIE: true }));
app.use(helmet.frameguard('deny'));
app.use(helmet.hsts({maxAge: 7776000000, includeSubdomains: true}));
app.use(helmet.hidePoweredBy());
app.use(helmet.ieNoOpen());
app.use(helmet.noSniff());
app.use(helmet.noCache());

// rest of USE
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(session({secret: 'anystringoftext', saveUninitialized: true, resave: true, httpOnly: true, secure: true}));
app.use(csrf()); // Security, has to be after cookie and session.
app.use(flash());
app.use(express.static(path.join(__dirname, 'public')));

// csrfToken usage
app.use(function (req, res, next) {
  var token = req.csrfToken();
  res.locals.csrfToken = token;
  next();
});

app.use('/', routes);
app.use('/users', users);
app.use('/profile', profile);
app.use('/statistics', statistics);

//Error handlers

module.exports = app;

profileSite.js

$( document ).ready(function() {
    /*Hide elements*/
     .
     .

    /*Insert elements via effects*/
     .
     .


// The problem
    $('#statistics').click(function () {
        $.post('statistics');
    });



    /*Fade out elements*/
    $('.selection').click(function(){
        $('body').fadeOut(500);
    });
    $('.settings').click(function() {
        $('.layer').fadeToggle();
    });
    $('.exit').click(function(){
        $('.layer').fadeToggle();
    });
    $('.save').click(function(){
        $('.layer').fadeToggle();
    });
});

profile.ejs

<meta name="_csrf" content="<%= csrfToken %>">
//A bunch of html tags

我也尝试过使用输入，但无济于事。

<input type="hidden" name="_csrf" value="<%= csrfToken %>">

Profile.js

var express = require('express');
var router = express.Router();
var connectDB = require('../public/javascripts/connectDB.js');

/* GET profile page. */
router.get('/', function(req, res, next) {
//A bunch of queries and stuff
});

router.post('/statistics',function(req,res,next){
    console.log('it passed!');
    res.redirect('statistics);
});

module.exports = router;

statistics.js

var express = require('express');
var router = express.Router();

/* GET statistics listing. */
router.get('/profile', function(req, res, next) {
    res.render('statistics',{title:'stats?');
});

module.exports = 路由器；

如果问题中插入了很多多余的代码，我深表歉意。这也是我点击 p 元素后得到的错误。

在 IntelliJ 上：

POST /statistics 403 1.476 ms - 887

从浏览器控制台：

POST http://localhost:3000/statistics 403 
(Forbidden)n.ajaxTransport.k.cors.a.crossDomain.send @ 
jquery.js:8630n.extend.ajax @ jquery.js:8166n.each.n.(anonymous function) @ 
jquery.js:8311(anonymous function) @ profileSite.js:28n.event.dispatch @ 
jquery.js:4435n.event.add.r.handle @ jquery.js:4121

所以我尝试通过 $.post('statistics',{data:inputData}) 中的数据传递 csrf 令牌是让 data = _csrf,token.. 和 inputData 作为 csrfToken,req.csrfToken ,body.csrfToken..

Answer 1

其实很简单：

  $.ajaxSetup({
        headers: {'X-CSRF-Token': $('meta[name="_csrf"]').attr('content')}
    });

在 profileSite.js 文件中。