fix: refuse a function in form action=, it leaked server source

At SSR a `'use server'` import resolves to the REAL function (the RPC stub
exists only in the browser), and `action=` is an ordinary escaped attribute
hole, so the renderer stringified the function straight into the served
HTML. A page doing what every Next-trained author writes,
`<form action=${createTodo}>`, published the action's whole body, including
any connection string or internal path its closure showed, to every visitor.

Both hole shapes leaked identically (`action=${fn}` and `action="${fn}"`),
as did a mixed value and `formaction=` on a submit button.

Refuse it instead, on the server and on the client, so a client re-render
cannot write the source into the live DOM either. The guard is name-based
and deliberately narrow: only `action` and `formaction`, where a stringified
function is never useful on any tag. Every other attribute keeps its
existing behaviour, and a string-valued action is byte-identical to before.

The thrown message names the fix without echoing the source.

Author: vivek7405

.agents/skills/webjs/references/muscle-memory-gotchas.md

@@ -43,6 +43,23 @@ const users = await getUsers();
 
 There is no React `cache()`, `use()`, or `unstable_cache`. Caching is the `cache()` query helper, `export const revalidate` on a page, or `export const cache` on a GET action.
 
+### A plain function in `<form action=${fn}>` is refused, not stringified
+
+Next binds a Server Action with `<form action={createTodo}>`, and React serializes the binding into hidden fields. WebJs reads the same shape, but only for a real `'use server'` action. Any other function is a hard render error.
+
+The reason is a source leak. During SSR a `.server.ts` import is the ACTUAL function (the RPC stub exists only in the browser), and `action=` is an ordinary attribute hole, so stringifying it would write the function's body, secrets included, into the HTML every visitor downloads. So the renderer throws instead, on the server and on the client, for `action=` and `formaction=` alike, in every hole shape (`action=${fn}`, `action="${fn}"`, `action="/x/${fn}"`).
+
+```ts
+// WRONG: a local handler. Throws at render; it would have leaked its body.
+const onSubmit = async (fd: FormData) => { /* ... */ };
+html`<form method="post" action=${onSubmit}>`;
+// RIGHT: a 'use server' action imported from a *.server.ts module.
+import { submitFeedback } from '#modules/feedback/actions/submit-feedback.server.ts';
+html`<form method="post" action=${submitFeedback}>`;
+```
+
+A string stays a string: `action="/search"` and `action=${'/search'}` are unchanged. Other attributes keep their existing stringify behaviour; only `action` and `formaction` are claimed.
+
 ### `params` and `searchParams` are awaitable AND synchronously readable
 
 Next 15/16 made `params` / `searchParams` Promises. WebJs supports BOTH, so either muscle memory is correct.

packages/core/src/form-action.js

@@ -0,0 +1,44 @@
+/**
+ * Form-action binding shared bits (#1154, #1155).
+ *
+ * Both renderers (server + client) import from here so the guard cannot
+ * drift between SSR and hydration.
+ */
+
+/**
+ * The hidden field that carries a form-bound action's identity
+ * (`<hash>/<fn>`) from the SSR'd markup to the server dispatcher (#1155).
+ * Reserved name; user form fields must not use it.
+ */
+export const ACTION_FIELD = '__webjs_action';
+
+/**
+ * Refuse to stringify a function interpolated into a form-action attribute
+ * (#1154). At SSR a `'use server'` import is the REAL server function (the
+ * RPC stub only exists in the browser), and a plain attribute hole commits
+ * via `String(val)`, so without this guard the action's SOURCE, secrets
+ * included, is serialized into the served HTML. The client renderer guards
+ * the same commit so a client re-render cannot write the source into the
+ * live DOM either.
+ *
+ * Name-based on purpose (`action`, plus `formaction`, the submit-button
+ * override, which leaks identically): a function stringified under these
+ * names is never useful on any tag, and other attributes keep today's
+ * stringify behaviour so the claim stays narrow.
+ *
+ * @param {unknown} val the hole's resolved value
+ * @param {string} attrName the attribute being committed (any case)
+ * @param {string} [tag] lowercased owner tag, for the error message
+ */
+export function assertNotFunctionActionAttr(val, attrName, tag) {
+  if (typeof val !== 'function') return;
+  const name = String(attrName).toLowerCase();
+  if (name !== 'action' && name !== 'formaction') return;
+  throw new Error(
+    `[webjs] a function was interpolated into ${name}= on <${tag || 'form'}>. `
+    + `Stringifying a function into HTML would leak its source (a 'use server' `
+    + `action's body included) to every visitor, so this is refused. `
+    + `Bind a 'use server' action exported from a *.server.{js,ts} module, `
+    + `or pass a URL string.`
+  );
+}

