Fix cloudflare-pages issue, add example (#82)

* Modifies getTokenString(), clones request before reading it * Add next15-cloudflare-pages example Fixes #80
kubetail-org · Nov 21, 2024 · c5d975f · c5d975f
1 parent 0ae2bdb
commit c5d975f
Show file tree

Hide file tree

Showing 21 changed files with 6,407 additions and 3 deletions.
diff --git a/examples/next15-cloudflare-pages/.eslintrc.json b/examples/next15-cloudflare-pages/.eslintrc.json
@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript",
+    "plugin:eslint-plugin-next-on-pages/recommended"
+  ],
+  "plugins": [
+    "eslint-plugin-next-on-pages"
+  ]
+}
diff --git a/examples/next15-cloudflare-pages/README.md b/examples/next15-cloudflare-pages/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/examples/next15-cloudflare-pages/app/form-handler/route.ts b/examples/next15-cloudflare-pages/app/form-handler/route.ts
@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server';
+
+export const runtime = 'edge';
+
+export async function POST() {
+  return NextResponse.json({ status: 'success' });
+}
diff --git a/examples/next15-cloudflare-pages/app/layout.tsx b/examples/next15-cloudflare-pages/app/layout.tsx
@@ -0,0 +1,21 @@
+import { Metadata } from 'next';
+
+export const runtime = 'edge';
+
+export const metadata: Metadata = {
+  title: 'edge-csrf html form submission example',
+};
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/examples/next15-cloudflare-pages/app/page.tsx b/examples/next15-cloudflare-pages/app/page.tsx
@@ -0,0 +1,59 @@
+import { headers } from 'next/headers';
+
+import '../styles/globals.css';
+
+export const runtime = 'edge';
+
+export default async function Page() {
+  const headersList = await headers();
+  const csrfToken = headersList.get('X-CSRF-Token') || 'missing';
+
+  return (
+    <>
+      <p>
+        CSRF token value:
+        {csrfToken}
+      </p>
+      <h2>HTML Form Submission Example:</h2>
+      <form action="/form-handler" method="post">
+        <legend>Form without CSRF (should fail):</legend>
+        <input type="text" name="input1" />
+        <button type="submit">Submit</button>
+      </form>
+      <br />
+      <form action="/form-handler" method="post">
+        <legend>Form with incorrect CSRF (should fail):</legend>
+        <input type="hidden" name="csrf_token" value="notvalid" />
+        <input type="text" name="input1" />
+        <button type="submit">Submit</button>
+      </form>
+      <br />
+      <form action="/form-handler" method="post">
+        <legend>Form with CSRF (should succeed):</legend>
+        <input type="hidden" name="csrf_token" value={csrfToken} />
+        <input type="text" name="input1" />
+        <button type="submit">Submit</button>
+      </form>
+      <h2>HTML File Upload Example:</h2>
+      <form action="/form-handler" method="post" encType="multipart/form-data">
+        <legend>Form without CSRF (should fail):</legend>
+        <input type="file" name="file1" />
+        <button type="submit">Submit</button>
+      </form>
+      <br />
+      <form action="/form-handler" method="post" encType="multipart/form-data">
+        <legend>Form with incorrect CSRF (should fail):</legend>
+        <input type="hidden" name="csrf_token" value="notvalid" />
+        <input type="file" name="file1" />
+        <button type="submit">Submit</button>
+      </form>
+      <br />
+      <form action="/form-handler" method="post" encType="multipart/form-data">
+        <legend>Form with CSRF (should succeed):</legend>
+        <input type="hidden" name="csrf_token" value={csrfToken} />
+        <input type="file" name="file1" />
+        <button type="submit">Submit</button>
+      </form>
+    </>
+  );
+}
diff --git a/examples/next15-cloudflare-pages/middleware.ts b/examples/next15-cloudflare-pages/middleware.ts
@@ -0,0 +1,10 @@
+import { createCsrfMiddleware } from '@edge-csrf/nextjs';
+
+// initalize csrf protection middleware
+const csrfMiddleware = createCsrfMiddleware({
+  cookie: {
+    secure: process.env.NODE_ENV === 'production',
+  },
+});
+
+export const middleware = csrfMiddleware;
diff --git a/examples/next15-cloudflare-pages/next-env.d.ts b/examples/next15-cloudflare-pages/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/examples/next15-cloudflare-pages/next.config.ts b/examples/next15-cloudflare-pages/next.config.ts
@@ -0,0 +1,12 @@
+import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+if (process.env.NODE_ENV === 'development') {
+  (async () => await setupDevPlatform())();
+}
+
+export default nextConfig;
diff --git a/examples/next15-cloudflare-pages/package.json b/examples/next15-cloudflare-pages/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "next15-cloudflare-pages",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "pages:build": "pnpm dlx @cloudflare/next-on-pages",
+    "preview": "pnpm run pages:build && wrangler pages dev",
+    "deploy": "pnpm run pages:build && wrangler pages deploy"
+  },
+  "dependencies": {
+    "@edge-csrf/nextjs": "^2.5.2",
+    "next": "15.0.3",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106"
+  },
+  "devDependencies": {
+    "@cloudflare/next-on-pages": "^1.13.5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "eslint-plugin-next-on-pages": "^1.13.5",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5",
+    "wrangler": "^3.88.0"
+  },
+  "packageManager": "[email protected]+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387"
+}