Implement CORS handling in tldraw-sync-worker

- Introduced a set of functions to manage CORS headers and validate allowed origins.
- Replaced the previous CORS setup with a more flexible approach, allowing specific origins and Vercel preview URLs.
- Updated the router to enforce CORS checks and handle preflight requests for OPTIONS method.
- Enhanced the /connect and /unfurl routes to include CORS headers in responses.

Author: mdroidian

apps/tldraw-sync-worker/worker/worker.ts

@@ -1,33 +1,93 @@
 import { handleUnfurlRequest } from "cloudflare-workers-unfurl";
-import { AutoRouter, cors, error, IRequest } from "itty-router";
+import { AutoRouter, error, IRequest } from "itty-router";
 import { Environment } from "./types";
 
 // make sure our sync durable object is made available to cloudflare
 export { TldrawDurableObject } from "./TldrawDurableObject";
 
-// we use itty-router (https://itty.dev/) to handle routing. in this example we turn on CORS because
-// we're hosting the worker separately to the client. you should restrict this to your own domain.
-const { preflight, corsify } = cors({ origin: "*" });
+const ALLOWED_ORIGINS = [
+  "https://roamresearch.com",
+  "http://localhost:3000",
+  "app://obsidian.md",
+];
+
+const isVercelPreviewUrl = (origin: string): boolean =>
+  /^https:\/\/.*-discourse-graph-[a-z0-9]+\.vercel\.app$/.test(origin);
+
+const isAllowedOrigin = (origin: string): boolean =>
+  ALLOWED_ORIGINS.includes(origin) ||
+  ALLOWED_ORIGINS.some((allowedOrigin) => origin.startsWith(allowedOrigin)) ||
+  isVercelPreviewUrl(origin);
+
+const setCorsHeaders = ({
+  request,
+  response,
+}: {
+  request: IRequest;
+  response: Response;
+}): Response => {
+  const origin = request.headers.get("origin");
+  if (origin && isAllowedOrigin(origin)) {
+    response.headers.set("Access-Control-Allow-Origin", origin);
+    response.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+    response.headers.set(
+      "Access-Control-Allow-Headers",
+      "Content-Type, Authorization, x-vercel-protection-bypass",
+    );
+  }
+  return response;
+};
+
+const handlePreflight = (request: IRequest): Response => {
+  const origin = request.headers.get("origin");
+  if (!origin || !isAllowedOrigin(origin)) {
+    return error(403, "Origin not allowed");
+  }
+
+  return new Response(null, {
+    status: 204,
+    headers: {
+      "Access-Control-Allow-Origin": origin,
+      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+      "Access-Control-Allow-Headers":
+        "Content-Type, Authorization, x-vercel-protection-bypass",
+      "Access-Control-Max-Age": "86400",
+    },
+  });
+};
+
+const enforceAllowedOrigin = (request: IRequest): Response | void => {
+  if (request.method === "OPTIONS") return;
+  const origin = request.headers.get("origin");
+  if (origin && !isAllowedOrigin(origin)) {
+    return error(403, "Origin not allowed");
+  }
+};
+
 const router = AutoRouter<IRequest, [env: Environment, ctx: ExecutionContext]>({
-  before: [preflight],
-  finally: [corsify],
+  before: [enforceAllowedOrigin],
   catch: (e) => {
     console.error(e);
     return error(e);
   },
 })
+  .options("*", handlePreflight)
   // requests to /connect are routed to the Durable Object, and handle realtime websocket syncing
-  .get("/connect/:roomId", (request, env) => {
+  .get("/connect/:roomId", async (request, env) => {
     const id = env.TLDRAW_DURABLE_OBJECT.idFromName(request.params.roomId);
     const room = env.TLDRAW_DURABLE_OBJECT.get(id);
-    return room.fetch(request.url, {
+    const response = await room.fetch(request.url, {
       headers: request.headers,
       body: request.body,
     });
+    return setCorsHeaders({ request, response });
   })
 
   // bookmarks need to extract metadata from pasted URLs:
-  .get("/unfurl", handleUnfurlRequest);
+  .get("/unfurl", async (request) => {
+    const response = await handleUnfurlRequest(request);
+    return setCorsHeaders({ request, response });
+  });
 
 // export our router for cloudflare
 export default router;