[remote-ui] Validate values received from the remote environment

.changeset/validate-untrusted-remote-values.md

@@ -0,0 +1,9 @@
+---
+'@remote-ui/core': patch
+'@remote-ui/react': patch
+'@remote-ui/vue': patch
+---
+
+Validate values received from the remote environment before storing or rendering them.
+
+`createRemoteReceiver()` now normalizes text node content to strings, rejects props containing objects that a UI framework would mistake for one of its own virtual nodes (Preact’s `constructor === undefined` shape, Vue’s `__v_isVNode` flag), rejects `__proto__` as a prop name, and requires component types to be strings. The `@remote-ui/react` host renderer never passes remote-controlled `children`, `ref`, `key`, `dangerouslySetInnerHTML`, `innerHTML`, or `outerHTML` props to host components. The `@remote-ui/vue` host renderer filters remote-controlled DOM content props, `children`, `key`, `ref`, `__proto__`, and all `onVnode*` lifecycle hooks. Vue hosts now require Vue `>=3.5.9 <4.0.0`, which checks the VNode flag before treating object children as virtual nodes. The validation helpers are exported from `@remote-ui/core` for custom receivers.

packages/async-subscription/src/tests/create.test.ts

@@ -63,12 +63,11 @@ describe('createRemoteSubscribable()', () => {
 
   it('returns the current value when the subscription is made', async () => {
     const subscription = createSyncSubscribable('abc');
+    const remoteSubscription = createRemoteSubscribable(subscription);
     const newValue = 'xyz';
     subscription.update(newValue);
 
-    const [, value] = await createRemoteSubscribable(subscription).subscribe(
-      jest.fn(),
-    );
+    const [, value] = await remoteSubscription.subscribe(jest.fn());
 
     expect(value).toBe(newValue);
   });

packages/async-subscription/src/tests/stateful.test.ts

@@ -95,6 +95,7 @@ describe('makeStatefulSubscribable()', () => {
 
   it('unsubscribes from the subscription on stop, and does not apply any updates', async () => {
     const subscription = createRemoteSubscribable('abc');
+    const subscribe = jest.spyOn(subscription, 'subscribe');
     const statefulSubscription = makeStatefulSubscribable(subscription);
     const subscriber = jest.fn();
     statefulSubscription.subscribe(subscriber);
@@ -109,6 +110,8 @@ describe('makeStatefulSubscribable()', () => {
     expect(release).toHaveBeenCalledWith(subscription);
     expect(subscriber).not.toHaveBeenCalled();
     expect(statefulSubscription.current).not.toBe(newValue);
+    const [unsubscribe] = await subscribe.mock.results[0].value;
+    expect(unsubscribe).toHaveBeenCalledTimes(1);
   });
 });
 

packages/core/src/index.ts

@@ -50,3 +50,10 @@ export type {
   RemoteReceiverAttachableFragment,
 } from './receiver';
 export {isRemoteComponent, isRemoteText, isRemoteFragment} from './utilities';
+export {
+  normalizeRemoteText,
+  assertRemotePropName,
+  assertSafeRemoteProp,
+  assertSafeRemoteProps,
+  assertRemoteComponentType,
+} from './validation';

packages/core/src/receiver.ts

@@ -9,6 +9,7 @@ import {
   KIND_COMPONENT,
   KIND_FRAGMENT,
   KIND_ROOT,
+  KIND_TEXT,
 } from './types';
 import type {
   ActionArgumentMap,
@@ -18,6 +19,12 @@ import type {
   RemoteFragmentSerialization,
 } from './types';
 import {isRemoteFragment} from './utilities';
+import {
+  assertRemoteComponentType,
+  assertRemotePropName,
+  assertSafeRemoteProp,
+  normalizeRemoteText,
+} from './validation';
 
 export const ROOT_ID = Symbol('RootId');
 
@@ -222,6 +229,17 @@ export function createRemoteReceiver(): RemoteReceiver {
 
       const oldProps = {...(component.props as any)};
 
+      // The remote is untrusted: validate every prop before retaining or
+      // storing any of it. Fragment props are validated like any other node.
+      for (const key of Object.keys(newProps)) {
+        assertRemotePropName(key);
+        const newProp = (newProps as any)[key];
+        if (isRemoteFragmentSerialization(newProp)) {
+          normalizeNode(newProp, addVersion);
+        }
+        assertSafeRemoteProp(newProp);
+      }
+
       retain(newProps);
 
       Object.keys(newProps).forEach((key) => {
@@ -230,9 +248,8 @@ export function createRemoteReceiver(): RemoteReceiver {
         if (isRemoteReceiverAttachableFragment(oldProp)) {
           detach(oldProp);
         }
-        if (isRemoteFragmentSerialization(newProp)) {
-          const attachableNewProp = normalizeNode(newProp, addVersion);
-          attach(attachableNewProp);
+        if (isRemoteReceiverAttachableFragment(newProp)) {
+          attach(newProp);
         }
       });
 
@@ -249,7 +266,7 @@ export function createRemoteReceiver(): RemoteReceiver {
     updateText: (id, newText) => {
       const text = attachedNodes.get(id) as RemoteReceiverAttachableText;
 
-      text.text = newText;
+      text.text = normalizeRemoteText(newText);
       text.version += 1;
       enqueueUpdate(text);
     },
@@ -419,17 +436,32 @@ function normalizeNode<
     | RemoteFragmentSerialization,
   R,
 >(node: T, normalizer: (node: T) => R) {
+  // The remote is untrusted. Text must be a string, component types must be
+  // strings, and props must not contain objects that a UI framework would
+  // mistake for its own virtual nodes. Validate before the normalizer stores
+  // anything.
+  if (node.kind === KIND_TEXT) {
+    (node as any).text = normalizeRemoteText((node as any).text);
+  }
   if (node.kind === KIND_FRAGMENT || node.kind === KIND_COMPONENT) {
     (node as any).children.forEach((child: T) =>
       normalizeNode(child, normalizer),
     );
   }
+  if (node.kind === KIND_COMPONENT) {
+    assertRemoteComponentType((node as any).type);
+  }
   if (node.kind === KIND_COMPONENT && 'props' in node) {
     const {props} = node as any;
     for (const key of Object.keys(props)) {
+      assertRemotePropName(key);
       const prop = props[key];
-      if (!isRemoteFragmentSerialization(prop)) continue;
-      props[key] = normalizeNode(prop as any, normalizer);
+      if (isRemoteFragmentSerialization(prop)) {
+        props[key] = normalizeNode(prop as any, normalizer);
+      }
+      // Fragment props are still objects passed to host components. Check
+      // their full shape after normalizing text, including extra wire fields.
+      assertSafeRemoteProp(props[key]);
     }
   }
   return normalizer(node);