fix(web): key the no-JS convention on Sec-Fetch-Mode, not header absence (#3139)

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: ryansolid

.changeset/fix-nojs-shape-on-navigation.md

@@ -0,0 +1,16 @@
+---
+"@solidjs/web": patch
+---
+
+The bare server-function address no longer decides its answer shape by the
+absence of a header (#3139). The no-JS redirect convention (303, outcome
+in the flash cookie) engaged on shape alone — form content type, no format
+tag — which a page script's `fetch(url, { body: new URLSearchParams(...) })`
+also matches: the script followed the 303 to the referrer's HTML, read
+`response.ok === true`, and its answer disappeared into a cookie it would
+never look at. Dispatch now reads the browser's own word for the caller
+kind: `Sec-Fetch-Mode: navigate` (or no fetch metadata, for older
+browsers) keeps the convention, while a script's form-shaped post is
+refused 400 before dispatch — before the mutation runs — pointing at the
+data address and the format tag, the two spellings that work. Tagged
+direct-HTTP callers keep the plain response as documented.

packages/web/server-functions/src/server.ts

@@ -1513,11 +1513,13 @@ export function createNoJSHandler({ base = "" } = {}) {
 let defaultNoJSHandler;
 
 /**
- * Whether a request is a browser form post — the case the redirect
- * convention exists for. A real form sets its own content type and carries
- * no `BODY_FORMAT_HEADER`, which only the client runtime sends. Direct HTTP
- * callers (curl, a fetch from a script) fall outside it and keep the plain
- * response: redirecting them would be nonsense.
+ * Whether a request is form-SHAPED: a POST with a form content type and no
+ * `BODY_FORMAT_HEADER` (which only the client runtime sends). Shape alone
+ * is not the convention's gate — a page script's fetch can be form-shaped
+ * too — so dispatch additionally reads `Sec-Fetch-Mode` to keep the
+ * redirect convention on actual form navigations (#3139). Tagged direct
+ * HTTP callers fall outside the shape test entirely and keep the plain
+ * response.
  */
 function isFormPost(request) {
   if (request.method !== "POST" || request.headers.has(BODY_FORMAT_HEADER)) return false;
@@ -2420,14 +2422,39 @@ export async function handleServerFunctionRequest(request, options = {}) {
   // Same fallback, then the built-in convention: an unconfigured app still
   // gets working progressive enhancement for real form posts, while direct
   // HTTP calls keep the plain response.
-  const handleNoJS =
-    options.handleNoJS !== undefined
-      ? options.handleNoJS
-      : config.handleNoJS !== undefined
-        ? config.handleNoJS
-        : isFormPost(request)
-          ? defaultNoJSHandler || (defaultNoJSHandler = createNoJSHandler())
-          : undefined;
+  //
+  // The convention is for form NAVIGATIONS — the browser follows the 303
+  // and the flash cookie carries the outcome to the next render. Which
+  // caller kind this is was decided by the ABSENCE of a header (#3139,
+  // the shape-on-the-url doctrine's one leftover): a same-origin page
+  // script posting a form-encoded body — fetch(url, { body: new
+  // URLSearchParams(...) }) — is form-shaped too, and routing IT into the
+  // convention lands it on the referrer's HTML with `response.ok === true`
+  // while its answer disappears into its own cookie jar. The browser's own
+  // word tells the two apart: a real form navigation sends `Sec-Fetch-Mode:
+  // navigate` (or nothing, on older browsers), a script's fetch never does.
+  // The script's call is refused as malformed — BEFORE dispatch, because
+  // the old behavior's real harm was running the mutation and then hiding
+  // the outcome — pointing at the two spellings that work. Answering it
+  // plain instead would put a second, header-decided shape on the bare
+  // address, which is the exact thing #3094 moved onto the url.
+  let handleNoJS = options.handleNoJS !== undefined ? options.handleNoJS : config.handleNoJS;
+  if (handleNoJS === undefined && !scripted && isFormPost(request)) {
+    const fetchMode = request.headers.get("Sec-Fetch-Mode");
+    if (fetchMode === null || fetchMode === "navigate") {
+      handleNoJS = defaultNoJSHandler || (defaultNoJSHandler = createNoJSHandler());
+    } else {
+      const response = new Response(
+        DEV
+          ? "The bare server-function address answers form navigations with the " +
+              "no-JS redirect convention. Scripted callers use the data address " +
+              `(…/data/${functionId}) or send the ${BODY_FORMAT_HEADER} tag.`
+          : null,
+        { status: 400 }
+      );
+      return finalizeTransportResponse(protectsRequest ? withCSRFVary(response) : response, method);
+    }
+  }
   // single-flight is scripted-client opt-in: the caller sends the request
   // header naming the sources it can consume ("true" is the unnamed hook's
   // reserved id), the server must have hooks to produce the data. Only

packages/web/test/server/server-functions-redirect-status.spec.tsx

@@ -279,6 +279,80 @@ describe("the no-JS form convention honors returned redirects (#3096)", () => {
   });
 });
 
+describe("the bare address reads the caller kind off Sec-Fetch-Mode (#3139)", () => {
+  // The no-JS convention — 303, outcome in a flash cookie — exists for
+  // form NAVIGATIONS. It used to engage on shape alone (form content type,
+  // no format tag), which a page script's fetch(url, { body: new
+  // URLSearchParams(...) }) also matches: the script got the 303, followed
+  // it to the referrer's HTML, read `response.ok === true`, and its answer
+  // sat in a cookie it would never look at. The browser's own word tells
+  // the callers apart: navigations send `Sec-Fetch-Mode: navigate` (or
+  // nothing, on older browsers), a script's fetch never does.
+  function formShaped(id: string, mode?: string) {
+    return new Request(`https://app.example/_server/${id}`, {
+      method: "POST",
+      headers: {
+        "Sec-Fetch-Site": "same-origin",
+        "Content-Type": "application/x-www-form-urlencoded",
+        Referer: "https://app.example/current-page",
+        ...(mode ? { "Sec-Fetch-Mode": mode } : {})
+      },
+      body: "a=1"
+    });
+  }
+
+  it("keeps the convention for navigations, with or without fetch metadata", async () => {
+    registerServerFunction("nojs-mode-nav", async () => ({ saved: true }));
+
+    // a modern browser's form navigation declares itself
+    const declared = await handleServerFunctionRequest(formShaped("nojs-mode-nav", "navigate"));
+    expect(declared.status).toBe(303);
+    expect(declared.headers.get("Set-Cookie")).toContain("flash=");
+
+    // an older browser sends no fetch metadata at all: same convention
+    const bare = await handleServerFunctionRequest(formShaped("nojs-mode-nav"));
+    expect(bare.status).toBe(303);
+  });
+
+  it("refuses a page script's form-shaped post before the function runs", async () => {
+    const fn = vi.fn(async () => ({ receipt: "SECRET" }));
+    registerServerFunction("nojs-mode-script", fn);
+
+    for (const mode of ["cors", "same-origin", "no-cors"]) {
+      const response = await handleServerFunctionRequest(formShaped("nojs-mode-script", mode));
+      // refused as malformed — not a 303 whose answer vanishes into the
+      // caller's cookie jar, and not a 200 wearing the referrer's HTML
+      expect([mode, response.status]).toEqual([mode, 400]);
+      expect(response.headers.get("Set-Cookie")).toBeNull();
+    }
+    // before dispatch: the old shape's real harm was running the mutation
+    // and then hiding the outcome
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it("a tagged script call at the bare address keeps the plain response", async () => {
+    // the documented direct-HTTP spelling: the format tag takes the call
+    // out of the form shape entirely, whatever its fetch mode says
+    registerServerFunction("nojs-mode-tagged", async (params: URLSearchParams) => ({
+      got: params.get("a")
+    }));
+    const response = await handleServerFunctionRequest(
+      new Request("https://app.example/_server/nojs-mode-tagged", {
+        method: "POST",
+        headers: {
+          "Sec-Fetch-Site": "same-origin",
+          "Sec-Fetch-Mode": "cors",
+          "Content-Type": "application/x-www-form-urlencoded",
+          "X-Server-Function-Format": "3" // URLSearchParams
+        },
+        body: "a=1"
+      })
+    );
+    expect(response.status).toBe(200);
+    expect(await response.json()).toEqual({ got: "1" });
+  });
+});
+
 /**
  * The mask is justified by ONE fact — that fetch follows these statuses —
  * so it has to cover exactly the set fetch follows. Exercising 302 alone