fix: encode vnode metadata keys

.changeset/secure-vnode-slot-names.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: encode vnode metadata keys in script output.

packages/qwik/src/core/client/vnode-utils.ts

@@ -2202,7 +2202,7 @@ function materializeFromVNodeData(
     } else if (peek() === VNodeDataChar.SEPARATOR) {
       // Custom attribute: |key|value
       const keyValue = consumeValue();
-      const key = decodeVNodeDataString(keyValue);
+      const key = decodeURIComponent(decodeVNodeDataString(keyValue));
       const valueSeparatorIdx = dataIdx + keyValue.length + 1;
       const isEscapedValue = getChar(valueSeparatorIdx + 1) === VNodeDataChar.SEPARATOR;
       let value;

packages/qwik/src/core/client/vnode.unit.tsx

@@ -439,6 +439,16 @@ describe('vnode', () => {
         </test>
       );
     });
+    it('should decode encoded custom attribute names on Virtual', () => {
+      const attrName = '</script><script>globalThis.__qwik_xss=1</script>';
+      const encodedAttrName = encodeVNodeDataString(encodeVNodeDataKey(attrName));
+      parent.innerHTML = ``;
+      document.qVNodeData.set(parent, `{|${encodedAttrName}|value}`);
+
+      const virtual = vnode_getFirstChild(vParent)!;
+
+      expect(vnode_getProp(virtual, attrName, null)).toBe('value');
+    });
     it('should decode encoded slot names on Virtual', () => {
       const slotName = '</script>|~;=?@ zażółć';
       const encodedSlotName = encodeVNodeDataString(encodeVNodeDataKey(slotName));

packages/qwik/src/server/ssr-container.spec.ts

@@ -244,6 +244,32 @@ describe('SSR Container', () => {
     );
   });
 
+  it('should encode custom attribute names in emitVNodeData', () => {
+    const { container, writer } = createTestContainer();
+    container.openContainer();
+    container.serializationCtx.$roots$.push({});
+
+    const customKey = '</script><script>globalThis.__qwik_xss=1</script>';
+    (container as any).vNodeDatas = [
+      [
+        VNodeDataFlag.SERIALIZE | VNodeDataFlag.VIRTUAL_NODE,
+        { [customKey]: 'projection-ref' },
+        OPEN_FRAGMENT,
+        CLOSE_FRAGMENT,
+      ],
+    ];
+
+    (container as any).emitVNodeData();
+
+    const output = writer.toString();
+    const encodedKey = encodeVNodeDataString(encodeVNodeDataKey(customKey));
+
+    expect(output).not.toContain(customKey);
+    expect(output).toContain(
+      `${VNodeDataChar.SEPARATOR_CHAR}${encodedKey}${VNodeDataChar.SEPARATOR_CHAR}`
+    );
+  });
+
   it('should encode slot names in emitVNodeData', () => {
     const { container, writer } = createTestContainer();
     container.openContainer();

packages/qwik/src/server/ssr-container.ts

@@ -1304,7 +1304,7 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
         default: {
           encodeValue = encodeURI;
           this.write(VNodeDataChar.SEPARATOR_CHAR);
-          this.write(encodeVNodeDataString(key));
+          this.write(encodeVNodeDataString(encodeVNodeDataKey(key)));
           this.write(VNodeDataChar.SEPARATOR_CHAR);
         }
       }