🐢

Next.jsで意図しない直リンクを防ぐ

2025/01/12に公開

これは何?

  • 入力フォームの確認画面のように、直リンクを想定しないページへのアクセスを検知する方法について記す
  • 環境
    • Next.js 15.1.2(App Router)

ユースケース

入力フォームの確認画面に直リンクされたら、入力フォームの作成画面へリダイレクト

実装方針

  • リファラとの完全一致を条件とする
  • 環境差異をなくす

コード

  • 確認画面にif文追加
  • .env.development,.env.productionにそれぞれPROTOCOLを追加
    • それぞれhttp://,https://とする
import Form from "@/app/ui/use-conform/create/confirm/form";
import { headers } from "next/headers";
import { redirect } from "next/navigation";

export default async function Page() {
  const headerList = await headers();

  if (
    headerList.get("referer") !==
    `${process.env.PROTOCOL}${headerList.get("host")}/use-conform/create`
  ) {
    redirect("/use-conform/create");
  }

  return (
    <main>
      <Form />
    </main>
  );
}

感想

PROTOCOLよりSCHEMEのほうがそれっぽいかもしれない。

Discussion