GitHub/kill-the-news
1
0
Fork 0
mirror of https://github.com/juherr/kill-the-news.git synced 2026-06-20 22:03:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace custom HMAC CSRF with hono/csrf middleware

Browse Source 
Removes 38-line hand-rolled HMAC-SHA256 implementation in favour of
the built-in hono/csrf, which validates the Origin header natively.

- Delete src/utils/csrf.ts
- Replace custom CSRF middleware with hono/csrf (Origin-header check)
- Remove csrfToken from ContextVariableMap, layout(), forms, and JS fetch() calls
- Update admin tests: swap X-CSRF-Token for Origin header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Herr
2026-05-22 10:28:26 +02:00
parent 7d375693b9
commit a0415cdc41
4 changed files with 26 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/admin.test.ts
+16 -16
View File
@@ -3,20 +3,17 @@ import { Hono } from "hono";
import app from "./admin";
import { createMockEnv } from "../test/setup";
import { Env } from "../types";
import { generateCsrfToken } from "../utils/csrf";
describe("Admin Routes", () => {
let testApp: Hono;
let mockEnv: Env;
let csrfToken: string;
let request: (path: string, init?: RequestInit) => Promise<Response>;
let loginAndGetCookie: () => Promise<string>;
beforeEach(async () => {
beforeEach(() => {
mockEnv = createMockEnv() as unknown as Env;
testApp = new Hono();
testApp.route("/admin", app);
csrfToken = await generateCsrfToken("test-password");
request = (path, init = {}) =>
Promise.resolve(testApp.request(path, init, mockEnv));
loginAndGetCookie = async () => {
@@ -97,7 +94,7 @@ describe("Admin Routes", () => {
const res = await request("/admin", {
headers: {
Cookie: authCookie,
"X-CSRF-Token": csrfToken,
Origin: "https://test.getmynews.app",
},
});
expect(res.status).toBe(200);
@@ -143,7 +140,7 @@ describe("Admin Routes", () => {
method: "POST",
headers: {
Cookie: authCookie,
"X-CSRF-Token": csrfToken,
Origin: "https://test.getmynews.app",
},
body: formData,
});
@@ -180,7 +177,7 @@ describe("Admin Routes", () => {
method: "POST",
headers: {
Cookie: authCookie,
"X-CSRF-Token": csrfToken,
Origin: "https://test.getmynews.app",
},
body: formData,
});
@@ -201,7 +198,7 @@ describe("Admin Routes", () => {
headers: {
Cookie: authCookie,
"Content-Type": "application/json",
"X-CSRF-Token": csrfToken,
Origin: "https://test.getmynews.app",
},
body: JSON.stringify({ title: "", description: "desc" }),
});
@@ -248,7 +245,7 @@ describe("Admin Routes", () => {
method: "POST",
headers: {
Cookie: authCookie,
"X-CSRF-Token": csrfToken,
Origin: "https://test.getmynews.app",
},
body: formData,
});
@@ -267,7 +264,7 @@ describe("Admin Routes", () => {
method: "POST",
headers: {
Cookie: authCookie,
"X-CSRF-Token": csrfToken,
Origin: "https://test.getmynews.app",
},
});
@@ -300,7 +297,7 @@ describe("Admin Routes", () => {
method: "POST",
headers: {
Cookie: authCookie,
"X-CSRF-Token": csrfToken,
Origin: "https://test.getmynews.app",
},
body: formData,
});
@@ -320,7 +317,7 @@ describe("Admin Routes", () => {
headers: {
Cookie: authCookie,
Accept: "application/json",
"X-CSRF-Token": csrfToken,
Origin: "https://test.getmynews.app",
},
},
);
@@ -340,7 +337,10 @@ describe("Admin Routes", () => {
formData.append("description", "Test");
const createRes = await request("/admin/feeds/create", {
method: "POST",
headers: { Cookie: authCookie, "X-CSRF-Token": csrfToken },
headers: {
Cookie: authCookie,
Origin: "https://test.getmynews.app",
},
body: formData,
});
expect(createRes.status).toBe(302);
@@ -361,7 +361,7 @@ describe("Admin Routes", () => {
const bulkDeleteRes = await request("/admin/feeds/bulk-delete", {
method: "POST",
headers: { Cookie: authCookie, "X-CSRF-Token": csrfToken },
headers: { Cookie: authCookie, Origin: "https://test.getmynews.app" },
body: bulkForm,
});
@@ -490,7 +490,7 @@ describe("Admin Routes", () => {
method: "POST",
headers: {
Cookie: authCookie,
"X-CSRF-Token": csrfToken,
Origin: "https://test.getmynews.app",
},
body: formData,
});
@@ -540,7 +540,7 @@ describe("Admin Routes", () => {
headers: {
Cookie: authCookie,
Accept: "application/json",
"X-CSRF-Token": csrfToken,
Origin: "https://test.getmynews.app",
},
},
);
src/routes/admin.ts
+10 -61
View File
@@ -15,7 +15,7 @@ import {
import { generateFeedId } from "../utils/id-generator";
import { designSystem } from "../styles/index";
import { interactiveScripts } from "../scripts/index";
import { generateCsrfToken, verifyCsrfToken } from "../utils/csrf";
import { csrf } from "hono/csrf";
type AppEnv = { Bindings: Env };
@@ -136,46 +136,15 @@ async function authMiddleware(c: Context, next: () => Promise<void>) {
// Apply auth middleware to all admin routes
app.use("*", authMiddleware);
// CSRF middleware: generates token for GET requests and validates on mutating requests
app.use("*", async (c, next) => {
// CSRF middleware: validates Origin header on mutating requests (POST/PUT/DELETE/PATCH)
// Skip on /admin/login — password itself provides protection for the pre-auth route
const csrfMiddleware = csrf({
origin: (origin, c) => origin === `https://${c.env.DOMAIN}`,
});
app.use("*", (c, next) => {
const path = new URL(c.req.url).pathname;
// Login route is pre-auth, so CSRF doesn't apply there
if (path === "/admin/login") {
return next();
}
const token = await generateCsrfToken(c.env.ADMIN_PASSWORD);
c.set("csrfToken", token);
if (
c.req.method === "POST" ||
c.req.method === "PUT" ||
c.req.method === "DELETE"
) {
// Accept token from X-CSRF-Token header (JS fetch calls)
const headerToken = c.req.header("X-CSRF-Token") ?? "";
if (headerToken) {
if (!(await verifyCsrfToken(c.env.ADMIN_PASSWORD, headerToken))) {
return c.text("Invalid CSRF token", 403);
}
return next();
}
// For HTML form submissions: clone the request body to read _csrf without consuming the stream
const contentType = c.req.header("Content-Type") ?? "";
if (
contentType.includes("application/x-www-form-urlencoded") ||
contentType.includes("multipart/form-data")
) {
const form = await c.req.raw.clone().formData();
const formToken = form.get("_csrf")?.toString() ?? "";
if (!(await verifyCsrfToken(c.env.ADMIN_PASSWORD, formToken))) {
return c.text("Invalid CSRF token", 403);
}
}
}
return next();
if (path === "/admin/login") return next();
return csrfMiddleware(c, next);
});
// Schema for feed creation
@@ -201,7 +170,7 @@ const authSchema = z.object({
// Base HTML layout with design system
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const layout = (title: string, content: any, csrfToken = "") => {
const layout = (title: string, content: any) => {
return html`<!DOCTYPE html>
<html>
<head>
@@ -209,7 +178,6 @@ const layout = (title: string, content: any, csrfToken = "") => {
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<meta name="csrf-token" content="${csrfToken}" />
<style>
${raw(designSystem)}
</style>
@@ -391,11 +359,6 @@ app.get("/", async (c) => {
<div class="card">
<h2>Create New Feed</h2>
<form action="/admin/feeds/create" method="post">
<input
type="hidden"
name="_csrf"
value="${c.var.csrfToken ?? ""}"
/>
<div class="form-group">
<label for="title">Feed Title</label>
<input type="text" id="title" name="title" required />
@@ -1262,7 +1225,6 @@ app.get("/", async (c) => {
method: 'POST',
headers: {
'Accept': 'application/json',
'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || '',
},
credentials: 'same-origin',
});
@@ -1519,7 +1481,6 @@ app.get("/", async (c) => {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
''X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]')?.content || '',
},
credentials: 'same-origin',
body: JSON.stringify({ feedIds: batch }),
@@ -1569,7 +1530,6 @@ app.get("/", async (c) => {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
''X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]')?.content || '',
},
credentials: 'same-origin',
body: JSON.stringify({ feedIds: [feedId] }),
@@ -1652,7 +1612,6 @@ app.get("/", async (c) => {
`)};
</script>
`,
c.var.csrfToken ?? "",
),
);
});
@@ -1789,11 +1748,6 @@ app.get("/feeds/:feedId/edit", async (c) => {
<div class="card">
<form action="/admin/feeds/${feedId}/edit" method="post">
<input
type="hidden"
name="_csrf"
value="${c.var.csrfToken ?? ""}"
/>
<div class="form-group">
<label for="title">Feed Title</label>
<input
@@ -1838,7 +1792,6 @@ ${(feedConfig.allowed_senders || []).join("\n")}</textarea
</div>
</div>
`,
c.var.csrfToken ?? "",
),
);
});
@@ -2833,7 +2786,6 @@ app.get("/feeds/:feedId/emails", async (c) => {
method: 'POST',
headers: {
'Accept': 'application/json',
''X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]')?.content || '',
},
credentials: 'same-origin',
});
@@ -3085,7 +3037,6 @@ app.get("/feeds/:feedId/emails", async (c) => {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || '',
},
credentials: 'same-origin',
body: JSON.stringify({ emailKeys: batch }),
@@ -3147,7 +3098,6 @@ app.get("/feeds/:feedId/emails", async (c) => {
`)};
</script>
`,
c.var.csrfToken ?? "",
),
);
});
@@ -3508,7 +3458,6 @@ ${emailData.content.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</pre
`)};
</script>
`,
c.var.csrfToken ?? "",
),
);
});