@nocobase/client-v2 2.3.0-beta.6 → 2.3.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.3.0-beta.6",
+  "version": "2.3.0-beta.8",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.3.0-beta.6",
-    "@nocobase/flow-engine": "2.3.0-beta.6",
-    "@nocobase/sdk": "2.3.0-beta.6",
-    "@nocobase/shared": "2.3.0-beta.6",
-    "@nocobase/utils": "2.3.0-beta.6",
+    "@nocobase/evaluators": "2.3.0-beta.8",
+    "@nocobase/flow-engine": "2.3.0-beta.8",
+    "@nocobase/sdk": "2.3.0-beta.8",
+    "@nocobase/shared": "2.3.0-beta.8",
+    "@nocobase/utils": "2.3.0-beta.8",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -48,5 +48,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "45b23791f5245d1417047b122d1a76764aaf5473"
+  "gitHead": "5d458884528593b2d3142a6a33de93bf0ad96543"
 }

package/src/flow/internal/components/Markdown/DisplayMarkdown.tsx

@@ -7,16 +7,17 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React, { useRef, useState, useEffect } from 'react';
-import { useParseMarkdown, convertToText } from './util';
-import { useMarkdownStyles } from './style';
+import React, { useEffect, useRef, useState } from 'react';
 import { Tooltip } from 'antd';
+import { useMarkdownStyles } from './style';
+import { convertToText, useParseMarkdown } from './util';
 
 export const DisplayMarkdown = (props) => {
-  const { textOnly, overflowMode, style } = props;
+  const { textOnly, overflowMode, sanitizeHtml, style } = props;
   const markdownClass = useMarkdownStyles();
   const { html = '' } = useParseMarkdown(props.value);
-  const text: any = convertToText(html);
+  const displayHtml = sanitizeHtml ? sanitizeHtml(html) : html;
+  const text = convertToText(displayHtml);
   const isEllipsis = overflowMode === 'ellipsis';
 
   const contentRef = useRef<HTMLDivElement>(null);
@@ -29,7 +30,7 @@ export const DisplayMarkdown = (props) => {
       const overflowed = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
       setIsOverflowed(overflowed);
     }
-  }, [html, style, overflowMode]);
+  }, [displayHtml, style, overflowMode]);
 
   // 通用样式（用于 ellipsis 模式）
   const baseStyle: React.CSSProperties = {
@@ -48,11 +49,15 @@ export const DisplayMarkdown = (props) => {
       : {}),
   };
 
