JavaScript: Expressでcsrfがうまく動作しない

Question

JavaScriptとExpressでcsrfがうまく動作しないです。
うまくいけばejsで書いた部分が表示されるはずなのですが'req.csrfToken() is not a function'と言う表示が出てしまいます。

npm i mongoose csurf express-session method-override connect-flash --s

で必要なものはインストールしました。

参考にしたサイト

app.js

require('./db/mongo');

const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');

const session = require("express-session");
const csurf = require("csurf");
const mongoose = require("mongoose");
const flash = require("connect-flash");
const methodOverride = require("method-override");
const bodyParser = require('body-parser');

const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');

const app = express();

mongoose.connect('mongodb://localhost/practice');

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

app.use(logger('dev'));
app.use(express.json()); 
app.use(bodyParser.json()); 
app.use(express.urlencoded({ extended: false })); 
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};

    // render the error page
    res.status(err.status || 500);
    res.render('error');
});


app.use(methodOverride(function(req, res){
    if( req.body && typeof req.body === "object" && "_method" in req.body ){
        const method = req.body._method;
        delete req.body._method;
        return method;
    }
}));

app.use(session({
    secret: 'a',
    resave: false,
    saveUninitialized: false,
    cookie: {
        httpOnly: true,
        secure: true,
        maxage: 1000 * 60 * 30 // 30 minutes
    }
}));
app.use(csurf());
app.use(flash());

module.exports = app;

index.js

router.get('/new', function (req, res) {
    res.render('new', {
        title: 'Add message',
        reqCsrf: req.csrfToken(),
    })
});

index.ejs

<form action="/create" method="post">
    <input type="hidden" name="_csrf" value="<%= reqCsrf %>">
    <p>
        <input type="text" name="title" value="" size="60">
        <% if( errors && errors.title ){ %>
            <strong><%= errors.title.message %></strong>
        <% } %>
    </p>
    <p><textarea name="contents" cols="60" rows="12"></textarea></p>
    <p><button type="submit">Create</button></p>
</form>

どのようにすれば動くようになるでしょうか？
できればコードの大きな改変をせずに動作させるようにしたいです。

Comments

[m.ts10806]

調べてみたこと、やってみたことを追記してください。また参考先サイトがあればURLも質問に追記してください。既に見た先が回答についてしまうと無駄なやり取りが発生しますし、もしかしたら参考記事の理解が間違っているために解決に至れていないのかもしれません。

[Nippun]

修正しました

[HayatoKamono]

app.use(csurf());より上の行に書かれてるコードを省略せずに記載してください。おそらく、そこに答えがあると思います。というか、試したことの中に公式ドキュメントを読むというのがないので、そちらを読めば解決すると思います。https://github.com/expressjs/csurf/blob/master/README.md

[m.ts10806]

「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1

[Nippun]

情報不足ですみません。追加しました。

[HayatoKamono]

上から２つ目のコードブロックは何という名前のファイルに書かれてるものなのですか？

[Nippun]

view のindex.jsです。

[HayatoKamono]

これのことですか？ -> const indexRouter = require('./routes/index');

[Nippun]

そうです。viewでなくroutesです。すみませんでした。

Answer 1

参考にされている記事の中盤に「app.jsの編集」という見出しのセクションがありますが、そこにあるコードをもう一度よく確認してみて下さい。

app.use(csurf());
app.use(flash());

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

参考にされているサイトのコードを見ると、このようにcsurfミドルウェアの設定を各ルートの設定よりも先に行なっています。

この順序が逆転してしまうと、csurfミドルウェアの設定が行われていない状態で、各ルートがリクエストを処理することになるので、今回のエラーメッセージが出てしまうと思われます。

動作未確認ですが、一度、順序の変更を試してみて下さい。

また、あわせてこの機会にexpressのmiddlewareの仕組みを確認されることをお勧めいたします。

http://expressjs.com/ja/guide/writing-middleware.html
http://expressjs.com/ja/guide/using-middleware.html

Comments

[Nippun]

動きました！！
ありがとうございます。
順序は関係ないと思っていました。
素晴らしい観察眼ですね！！