【Next.js】<input type="hidden" /> を使わずに安全にフォームデータを送る方法

📝 はじめに

Next.js 14 では、Server Actions や useActionState を使うことで、フォーム送信の新しいスタイルが登場しました。この記事では、よくある「ToDoアプリ」を題材に、input type="hidden" を使わずに安全にサーバーに値を送る方法を紹介します。

🏡 よくある実装：<input type="hidden"/> の問題点

ToDoの編集フォームを作るとき、更新対象のID（todoId）を <input type="hidden"/> で渡す実装をしがちです。

<input type="hidden" name="todoId" value={todo.id} />

一見便利そうに見えますが、これは改ざんされる可能性があるため、セキュアな実装とは言えません。

• 🚨 ユーザーが todoId を書き換えられる

• 🚨 他人の ToDo を編集できてしまう可能性も…

✅ 解決策：formData.set() を使って値をプログラムで追加

useActionState を使えば、フォームに todoId を含めることなく、値をプログラムで追加して送信できます。

'use client'

import { useActionState } from 'react'
import { updateTodo } from '@/lib/actions'

export default function EditTodoForm({ todo }) {
  const [state, formAction] = useActionState(
    async (prevState, formData) => {
      // ← ここが重要！クライアント側でフォームに含めず値を追加
      formData.set('todoId', todo.id)
      return await updateTodo(prevState, formData)
    },
    {
      success: false,
      errors: {},
    }
  )

  return (
    <form action={formAction}>
      <input type="text" name="title" defaultValue={todo.title} />
      <button type="submit">更新</button>
    </form>
  )
}

🔐 なぜ安全なのか？

• todoId はフォームに含まれない

• hidden input に比べて、HTML上での目視による簡単な改ざんを防ぎやすい

しかし、これだけでは不十分です。絶対に必要なのは、以下のようなサーバー側の認可処理です。

本当に安全にするには

この方法は、ただ「値をフォームに含めない」だけで、JavaScript を書き換えれば、自由に todoId を仕込んだリクエストを送信できます。

それゆえ、サーバー側で「本当にその ToDo を変更してよいユーザーか？」を確認する処理が一番重要です。

🔧 サーバー側の例

'use server'
import { getServerSession } from 'next-auth'
import { db } from '@/lib/db'

export async function updateTodo(prevState: any, formData: FormData) {
  const session = await getServerSession()
  if (!session) {
    throw new Error('Unauthorized')
  }

  const todoId = formData.get('todoId') as string
  const title = formData.get('title') as string

  const todo = await db.todo.findUnique({ where: { id: todoId } })
  if (!todo || todo.userId !== session.user.id) {
    throw new Error('Forbidden')
  }

  await db.todo.update({
    where: { id: todoId },
    data: { title },
  })

  return { success: true, errors: {} }
}

⚠️ 注意点

• todo の情報はサーバーから取得し props に渡すようにしましょう（例: getTodo()）

• 認証済みユーザーかどうかの確認や、許可のあるIDかの認可処理は server action 側で必ず実装しましょう

✅ まとめ

このように、useActionState によりフォームの見た目をシンプルに保ちながら、hidden フィールドを使わずに値を渡すことができます。

Next.js 14 の useActionState と Server Actions を使えば、input type="hidden" に頼らず、フォームUI上の改ざんリスクを削減する手段として有用です。

しかし、本当の安全性を確保するためには、最終的にサーバー側での認可ロジックが一番重要です。「その ToDo を編集してよいのは本当にこのユーザーなのか」を server action の中でしっかり確認するようにしましょう。