fix: Fix builder logout CORS (#5752)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/routes-tests/builder-logout.test.ts

@@ -0,0 +1,115 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+const logoutMock = vi.hoisted(() => vi.fn());
+
+vi.mock("~/services/builder-auth.server", () => ({
+  builderAuthenticator: {
+    logout: logoutMock,
+  },
+}));
+
+import { action } from "../routes/builder-logout";
+
+const projectOrigin =
+  "https://p-042d35b0-718e-4c5f-a5dd-8568282366e5.apps.webstudio.is";
+const dashboardOrigin = "https://apps.webstudio.is";
+
+const callAction = (request: Request) =>
+  action({
+    request,
+    params: {},
+    context: {},
+  });
+
+describe("builder logout route", () => {
+  beforeEach(() => {
+    logoutMock.mockReset();
+  });
+
+  test("responds to authorized preflight with CORS headers", async () => {
+    const response = await callAction(
+      new Request(`${projectOrigin}/builder-logout`, {
+        method: "OPTIONS",
+        headers: {
+          Origin: dashboardOrigin,
+        },
+      })
+    );
+
+    expect(response.status).toBe(204);
+    expect(response.headers.get("Access-Control-Allow-Origin")).toBe(
+      dashboardOrigin
+    );
+    expect(response.headers.get("Access-Control-Allow-Credentials")).toBe(
+      "true"
+    );
+    expect(response.headers.get("Access-Control-Allow-Methods")).toContain(
+      "POST"
+    );
+    expect(response.headers.get("Access-Control-Allow-Headers")).toContain(
+      "Content-Type"
+    );
+  });
+
+  test("adds CORS headers to successful logout response", async () => {
+    logoutMock.mockRejectedValueOnce(
+      new Response(null, {
+        status: 302,
+        headers: {
+          Location: `${dashboardOrigin}/login`,
+          "Set-Cookie": "__Host-_session_builder_session_3=; Max-Age=0",
+        },
+      })
+    );
+
+    const response = await callAction(
+      new Request(`${projectOrigin}/builder-logout`, {
+        method: "POST",
+        headers: {
+          Origin: dashboardOrigin,
+          "Content-Type": "application/json",
+          "Sec-Fetch-Site": "same-site",
+        },
+      })
+    );
+
+    expect(response.status).toBe(204);
+    expect(response.headers.get("Set-Cookie")).toContain("Max-Age=0");
+    expect(response.headers.get("Access-Control-Allow-Origin")).toBe(
+      dashboardOrigin
+    );
+    expect(response.headers.get("Access-Control-Allow-Credentials")).toBe(
+      "true"
+    );
+  });
+
+  test("rejects preflight from a different origin", async () => {
+    const response = await callAction(
+      new Request(`${projectOrigin}/builder-logout`, {
+        method: "OPTIONS",
+        headers: {
+          Origin: "https://evil.example",
+        },
+      })
+    );
+
+    expect(response.status).toBe(403);
+    expect(response.headers.get("Access-Control-Allow-Origin")).toBeNull();
+  });
+
+  test("rejects same-origin builder requests without logging out", async () => {
+    const response = await callAction(
+      new Request(`${projectOrigin}/builder-logout`, {
+        method: "POST",
+        headers: {
+          Origin: projectOrigin,
+          "Content-Type": "application/json",
+          "Sec-Fetch-Site": "same-origin",
+        },
+      })
+    );
+
+    expect(response.status).toBe(403);
+    expect(logoutMock).not.toHaveBeenCalled();
+  });
+});

apps/builder/app/routes/builder-logout.ts

@@ -7,44 +7,103 @@ import { isRedirectResponse } from "~/services/cookie.server";
 
 const debug = createDebug(import.meta.url);
 
+const getCorsHeaders = (request: Request) => {
+  const origin = request.headers.get("Origin");
+  const allowedOrigin = getAuthorizationServerOrigin(request.url);
+
+  if (origin !== allowedOrigin) {
+    return;
+  }
+
+  return {
+    "Access-Control-Allow-Credentials": "true",
+    "Access-Control-Allow-Headers": "Content-Type",
+    "Access-Control-Allow-Methods": "POST, OPTIONS",
+    "Access-Control-Allow-Origin": origin,
+  };
+};
+
+const withCors = (request: Request, response: Response) => {
+  const corsHeaders = getCorsHeaders(request);
+  if (corsHeaders === undefined) {
+    return response;
+  }
+
+  const headers = new Headers(response.headers);
+  for (const [name, value] of Object.entries(corsHeaders)) {
+    headers.set(name, value);
+  }
+  headers.append("Vary", "Origin");
+
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  });
+};
+
 export const action = async ({ request }: ActionFunctionArgs) => {
   // IMPORTANT: This route allows cross-origin cookies to enable dashboard logout from builders.
   // Enforcing preflight by checking Content-Type to be application/json.
-  // At the SaaS proxy side, only the allowed "access-control-allow-origin" header is set for OPTIONS requests.
+  // Both the preflight and actual logout response must include CORS headers
+  // or browser fetch reports the project logout as failed.
 
   if (false === isBuilder(request)) {
     throw new Response("Not found", {
       status: 404,
     });
   }
 
+  if (request.method === "OPTIONS") {
+    const corsHeaders = getCorsHeaders(request);
+    if (corsHeaders === undefined) {
+      return new Response("Origin not allowed", {
+        status: 403,
+      });
+    }
+
+    return new Response(null, {
+      status: 204,
+      headers: {
+        ...corsHeaders,
+        Vary: "Origin",
+      },
+    });
+  }
+
   if (request.method !== "POST") {
-    return json(
-      { message: "Method not allowed" },
-      {
-        status: 405,
-      }
+    return withCors(
+      request,
+      json(
+        { message: "Method not allowed" },
+        {
+          status: 405,
+        }
+      )
     );
   }
 
   if (request.headers.get("sec-fetch-site") === "same-origin") {
     // To prevent logout initiated from the builder iframe
 
-    throw new Response("Only cross-origin requests are allowed", {
-      status: 403,
-    });
+    return withCors(
+      request,
+      new Response("Only cross-origin requests are allowed", {
+        status: 403,
+      })
+    );
   }
 
   if (
     false === request.headers.get("Content-Type")?.includes("application/json")
   ) {
     // Enforce preflight request, preflight is checked on allowed origin
 
-    throw new Response(
-      "Invalid content type, only application/json is allowed",
-      {
+    return withCors(
+      request,
+      new Response("Invalid content type, only application/json is allowed", {
         status: 415,
-      }
+      })
     );
   }
 
@@ -59,13 +118,16 @@ export const action = async ({ request }: ActionFunctionArgs) => {
   } catch (error) {
     if (error instanceof Response) {
       if (isRedirectResponse(error)) {
-        return new Response(null, {
-          status: 204,
-          headers: error.headers,
-        });
+        return withCors(
+          request,
+          new Response(null, {
+            status: 204,
+            headers: error.headers,
+          })
+        );
       }
 
-      return error;
+      return withCors(request, error);
     }
 
     console.error(error);