dify

dify/web/__tests__/xss-prevention.test.tsx

@@ -0,0 +1,76 @@
+/**
+ * XSS Prevention Test Suite
+ *
+ * This test verifies that the XSS vulnerabilities in block-input and support-var-input
+ * components have been properly fixed by replacing dangerouslySetInnerHTML with safe React rendering.
+ */
+
+import React from 'react'
+import { cleanup, render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import BlockInput from '../app/components/base/block-input'
+import SupportVarInput from '../app/components/workflow/nodes/_base/components/support-var-input'
+
+// Mock styles
+jest.mock('../app/components/app/configuration/base/var-highlight/style.module.css', () => ({
+  item: 'mock-item-class',
+}))
+
+describe('XSS Prevention - Block Input and Support Var Input Security', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  describe('BlockInput Component Security', () => {
+    it('should safely render malicious variable names without executing scripts', () => {
+      const testInput = 'user@test.com{{<script>alert("XSS")</script>}}'
+      const { container } = render(<BlockInput value={testInput} readonly={true} />)
+
+      const scriptElements = container.querySelectorAll('script')
+      expect(scriptElements).toHaveLength(0)
+
+      const textContent = container.textContent
+      expect(textContent).toContain('<script>')
+    })
+
+    it('should preserve legitimate variable highlighting', () => {
+      const legitimateInput = 'Hello {{userName}} welcome to {{appName}}'
+      const { container } = render(<BlockInput value={legitimateInput} readonly={true} />)
+
+      const textContent = container.textContent
+      expect(textContent).toContain('userName')
+      expect(textContent).toContain('appName')
+    })
+  })
+
+  describe('SupportVarInput Component Security', () => {
+    it('should safely render malicious variable names without executing scripts', () => {
+      const testInput = 'test@evil.com{{<img src=x onerror=alert(1)>}}'
+      const { container } = render(<SupportVarInput value={testInput} readonly={true} />)
+
+      const scriptElements = container.querySelectorAll('script')
+      const imgElements = container.querySelectorAll('img')
+
+      expect(scriptElements).toHaveLength(0)
+      expect(imgElements).toHaveLength(0)
+
+      const textContent = container.textContent
+      expect(textContent).toContain('<img')
+    })
+  })
+
+  describe('React Automatic Escaping Verification', () => {
+    it('should confirm React automatic escaping works correctly', () => {
+      const TestComponent = () => <span>{'<script>alert("xss")</script>'}</span>
+      const { container } = render(<TestComponent />)
+
+      const spanElement = container.querySelector('span')
+      const scriptElements = container.querySelectorAll('script')
+
+      expect(spanElement?.textContent).toBe('<script>alert("xss")</script>')
+      expect(scriptElements).toHaveLength(0)
+    })
+  })
+})
+
+export {}