Next.jsでのCSRF対策方法を教えてください

Question

前提・実現したいこと

Next.jsでStaticGenerationのホームページを作成しています。

ホームページにはContactフォームを設置していて、APIにPOSTすると入力内容をメール送信されるようになっています。機能自体は完成しているのですが、セキュリティ観点でCSRF対策を入れたいと考えています。

方法としては、フォームのページにセッション情報を埋め込んで、POSTリクエスト時にクライアント側のJSからセッション情報を送信して、サーバ側で検証すれば良いのだと思いますが、フォームページにセッション情報を埋め込む方法がわかりません。

Next.jsの公式も読んだのですが、該当箇所がよくわかりませんでした。

全体的な理解が足りていないのかもしれませんが、このあたりの実装方法のヒントや参考文献についてお知恵を拝借できますと助かります。よろしくお願いします。

contact.js

import Layout from "../components/layout"
import Tags from "./tags"
import SearchWindow from "./search_window"
import { getUniqTags } from "../lib/posts"
import axios from 'axios'

export async function getStaticProps() {

  const uniqTags = getUniqTags()

  return {
    props:{
      uniqTags
    }
  }
  
}

const submitFormData = (e) => {
  e.preventDefault()

  axios.post('/api/mailSender',
    { 
      'company': company,
      'nickname': nickname,
      'email': email,
      'question': question
    }
  ).then(() => {
    var myModal = new bootstrap.Modal(document.getElementById('myModal'))
    myModal.toggle()
  }).catch((error) => {
    console.log(error)
  })
}

export default function Contact({ uniqTags }) {
  return(
    <Layout>
      <div className="container content">
        <div className="row">
          <div className="col-md-9 mb-5">
            <form onSubmit={submitFormData}>
              <label htmlFor="company" className="form-label fw-bold">会社名　<span className="badge bg-secondary">任意</span></label>
              <input maxLength="30" type="text" className="form-control mb-3" id="company" placeholder="会社名を記入してください"/>
              <label htmlFor="nickname" className="form-label fw-bold">お名前（ニックネーム可）　<span className="badge bg-danger">必須</span></label>
              <input required maxLength="30" type="text" className="form-control mb-3" id="nickname" placeholder="お名前を記入してください"/>
              <label htmlFor="email" className="form-label fw-bold">Eメールアドレス　<span className="badge bg-danger">必須</span></label>
              <input required maxLength="50" type="email" className="form-control mb-3" id="email" placeholder="メールアドレスを記入してください"/>
              <label htmlFor="question" className="form-label fw-bold">お問い合わせ内容　<span className="badge bg-danger">必須</span></label>
              <textarea required maxLength="1000" className="form-control mb-5" id="question" rows="7" placeholder="お問い合わせ、ご相談内容を記入してください"/>
              <div className="d-flex justify-content-center">
                <input id="submitBtn" className="btn btn-success w-50" type="submit" value="この内容で送信する"/>
              </div>
              <div className="modal fade" id="myModal" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div className="modal-dialog">
                  <div className="modal-content">
                    <div className="modal-header">
                      <h5 className="modal-title" id="staticBackdropLabel">送信完了</h5>
                      <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div className="modal-body">
                      お問い合わせいただきありがとうございます。
                    </div>
                    <div className="modal-footer">
                      <button type="button" className="btn btn-secondary" data-bs-dismiss="modal" onClick={closeModal}>Close</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div className="col-md-3">
            <Tags uniqTags={uniqTags}/>
            <SearchWindow />
          </div>
        </div>
      </div>
    </Layout>
  )
}

/api/mailSender.js

import sgMail from '@sendgrid/mail'
import Cors from 'cors'
import initMiddleware from '../../lib/init-middleware'

const mailto = process.env.NEXT_PUBLIC_MAILTO
const mailkey = process.env.NEXT_PUBLIC_MAILKEY

const cors = initMiddleware(
   Cors({
    methods: ['POST'],
  })
)

