🐢
Next.jsで意図しない直リンクを防ぐ
これは何?
- 入力フォームの確認画面のように、直リンクを想定しないページへのアクセスを検知する方法について記す
- 環境
- 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