packages/core/src/render-client.js

@@ -1,6 +1,7 @@
 import { isTemplate, MARKER } from './html.js';
 import { BINDING_PREFIXES, isBindingPrefix } from './binding-prefixes.js';
 import { escapeAttr } from './escape.js';
+import { assertNotFunctionActionAttr } from './form-action.js';
 import { isRepeat } from './repeat.js';
 import { isUnsafeHTML, isLive, isKeyed, isGuard, isTemplateContent, isRef, isCache, isUntil, isAsyncAppend, isAsyncReplace, isWatch } from './directives.js';
 import { Signal } from './signal.js';
@@ -671,7 +672,13 @@ function applyPart(part, value, _prev, allValues) {
       break;
     case 'attr': {
       if (value == null || value === false) part.el.removeAttribute(part.name);
-      else part.el.setAttribute(part.name, String(value));
+      else {
+        // #1154: refuse to stringify a function into action=/formaction=
+        // (mirrors the SSR guard, so a client re-render cannot write a
+        // server action's source into the live DOM).
+        assertNotFunctionActionAttr(value, part.name, part.el.localName);
+        part.el.setAttribute(part.name, String(value));
+      }
       break;
     }
     case 'prop':
@@ -692,7 +699,10 @@ function applyPart(part, value, _prev, allValues) {
       const mp = /** @type {{ statics: string[], group: number[] }} */ (/** @type any */ (part));
       let val = mp.statics[0];
       for (let j = 0; j < mp.group.length; j++) {
-        val += String((allValues ? allValues[mp.group[j]] : value) ?? '');
+        const piece = allValues ? allValues[mp.group[j]] : value;
+        // #1154: same function guard for each piece of a mixed attribute.
+        assertNotFunctionActionAttr(piece, part.name, part.el.localName);
+        val += String(piece ?? '');
         val += mp.statics[j + 1] || '';
       }
       part.el.setAttribute(part.name, val);

packages/core/src/render-server.js

@@ -1,6 +1,7 @@
 import { html, isTemplate } from './html.js';
 import { BINDING_PREFIXES } from './binding-prefixes.js';
 import { escapeText, escapeAttr } from './escape.js';
+import { assertNotFunctionActionAttr } from './form-action.js';
 import { lookup, lookupModuleUrl, allTags } from './registry.js';
 import { stylesToString, isCSS } from './css.js';
 import { isRepeat } from './repeat.js';
@@ -323,11 +324,17 @@ async function renderTemplate(tr, ctx) {
           state = 'in-tag';
           attrName = '';
         } else {
+          // #1154: never stringify a function into action=/formaction= (it
+          // would serialize a server action's source into the served HTML).
+          assertNotFunctionActionAttr(val, attrName, currentTag);
           out += `"${escapeAttr(String(val ?? ''))}"`;
           state = 'in-tag';
           attrName = '';
         }
       } else if (state === 'attr-quoted' || state === 'attr-unquoted') {
+        // Same guard for a hole inside a quoted/unquoted value, the
+        // `action="${fn}"` and mixed `action="/x/${fn}"` shapes (#1154).
+        assertNotFunctionActionAttr(val, attrName, currentTag);
         out += escapeAttr(String(val ?? ''));
       }
     }

packages/core/test/rendering/form-action-attr-guard-client.test.js

