Node+express Multer Csrfでエラー

Question

node.js + express でWEBサービスを構築しようとしています。

Multerを使ったファイルのアップロードの仕組みを作りたくて、
下のようにプログラムを書きました。

var upload = multer({ dest: './upload_data/' }).single('upload_file');

app.get('/', function (req, res) {
	res.render('index.ejs');
});

app.post('/', function (req, res, next) {
	upload(req, res, function(err) {
		if (err) next(err);
		else 	res.render('result.ejs', {dd : req.file});
	});
});

	<form method="post", enctype="multipart/form-data", action="/">
		<input type="file", name="upload_file">
		<input type="submit" value="UPDATE">
	</form>

ココまでは上手く動いたのですが、csrfに対応させようとするとエラーになってしまいます。
ForbiddenError: invalid csrf token

csrfを実装したソースは下記のように書きました。

var ejs = require('ejs');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var csrf = require('csurf');

var app = express();

app.engine('ejs', ejs.renderFile);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(csrf({ cookie: true }));

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

var upload = multer({ dest: './upload_data/' }).single('upload_file');

app.get('/', function (req, res) {
	res.render('index.ejs');
});

app.post('/', function (req, res, next) {
	upload(req, res, function(err) {
		if (err) next(err);
		else 	res.render('result.ejs', {dd : req.file});
	});
});

	<form method="post", enctype="multipart/form-data", action="/">
		<input type="file", name="upload_file">
		<input type="submit" value="UPDATE">
		<input type="hidden" name="_csrf" value="<%= csrfToken %>">
	</form>

csrf+multerを使う為のコツを教えて頂きたいです。
よろしくお願いいたします。

Answer 1

自己解決したので記載します。

app.use(csrf)より前にapp.useでmulterを書いたらエラーが無くなりました。
但しこの場合ファイルのアップロードがされない場合でも必ずapp.use(multer)を通りますが
このやり方は問題ないのでしょうか？

var ejs = require('ejs');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var multer = require('multer');
var csrf = require('csurf');

var app = express();

app.engine('ejs', ejs.renderFile);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

//app.use(csrf)より前にapp.useでmulterを書いたらエラーが無くなりました。
app.use(multer({ dest: './upload_data/' }).single('upload_file'));
app.use(csrf({ cookie: true }));

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

app.get('/', function (req, res) {
    res.render('index.ejs');
});

app.post('/', function (req, res, next) {
    res.render('result.ejs', {dd : req.file});
});

<form method="post", enctype="multipart/form-data", action="/">
    <input type="file", name="upload_file">
    <input type="submit" value="UPDATE">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
</form>

Answer 2

csrfって質問タイトルに書いたほうがいいと思います。

よくわかりませんが外部モジュールはこれ(csrf)ですか？
こういうのもちゃんと記述しないと回答者はわかりません。こっちが予想して調べるのは非効率です。

外部モジュールを使っている場合はこれの呼び出し部分も正確に記載したほうがよろしいかと。

仮にこのモジュールだとした場合サンプル見る限り実装方法が正しいようには見えないのですが…

Comments

[uroncha]

大変失礼いたしました。
csrfの実装に困っている事、また現状実装方法の詳細を追記しました。
アドバイスよろしくお願いいたします。