Merge commit from fork

* fix(jsx): prevent CSS injection via `;` in style object values

* apply the patch

Co-authored-by: Taku Amano <taku@taaas.jp>

---------

Co-authored-by: Taku Amano <taku@taaas.jp>

Author: yusukebe

src/jsx/index.test.tsx

@@ -519,6 +519,110 @@ describe('render to string', () => {
       const template = <h1 style={{ '--myVar': 1 }}>Hello</h1>
       expect(template.toString()).toBe('<h1 style="--myVar:1px">Hello</h1>')
     })
+
+    describe('CSS injection prevention', () => {
+      it('should drop style values containing ";" to prevent CSS injection', () => {
+        const userInput =
+          'transparent;background:url(https://attacker.example/a.png);position:fixed;top:0'
+        const template = <div style={{ color: userInput }} />
+        const out = template.toString() as string
+        expect(out).not.toContain('background:url')
+        expect(out).not.toContain('position:fixed')
+        expect(out).not.toContain('color:')
+        expect(out).toBe('<div style=""></div>')
+      })
+
+      it('should drop only the unsafe property and keep other safe properties', () => {
+        const template = <div style={{ color: 'red;background:blue', backgroundColor: 'white' }} />
+        const out = template.toString() as string
+        expect(out).toBe('<div style="background-color:white"></div>')
+        expect(out).not.toContain('background:blue')
+      })
+
+      it('should drop style values that try to hide declaration separators in CSS comments', () => {
+        const template = (
+          <div
+            style={{
+              color: 'red/*(*/;background:blue;position:fixed;top:0',
+              backgroundColor: 'white',
+            }}
+          />
+        )
+        const out = template.toString() as string
+        expect(out).toBe('<div style="background-color:white"></div>')
+        expect(out).not.toContain('position:fixed')
+      })
+
+      it('should drop style values that try to expose declarations through CSS curly blocks', () => {
+        const template = (
+          <div
+            style={{
+              color: 'red{;background:blue}',
+              backgroundColor: 'white',
+            }}
+          />
+        )
+        const out = template.toString() as string
+        expect(out).toBe('<div style="background-color:white"></div>')
+        expect(out).not.toContain('background:blue')
+      })
+
+      it('should drop unterminated style values that can swallow following declarations', () => {
+        const template = <div style={{ color: 'red/*', display: 'none' }} />
+        const out = template.toString() as string
+        expect(out).toBe('<div style="display:none"></div>')
+        expect(out).not.toContain('color:')
+      })
+
+      it('should drop style property names that can inject declarations', () => {
+        const template = (
+          <div
+            style={{
+              'color;background-image': 'url(https://attacker.example/a.png)',
+              backgroundColor: 'white',
+            }}
+          />
+        )
+        const out = template.toString() as string
+        expect(out).toBe('<div style="background-color:white"></div>')
+        expect(out).not.toContain('background-image')
+      })
+
+      it('should still HTML-escape safe style values', () => {
+        const template = <h1 style={{ fontFamily: '"DejaVu Sans Mono", monospace' }}>Hello</h1>
+        expect(template.toString()).toBe(
+          '<h1 style="font-family:&quot;DejaVu Sans Mono&quot;, monospace">Hello</h1>'
+        )
+      })
+
+      it('should keep semicolons inside quoted style values', () => {
+        const template = <h1 style={{ fontFamily: '"a;b", sans-serif' }}>Hello</h1>
+        expect(template.toString()).toBe(
+          '<h1 style="font-family:&quot;a;b&quot;, sans-serif">Hello</h1>'
+        )
+      })
+
+      it('should drop quoted style values that use newlines to expose declaration separators', () => {
+        const template = (
+          <div
+            style={{
+              fontFamily: '"\n;background:url(https://attacker.example/a.png)',
+              backgroundColor: 'white',
+            }}
+          />
+        )
+        expect(template.toString()).toBe('<div style="background-color:white"></div>')
+      })
+
+      it('should keep numeric style values working', () => {
+        const template = <div style={{ fontSize: 10, lineHeight: 1.5 }} />
+        expect(template.toString()).toBe('<div style="font-size:10px;line-height:1.5"></div>')
+      })
+
+      it('should not throw when style values contain ";"', () => {
+        expect(() => (<div style={{ color: 'red;evil:1' }} />).toString()).not.toThrow()
+      })
+    })
   })
 
   describe('HtmlEscaped in props', () => {

src/jsx/jsx-runtime.test.tsx

@@ -43,6 +43,34 @@ describe('jsx-runtime', () => {
     )
   })
 
+  it('Should drop style values containing ";" in jsxAttr() to prevent CSS injection', () => {
+    expect(
+      String(jsxAttr('style', { color: 'red;background:blue', backgroundColor: 'white' }))
+    ).toBe('style="background-color:white"')
+  })
+
+  it('Should drop style values that hide declaration separators in CSS comments in jsxAttr()', () => {
+    expect(
+      String(
+        jsxAttr('style', {
+          color: 'red/*(*/;background:blue;position:fixed;top:0',
+          backgroundColor: 'white',
+        })
+      )
+    ).toBe('style="background-color:white"')
+  })
+
+  it('Should drop style property names that can inject declarations in jsxAttr()', () => {
+    expect(
+      String(
+        jsxAttr('style', {
+          'color;background-image': 'url(https://attacker.example/a.png)',
+          backgroundColor: 'white',
+        })
+      )
+    ).toBe('style="background-color:white"')
+  })
+
   // https://en.reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
   describe('Booleans, Null, and Undefined Are Ignored', () => {
     it.each([true, false, undefined, null])('%s', (item) => {

src/jsx/utils.test.ts

@@ -214,4 +214,150 @@ describe('styleObjectForEach', () => {
       )
     })
   })
+
+  describe('Should skip values containing ";" to prevent CSS injection', () => {
+    it('skips a value with ";"', () => {
+      const fn = vi.fn()
+      styleObjectForEach({ color: 'red;background:blue' }, fn)
+      expect(fn).not.toBeCalled()
+    })
+
+    it('keeps safe siblings while skipping unsafe ones', () => {
+      const fn = vi.fn()
+      styleObjectForEach({ color: 'red;background:blue', backgroundColor: 'white' }, fn)
+      expect(fn).toBeCalledTimes(1)
+      expect(fn).toBeCalledWith('background-color', 'white')
+    })
+
+    it('does not throw for unsafe values', () => {
+      expect(() => styleObjectForEach({ color: 'a;b' }, () => {})).not.toThrow()
+    })
+
+    it('keeps semicolons inside quoted strings', () => {
+      const fn = vi.fn()
+      styleObjectForEach({ fontFamily: '"a;b", sans-serif' }, fn)
+      expect(fn).toBeCalledWith('font-family', '"a;b", sans-serif')
+    })
+
+    test.each([
+      ['LF', '\n'],
+      ['CR', '\r'],
+      ['FF', '\f'],
+    ])('skips quoted strings that contain %s before a declaration separator', (_, newline) => {
+      const fn = vi.fn()
+      styleObjectForEach(
+        { fontFamily: `"${newline};background:url(https://example.com/a.png)` },
+        fn
+      )
+      expect(fn).not.toBeCalled()
+    })
+
+    it('keeps semicolons inside CSS functions', () => {
+      const fn = vi.fn()
+      styleObjectForEach({ backgroundImage: 'url("data:image/svg+xml;utf8,<svg></svg>")' }, fn)
+      expect(fn).toBeCalledWith('background-image', 'url("data:image/svg+xml;utf8,<svg></svg>")')
+    })
+
+    test.each([['square brackets', 'red[;background:blue]']])(
+      'keeps semicolons inside CSS simple blocks with %s',
+      (_, value) => {
+        const fn = vi.fn()
+        styleObjectForEach({ color: value }, fn)
+        expect(fn).toBeCalledWith('color', value)
+      }
+    )
+
+    test.each([
+      ['opening curly block', 'red{;background:blue}'],
+      ['closing curly block', 'red};background:blue'],
+    ])('skips CSS values containing %s', (_, value) => {
+      const fn = vi.fn()
+      styleObjectForEach({ color: value, backgroundColor: 'white' }, fn)
+      expect(fn).toBeCalledTimes(1)
+      expect(fn).toBeCalledWith('background-color', 'white')
+    })
+
+    test.each([
+      ['square brackets', 'red[;background:blue];position:fixed'],
+      ['curly braces', 'red{;background:blue};position:fixed'],
+    ])('skips top-level semicolons after CSS simple blocks with %s', (_, value) => {
+      const fn = vi.fn()
+      styleObjectForEach({ color: value }, fn)
+      expect(fn).not.toBeCalled()
+    })
+
+    it('skips top-level semicolons after CSS comments', () => {
+      const fn = vi.fn()
+      styleObjectForEach({ color: 'red/*(*/;background:blue;position:fixed;top:0' }, fn)
+      expect(fn).not.toBeCalled()
+    })
+
+    test.each([
+      ['comment', 'red/*'],
+      ['double-quoted string', '"abc'],
+      ['single-quoted string', "'abc"],
+      ['function block', 'red('],
+      ['square block', 'red['],
+      ['curly block', 'red{'],
+      ['unmatched function closer', 'red)'],
+      ['unmatched square closer', 'red]'],
+      ['unmatched curly closer', 'red}'],
+      ['mismatched simple block closer', 'red[)'],
+      ['escape', 'red\\'],
+    ])('skips unterminated CSS %s that can swallow following declarations', (_, value) => {
+      const fn = vi.fn()
+      styleObjectForEach({ color: value, display: 'none' }, fn)
+      expect(fn).toBeCalledTimes(1)
+      expect(fn).toBeCalledWith('display', 'none')
+    })
+
+    test.each([
+      ['comment that closes exactly at end of value', 'red/* hi */'],
+      ['CSS hex escape that decodes to a delimiter byte', 'red\\3b '],
+      ['vertical tab inside a quoted string', '"\vfoo"'],
+      ['trailing solidus that is not a comment start', 'a/'],
+    ])('keeps CSS-safe edge case — %s', (_, value) => {
+      const fn = vi.fn()
+      styleObjectForEach({ color: value }, fn)
+      expect(fn).toBeCalledWith('color', value)
+    })
+
+    it('skips style property names that can break declaration boundaries', () => {
+      const fn = vi.fn()
+      styleObjectForEach({ 'color;background-image': 'url(https://example.com/a.png)' }, fn)
+      styleObjectForEach({ 'color:background': 'red' }, fn)
+      expect(fn).not.toBeCalled()
+    })
+
+    it('keeps safe property names that use digits', () => {
+      const fn = vi.fn()
+      styleObjectForEach({ '--my-var-1': '15px', '--myVar-2': '20px' }, fn)
+      expect(fn).toHaveBeenNthCalledWith(1, '--my-var-1', '15px')
+      expect(fn).toHaveBeenNthCalledWith(2, '--myVar-2', '20px')
+    })
+
+    it('keeps vendor-prefixed property names', () => {
+      const fn = vi.fn()
+      styleObjectForEach({ WebkitLineClamp: '2' }, fn)
+      expect(fn).toBeCalledWith('-webkit-line-clamp', '2')
+    })
+
+    it('keeps validating style property names after the valid style property name cache is reset', () => {
+      for (let i = 0; i < 1025; i++) {
+        styleObjectForEach({ [`--cache-${i}`]: '1px' }, () => {})
+      }
+
+      const fn = vi.fn()
+      styleObjectForEach({ '--after-reset-1': '2px', 'color:background': 'red' }, fn)
+      expect(fn).toBeCalledTimes(1)
+      expect(fn).toBeCalledWith('--after-reset-1', '2px')
+    })
+
+    it('skips unsupported runtime values without throwing', () => {
+      const fn = vi.fn()
+      expect(() => styleObjectForEach({ color: false, backgroundColor: 'white' }, fn)).not.toThrow()
+      expect(fn).toBeCalledTimes(1)
+      expect(fn).toBeCalledWith('background-color', 'white')
+    })
+  })
 })