export default async function handler(req, res) {
  
  await cors(req, res)

  if (req.method === 'POST') {
    
    const company = req.body.company
    const nickname = req.body.nickname
    const email = req.body.email
    const question = req.body.question

    sgMail.setApiKey(mailkey)
    const msg = {
      to: mailto,
      from: email,
      subject: "フォームからのお問い合わせ",
      html: `<p>お名前：${nickname}</p>
             <p>会社名：${company}</p>
             <p>お問い合わせ内容：${question}</p>`,
    }

    try {
      await sgMail.send(msg)
      console.log('Success to send mail')
      res.status(200).send()
    } catch(error) {
      console.log(error)
      res.status(500).send()
    }
    
  } else {
    res.status(400).send()
  }

};

Comments

[ockeghem]

情報が不足しています。ソースコードは開示できないのでしょうか。セッション管理の方法はどうやっていますか?

[sordes1219]

早速のコメントありがとうございます。ソースコードを追加しました。contact.jsがContactフォーム表示用、/api/mailSender.jsがメール送信APU用のコードになります。セッションは現場では管理できていません。

Answer 1

Next.jsは使ったことがないのですが、回答がつかないようなので、一般論として書きます。

まず前提として、フォームからAPIサーバに送信されるデータはaxios経由でJSON形式で送信されると想定しています。
この場合、Content-Type: application/json となるので、CORSの単純リクエストの要件から外れ、CSRF攻撃の前にプリフライトリクエストが飛びます。これに対してCORSの設定をしていなければPOST送信はされず、CSRF攻撃は成立しません。

ところが、上記前提には色々「抜け道」があります。このあたりがセキュリティの難しいところですね。

まず、Content-Type: text/plainのウェブフォームを使う攻撃があります。以下のようなフォームを使うものです。action属性を正規のAPIに変えて試してみるとよいでしょう。

<body>
  <form action='https://example.jp/api/mailSender' method=post enctype="text/plain">
      <input name='{"company":"Sony","nickname":"tom","email":"[e-mail]","question":"?' value='"}'>
    <input type=submit>
  </form>
</body>

このフォームによるHTTPリクエストは下記となります（主要部分のみ）。

POST /api/mailSender HTTP/1.1
Host: example.jp
Content-Type: text/plain
Content-Length: 71
Origin: http://evil.example.com
Referer: http://evil.example.com/trap.html

{"company":"Sony","nickname":"tom","email":"[e-mail]","question":"?="}

enctype=text/plainを悪用して、JSONデータとしてバリッドなものになっています。上記はウェブフォームからのリクエストなのでプリフライトリクエストによる保護はありません。
これの対策は、API側で、HTTPリクエストのContent-Typeがapplication/jsonになっていることを確認することです。

もう一つの可能性は、CORSが無制限に許容されている場合です。その場合は、プリフライトリクエストに対する許可レスポンスが返り、POSTリクエストが送信される結果、CSRF攻撃が成立します。

ここで気になるのは、ご提示いただいたソースコードにcorsの指定がしてあることです。本来、一つのオリジンのみを使用するのであれば、CORSの許可は必要ありません。一方、CORSの許可具合によっては、CSRF攻撃が成立します。

まとめると、以下がしてあれば、CSRF攻撃はできません。

• JSONデータを受け取る際にContent-Typeがapplication/jsonであることを確認している
• CORSの設定をしていないか、正しいオリジンのみを受け入れるように設定している

CSRF攻撃が成立するかどうかを試すことは簡単です。以下のようなJavaScriptをAPIサーバとは別のサーバにおいて、実行してみることです。先のenctype="text/plain"のウェブフォームも試してみることをお勧めします。

axios.post('https://example.jp/api/mailSender',
  { 
    'company': 'CSRF',
    'nickname': 'Alice',
    'email': '[e-mail]',  /* 受取可能なメールアドレスにしておく */
    'question': 'No question'
  }
).then(() => {
  console.log('Success')
}).catch((error) => {
  console.log(error)
})

Comments

[sordes1219]

丁寧な回答ありがとうございました。よくわかりました。
テストプログラムでContent-Type: text/plainの場合ではプリフライトが飛ばないことも確認しました。axiosでoriginヘッダーを偽装したらどうなるかも、試してみましたが、axiosでは書き換えできない仕様となっていました。

[ockeghem]

originヘッダはセキュリティ上の理由でJavaScript（jQuery、axios等も含めて）では改変できない仕様です。