@@ -0,0 +1,51 @@
+// #1154, client half: the browser renderer refuses the same commit, so a
+// client re-render can never write a function's source into the live DOM
+// (`applyPart`'s 'attr' and 'attr-mixed' cases). Runs under linkedom.
+import { test, before } from 'node:test';
+import assert from 'node:assert/strict';
+import { parseHTML } from 'linkedom';
+
+before(() => {
+  const { window } = parseHTML('<!doctype html><html><body></body></html>');
+  globalThis.document = window.document;
+  globalThis.DocumentFragment = window.DocumentFragment;
+  globalThis.Node = window.Node;
+  globalThis.Element = window.Element;
+  globalThis.Comment = window.Comment;
+  globalThis.Text = window.Text;
+  globalThis.NodeFilter = window.NodeFilter;
+  globalThis.HTMLElement = window.HTMLElement;
+});
+
+let html, render;
+before(async () => {
+  ({ html } = await import('../../src/html.js'));
+  ({ render } = await import('../../src/render-client.js'));
+});
+
+async function fakeAction() { const S = 'CLIENT_SECRET'; return S; }
+
+test('client render of action=${fn} throws, DOM never carries the source', () => {
+  const host = document.createElement('div');
+  assert.throws(
+    () => render(html`<form method="post" action=${fakeAction}></form>`, host),
+    /function was interpolated into action=/,
+  );
+  assert.ok(!host.innerHTML.includes('CLIENT_SECRET'));
+});
+
+test('client render of mixed action="/x/${fn}" throws', () => {
+  const host = document.createElement('div');
+  assert.throws(
+    () => render(html`<form action="/x/${fakeAction}"></form>`, host),
+    /function was interpolated into action=/,
+  );
+  assert.ok(!host.innerHTML.includes('CLIENT_SECRET'));
+});
+
+test('string action still renders on the client', () => {
+  const host = document.createElement('div');
+  render(html`<form method="post" action=${'/submit'}></form>`, host);
+  const form = host.querySelector('form');
+  assert.equal(form.getAttribute('action'), '/submit');
+});

packages/core/test/rendering/form-action-attr-guard.test.js

@@ -0,0 +1,80 @@
+// #1154: a function interpolated into a form-action attribute must throw,
+// never stringify. At SSR a `'use server'` import is the REAL function, so
+// `String(fn)` would serialize the action's source (secrets included) into
+// the served HTML. Covers every hole shape that used to leak (unquoted,
+// quoted, mixed, and `formaction` on a submit button), plus the byte-identical
+// passthrough for string-valued action attributes.
+import { test, before } from 'node:test';
+import assert from 'node:assert/strict';
+
+let html, renderToString;
+before(async () => {
+  ({ html } = await import('../../src/html.js'));
+  ({ renderToString } = await import('../../src/render-server.js'));
+});
+
+// The secret sentinel must never appear in any output, thrown or not.
+const SECRET = 'postgres://user:SECRET@host/db';
+async function leaky(input) { const conn = SECRET; return { success: true, conn, input }; }
+
+test('unquoted action=${fn} throws instead of leaking source', async () => {
+  await assert.rejects(
+    () => renderToString(html`<form method="post" action=${leaky}></form>`, { ssr: true }),
+    /function was interpolated into action=/,
+  );
+});
+
+test('quoted action="${fn}" throws identically', async () => {
+  await assert.rejects(
+    () => renderToString(html`<form method="post" action="${leaky}"></form>`, { ssr: true }),
+    /function was interpolated into action=/,
+  );
+});
+
+test('mixed hole action="/x/${fn}" throws', async () => {
+  await assert.rejects(
+    () => renderToString(html`<form method="post" action="/x/${leaky}"></form>`, { ssr: true }),
+    /function was interpolated into action=/,
+  );
+});
+
+test('formaction=${fn} on a submit button throws', async () => {
+  await assert.rejects(
+    () => renderToString(html`<form method="post"><button formaction=${leaky}>Go</button></form>`, { ssr: true }),
+    /function was interpolated into formaction=/,
+  );
+});
+
+test('no thrown message ever carries the function source', async () => {
+  for (const tpl of [
+    html`<form action=${leaky}></form>`,
+    html`<form action="${leaky}"></form>`,
+  ]) {
+    let msg = '';
+    try { await renderToString(tpl, { ssr: true }); } catch (e) { msg = String(e && e.message); }
+    assert.ok(msg.length > 0, 'render must throw');
+    assert.ok(!msg.includes('SECRET'), 'error message must not embed the source');
+  }
+});
+
+test('string-valued action renders byte-identically to before', async () => {
+  assert.equal(
+    await renderToString(html`<form method="post" action=${'/submit'}></form>`, { ssr: true }),
+    '<form method="post" action="/submit"></form>',
+  );
+  assert.equal(
+    await renderToString(html`<form method="post" action="${'/submit'}"></form>`, { ssr: true }),
+    '<form method="post" action="/submit"></form>',
+  );
+  assert.equal(
+    await renderToString(html`<form action="/x?a=${1}"></form>`, { ssr: true }),
+    '<form action="/x?a=1"></form>',
+  );
+});
+
+test('functions in OTHER attributes keep the existing stringify behaviour', async () => {
+  // Narrow claim: only action/formaction throw. Anything else is unchanged
+  // (arguably also a bug, but out of #1154's scope by design).
+  const out = await renderToString(html`<div title=${leaky}></div>`, { ssr: true });
+  assert.ok(out.startsWith('<div title="'));
+});