-  const content = (
+  const content = textOnly ? (
+    <div ref={contentRef} className={`${markdownClass} nb-markdown`} style={baseStyle}>
+      {text}
+    </div>
+  ) : (
     <div
       ref={contentRef}
       className={`${markdownClass} nb-markdown`}
-      dangerouslySetInnerHTML={{ __html: textOnly ? text : html }}
+      dangerouslySetInnerHTML={{ __html: displayHtml }}
       style={baseStyle}
     />
   );
@@ -61,7 +66,7 @@ export const DisplayMarkdown = (props) => {
     <Tooltip
       title={
         <div
-          dangerouslySetInnerHTML={{ __html: html }}
+          dangerouslySetInnerHTML={{ __html: displayHtml }}
           style={{
             maxHeight: 500,
             overflowY: 'auto',

package/src/flow/internal/components/Markdown/__tests__/DisplayMarkdown.test.tsx

@@ -0,0 +1,46 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { render } from '@nocobase/test/client';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
+import React from 'react';
+import { DisplayMarkdown } from '../DisplayMarkdown';
+
+vi.mock('../util', () => ({
+  useParseMarkdown: (value: string) => ({ html: value }),
+  convertToText: (value: string) => {
+    const element = document.createElement('div');
+    element.innerHTML = value;
+    return element.textContent || '';
+  },
+}));
+
+describe('DisplayMarkdown', () => {
+  it('sanitizes HTML mode', () => {
+    const { container } = render(
+      <DisplayMarkdown
+        value={'<p>safe</p><img src="https://example.com/image.png" onerror="alert(1)"><script>alert(1)</script>'}
+        sanitizeHtml={sanitizeRichTextHtml}
+        textOnly={false}
+      />,
+    );
+
+    expect(container.querySelector('p')).toHaveTextContent('safe');
+    expect(container.querySelector('img')).not.toHaveAttribute('onerror');
+    expect(container.querySelector('script')).toBeNull();
+  });
+
+  it('renders decoded text as a text node', () => {
+    const payload = '&lt;img src=x onerror=alert(document.domain)&gt;';
+    const { container } = render(<DisplayMarkdown value={payload} sanitizeHtml={sanitizeRichTextHtml} textOnly />);
+
+    expect(container).toHaveTextContent('<img src=x onerror=alert(document.domain)>');
+    expect(container.querySelector('img')).toBeNull();
+  });
+});

package/src/flow/models/fields/DisplayHtmlFieldModel.tsx

@@ -8,6 +8,7 @@
  */
 
 import { DisplayItemModel, tExpr } from '@nocobase/flow-engine';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
 import React from 'react';
 import { DisplayMarkdown } from '../../internal/components/Markdown/DisplayMarkdown';
 import { DisplayTitleFieldModel } from './DisplayTitleFieldModel';
@@ -15,7 +16,7 @@ import { DisplayTitleFieldModel } from './DisplayTitleFieldModel';
 export class DisplayHtmlFieldModel extends DisplayTitleFieldModel {
   public renderComponent(value) {
     const { textOnly = true } = this.props;
-    return <DisplayMarkdown {...this.props} textOnly={textOnly} value={value} />;
+    return <DisplayMarkdown {...this.props} sanitizeHtml={sanitizeRichTextHtml} textOnly={textOnly} value={value} />;
   }
 }
 

package/src/flow/models/fields/RichTextFieldModel/__tests__/RichTextFieldModel.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { act, render } from '@nocobase/test/client';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { RichTextField } from '..';
+
+const mockState = vi.hoisted(() => ({
+  onChange: undefined as ((value: string) => void) | undefined,
+  value: undefined as unknown,
+}));
+
+vi.mock('../../../../../flow-compat', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../../../flow-compat')>();
+  return {
+    ...actual,
+    lazy: () => (props: { onChange?: (value: string) => void; value?: unknown }) => {
+      mockState.onChange = props.onChange;
+      mockState.value = props.value;
+      return null;
+    },
+  };
+});
+
+describe('RichTextField edit mode sanitization', () => {
+  beforeEach(() => {
+    mockState.onChange = undefined;
+    mockState.value = undefined;
+  });
+
+  it('sanitizes stored HTML before passing it to ReactQuill', () => {
+    const payload = '<p>safe</p><img src="https://example.com/image.png" onerror="alert(1)"><script>alert(1)</script>';
+
+    render(<RichTextField value={payload} onChange={vi.fn()} />);
+
+    expect(mockState.value).toBe(sanitizeRichTextHtml(payload));
+  });
+
+  it('preserves Delta values', () => {
+    const delta = { ops: [{ insert: 'safe\n' }] };
+
+    render(<RichTextField value={delta} onChange={vi.fn()} />);
+
+    expect(mockState.value).toBe(delta);
+  });
+
+  it('does not normalize active editor feedback', () => {
+    const editorValue = '<p>Hello<br>World</p>';
+    expect(sanitizeRichTextHtml(editorValue)).not.toBe(editorValue);
+
+    const { rerender } = render(<RichTextField value="" onChange={vi.fn()} />);
+    act(() => mockState.onChange?.(editorValue));
+    rerender(<RichTextField value={editorValue} onChange={vi.fn()} />);
+
+    expect(mockState.value).toBe(editorValue);
+  });
+
+  it('sanitizes subsequent external values', () => {
+    const payload = '<img src=x onerror="alert(1)">';
+    const { rerender } = render(<RichTextField value="" onChange={vi.fn()} />);
+
+    rerender(<RichTextField value={payload} onChange={vi.fn()} />);
+
+    expect(mockState.value).toBe(sanitizeRichTextHtml(payload));
+  });
+});

package/src/flow/models/fields/RichTextFieldModel/index.tsx

@@ -9,6 +9,8 @@
 
 import React from 'react';
 import { largeField, EditableItemModel } from '@nocobase/flow-engine';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
+import type ReactQuillComponent from 'react-quill';
 import { lazy } from '../../../../flow-compat';
 import { useRichTextStyles } from './style';
 import { FieldModel } from '../../base';
@@ -26,6 +28,8 @@ const ReactQuill = lazy(async () => {
   return import('react-quill');
 });
 
+type ReactQuillValue = ReactQuillComponent.ReactQuillProps['value'];
+
 export const RichTextField = (props) => {
   const richTextClass = useRichTextStyles();
   const boundsClass = React.useMemo(() => `quill-bounds-${Math.random().toString(36).slice(2, 9)}`, []);
@@ -83,19 +87,36 @@ export const RichTextField = (props) => {
     'break',
   ];
   const { value, onChange, disabled, modules: propsModules, formats: propsFormats } = props;
+  const previousIncomingValueRef = React.useRef(value);
+  const pendingEditorValueRef = React.useRef<{ value: ReactQuillValue }>();
+  const [editorValue, setEditorValue] = React.useState<ReactQuillValue>(() =>
+    typeof value === 'string' ? sanitizeRichTextHtml(value) : value,
+  );
+
+  React.useEffect(() => {
+    if (Object.is(value, previousIncomingValueRef.current)) {
+      return;
+    }
+    previousIncomingValueRef.current = value;
+    const pendingEditorValue = pendingEditorValueRef.current;
+    pendingEditorValueRef.current = undefined;
+    if (pendingEditorValue && Object.is(value, pendingEditorValue.value)) {
+      return;
+    }
+    setEditorValue(typeof value === 'string' ? sanitizeRichTextHtml(value) : value);
+  }, [value]);
 
   return (
     <ReactQuill
       className={`${richTextClass} ${boundsClass}`}
       modules={propsModules || modules}
       formats={propsFormats || formats}
-      value={value}
+      value={editorValue}
       onChange={(value) => {
-        if (value === '<p><br></p>') {
-          onChange('');
-        } else {
-          onChange(value);
-        }
+        const nextValue = value === '<p><br></p>' ? '' : value;
+        pendingEditorValueRef.current = { value: nextValue };
+        setEditorValue(nextValue);
+        onChange(nextValue);
       }}
       readOnly={disabled}
       bounds={`.${boundsClass}`}