From 92a271695e77a59cf69d22beef109ed4d0cdd72e Mon Sep 17 00:00:00 2001
From: Wenjix <wenjiefu8@gmail.com>
Date: Mon, 26 Oct 2026 23:07:41 -0700
Subject: [PATCH] fix(composition): reject markup terminators and CSS escapes
 in style values

Style declarations are serialized into a raw-text <style> element and
inline style attributes. Two gaps let authored values break the
typed-Artifact resource policy:

- `<` terminates the <style> element at compile time, letting a keyframe
  or element style introduce executable markup into the render document.
- A backslash opens a CSS escape, so `u\72 l(...)` reaches the browser
  as `url(...)` while evading the literal `url(`/`image-set(` checks.

Reject both characters as unsafe style values. Legitimate V1 values
(transforms, colors, gradients, filters) never require them.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 packages/composition/src/visual.ts      |  6 ++++
 packages/composition/test/track.test.ts | 48 +++++++++++++++++++++++++
 2 files changed, 54 insertions(+)

diff --git a/packages/composition/src/visual.ts b/packages/composition/src/visual.ts
index e4308dbb5..6a0f9468f 100644
--- a/packages/composition/src/visual.ts
+++ b/packages/composition/src/visual.ts
@@ -216,6 +216,12 @@ export function assertVisualStyleV1(
   if (/!important|[\u0000-\u001f\u007f]/iu.test(value)) {
     throw new Error(`${label} contains an unsafe style value.`);
   }
+  // `<` terminates the raw-text <style> element these declarations are serialized into, and
+  // a backslash opens a CSS escape that the browser resolves before recognizing functions:
+  // `u\72 l(...)` reaches the renderer as `url(...)` while evading the checks above.
+  if (/[<\\]/u.test(value)) {
+    throw new Error(`${label} contains an unsafe style value.`);
+  }
   if (/(?:var|env|attr)\s*\(/iu.test(value)) {
     throw new Error(`${label} contains an environment-dependent style value.`);
   }
diff --git a/packages/composition/test/track.test.ts b/packages/composition/test/track.test.ts
index cd8417fc5..9cf6551aa 100644
--- a/packages/composition/test/track.test.ts
+++ b/packages/composition/test/track.test.ts
@@ -139,6 +139,54 @@ test("VisualTrack style values cannot smuggle a second declaration", () => {
   );
 });
 
+test("VisualTrack style values cannot terminate the compiled style element", () => {
+  const { timeline, visual } = fixture();
+  const first = visual.presents[0]!.elements[0]!;
+  const hostile = sealVisualTrack({...visual,
+    presents: [{
+      ...visual.presents[0]!,
+      elements: [{ ...first, style: [{ name: "position", value: "absolute" }, { name: "color", value: "red</style><script>alert(1)</script>" }] }],
+    }],
+  });
+  assert.throws(
+    () => assertVisualTrackIdentity(hostile, timeline),
+    /unsafe style value/,
+  );
+});
+
+test("VisualTrack style values cannot hide resource functions behind CSS escapes", () => {
+  const { timeline, visual } = fixture();
+  const first = visual.presents[0]!.elements[0]!;
+  const escaped = sealVisualTrack({...visual,
+    presents: [{
+      ...visual.presents[0]!,
+      elements: [{ ...first, style: [{ name: "background", value: "u\\72 l(https://invalid.example/)" }] }],
+    }],
+  });
+  assert.throws(
+    () => assertVisualTrackIdentity(escaped, timeline),
+    /unsafe style value/,
+  );
+});
+
+test("VisualTrack animation keyframes share the same unsafe-value checks", () => {
+  const { timeline, visual } = fixture();
+  const first = visual.presents[0]!.elements[0]!;
+  const hostile = sealVisualTrack({...visual,
+    presents: [{
+      ...visual.presents[0]!,
+      elements: [{ ...first, animation: { keyframes: [
+        { atFrame: 0, style: [{ name: "opacity", value: 1 }] },
+        { atFrame: 30, style: [{ name: "opacity", value: "0</style><script>alert(1)</script>" }] },
+      ] } }],
+    }],
+  });
+  assert.throws(
+    () => assertVisualTrackIdentity(hostile, timeline),
+    /unsafe style value/,
+  );
+});
+
 test("VisualTrack cannot silently extend the versioned public Visual IR", () => {
   const { timeline, visual } = fixture();
   const first = visual.presents[0]!.elements[0]!;