fix：修复 CodeMirror 公式编辑器组件的 XSS 注入漏洞，防止恶意代码通过用户输入执行。

packages/amis-editor-core/src/locale/en-US.ts

@@ -287,5 +287,11 @@ extendLocale('en-US', {
   '0383d6f467ed0dd89860a7b8cc793ce9': 'Upper {{@1}} layer {{@2}}',
   'b818d2fd22f70de2d912f19048e2cde2': 'Intercepted {{@1}} rendering error',
   'e9a11b908a9b4f3d9dc947d9a64c0dab':
-    'A rendering error occurred. Please refer to the console output for detailed error information.'
+    'A rendering error occurred. Please refer to the console output for detailed error information.',
+  'f407c6b6264be4b590e28085d392b73d':
+    'It can be dragged into the following area to fix the drag-and-drop container',
+  '4d681c4aa93c8d005ec2ca2370618d6e': 'Visible',
+  'dce5379cb978a8259ecfca8f08f00817': 'Hide',
+  '02cc4f8f5a9aefbc03c778f7a5c989c7': 'Enter',
+  '35ba83e053cef95e55dfffde279822b5': 'No data displayed'
 });

packages/amis-editor-core/src/locale/zh-CN.ts

@@ -259,5 +259,10 @@ extendLocale('zh-CN', {
   '0383d6f467ed0dd89860a7b8cc793ce9': '上{{@1}}层{{@2}}',
   'b818d2fd22f70de2d912f19048e2cde2': '拦截到{{@1}}渲染错误',
   'e9a11b908a9b4f3d9dc947d9a64c0dab':
-    '渲染发生错误，详细错误信息请查看控制台输出。'
+    '渲染发生错误，详细错误信息请查看控制台输出。',
+  'f407c6b6264be4b590e28085d392b73d': '可拖入以下区域固定拖入容器',
+  '4d681c4aa93c8d005ec2ca2370618d6e': '可见',
+  'dce5379cb978a8259ecfca8f08f00817': '隐藏',
+  '02cc4f8f5a9aefbc03c778f7a5c989c7': '请输入',
+  '35ba83e053cef95e55dfffde279822b5': '无数据提示'
 });

packages/amis-editor/src/renderer/textarea-formula/plugin.tsx

@@ -4,6 +4,7 @@
 
 import {TextareaFormulaControlProps} from './TextareaFormulaControl';
 import {FormulaEditor} from 'amis-ui';
+import {escapeHtml} from 'amis-core';
 import type {VariableItem, CodeMirror} from 'amis-ui';
 
 export function editorFactory(
@@ -226,20 +227,23 @@ export class FormulaPlugin {
       this.config;
 
     const variables = getProps()?.variables as VariableItem[];
+    // 获取用户传入的 filterHtml，用于 XSS 过滤
+    const filterHtml = getProps()?.env?.filterHtml || ((html: string) => html);
     const highlightValue = FormulaEditor.highlightValue(
       expression,
       variables,
       true,
       false
     ) || {
-      html: expression
+      html: escapeHtml(expression)
     };
 
     const wrap = document.createElement('span');
     wrap.className = className;
     const text = document.createElement('span');
     text.className = `${className}-text`;
-    text.innerHTML = highlightValue.html;
+    // 使用 filterHtml 进行 XSS 过滤
+    text.innerHTML = filterHtml(highlightValue.html);
     text.setAttribute('data-expression', expression);
     text.onmouseenter = e => {
       const brace = this.getExpressionBrace(expression);
@@ -260,8 +264,8 @@ export class FormulaPlugin {
     if (showPopover) {
       // 添加popover
       const popoverEl = document.createElement('div');
-      // bca-disable-next-line
-      popoverEl.innerHTML = highlightValue.html;
+      // 使用 filterHtml 进行 XSS 过滤
+      popoverEl.innerHTML = filterHtml(highlightValue.html);
       popoverEl.classList.add('cm-expression-popover');
       const arrow = document.createElement('div');
       arrow.classList.add('cm-expression-popover-arrow');

packages/amis-theme-editor-helper/i18nConfig.js

@@ -6,9 +6,6 @@ module.exports = {
     test: /.*(ts|tsx|js|jsx)$/
   },
   includes: ['src/renderers'],
-  ignore: {
-    list: ['src/*']
-  },
   importInfo: {
     source: 'i18n-runtime',
     imported: 'i18n',

packages/amis-theme-editor-helper/src/locale/en-US.ts

@@ -229,5 +229,18 @@ extendLocale('en-US', {
   'c0215e2abf0fe27597acba2be64f6993': 'Small size',
   '93dee976f68681ec6950380d757d8c18': 'Multiple selection mode',
   '9be232c5cffa019aab21bd631ff23462': 'Yunshe',
-  '1dfba2e7e2df2efc4a25f4f2adcba25e': 'System preset theme'
+  '1dfba2e7e2df2efc4a25f4f2adcba25e': 'System preset theme',
+  '96b15b89fd7df6180780a7ac7305ba7c': 'Border size',
+  '84fafbb9668c30ba550e8bd3ebab65a6': 'Border style',
+  '9b4bae5d8251de0b6f00b704936b00d3': 'Border color',
+  'd9c2ace0d7ecc55bdea2fd91732ca29c': 'Gradient',
+  '20def7942674282277c3714ed7ea6ce0': 'image',
+  '690660d9dbd7312ad2825e554736e2f8': 'Font color',
+  '5f15efdc32badce0902c46a7a0105c51': 'Font size',
+  '916e646c9e6add3ae7053cbec7c37d91': 'Font weight',
+  'c3ce3c8fd80b9b9e221353faa162facf': 'Line height',
+  '4e7f76261f8c4c6d78998f85fc1f4c6e': 'Margin',
+  '841d77223f0ec8cd0b530ed8e0775b20': 'Padding',
+  'border-size': 'Border size',
+  'border-style': 'Border style'
 });

packages/amis-theme-editor-helper/src/locale/zh-CN.ts

@@ -228,5 +228,18 @@ extendLocale('zh-CN', {
   'c0215e2abf0fe27597acba2be64f6993': '尺寸小',
   '93dee976f68681ec6950380d757d8c18': '多选模式',
   '9be232c5cffa019aab21bd631ff23462': '云舍',
-  '1dfba2e7e2df2efc4a25f4f2adcba25e': '系统预设主题'
+  '1dfba2e7e2df2efc4a25f4f2adcba25e': '系统预设主题',
+  '96b15b89fd7df6180780a7ac7305ba7c': '边框粗细',
+  '84fafbb9668c30ba550e8bd3ebab65a6': '边框样式',
+  '9b4bae5d8251de0b6f00b704936b00d3': '边框颜色',
+  'd9c2ace0d7ecc55bdea2fd91732ca29c': '渐变',
+  '20def7942674282277c3714ed7ea6ce0': '图片',
+  '690660d9dbd7312ad2825e554736e2f8': '字体颜色',
+  '5f15efdc32badce0902c46a7a0105c51': '字体大小',
+  '916e646c9e6add3ae7053cbec7c37d91': '字体字重',
+  'c3ce3c8fd80b9b9e221353faa162facf': '字体行高',
+  '4e7f76261f8c4c6d78998f85fc1f4c6e': '外边距',
+  '841d77223f0ec8cd0b530ed8e0775b20': '内边距',
+  'border-size': '边框粗细',
+  'border-style': '边框样式'
 });

packages/amis-theme-editor-helper/src/renderers/Border.tsx

@@ -281,7 +281,9 @@ function BoxBorder(props: BorderProps & FormControlProps) {
               borderType === 'all' ? 'top' : borderType
             }-border-width`}
             state={state}
-            placeholder={editorDefaultValue?.[getKey('width')] || '边框粗细'}
+            placeholder={
+              editorDefaultValue?.[getKey('width')] || _i18n('border-size')
+            }
           />
           <div className="Theme-Border-settings-style-color">
             <Select
@@ -291,7 +293,7 @@ function BoxBorder(props: BorderProps & FormControlProps) {
                 getLabel(
                   editorDefaultValue?.[getKey('style')],
                   borderStyleOptions
-                ) || '边框样式'
+                ) || _i18n('border-style')
               }
               onChange={(item: any) => changeItem('style')(item.value)}
               clearable={!!editorDefaultValue}

packages/amis-ui/src/components/Html.tsx

@@ -17,13 +17,17 @@ export interface HtmlProps {
   filterHtml?: (input: string) => string;
 }
 
+export const HTMLFilterContext = React.createContext((txt: string) => txt);
+
 export class Html extends React.Component<HtmlProps> {
   static defaultProps = {
     inline: true
   };
 
   dom: any;
 
+  static contextType = HTMLFilterContext;
+
   constructor(props: HtmlProps) {
     super(props);
     this.htmlRef = this.htmlRef.bind(this);
@@ -49,7 +53,9 @@ export class Html extends React.Component<HtmlProps> {
     const {html, filterHtml} = this.props;
 
     if (html) {
-      this.dom.innerHTML = filterHtml ? filterHtml(html) : html;
+      let filter: (text: string) => string =
+        filterHtml || (this.context as any) || ((text: string) => text);
+      this.dom.innerHTML = filter(html);
     }
   }
 

packages/amis-ui/src/components/TooltipWrapper.tsx

@@ -317,8 +317,7 @@ export class TooltipWrapper extends React.Component<
       offset,
       tooltipTheme = 'light',
       showArrow = true,
-      children,
-      filterHtml
+      children
     } = tooltipObj;
 
     const childProps: any = {
@@ -372,10 +371,7 @@ export class TooltipWrapper extends React.Component<
           {children ? (
             <>{typeof children === 'function' ? children() : children}</>
           ) : (
-            <Html
-              html={typeof content === 'string' ? content : ''}
-              filterHtml={filterHtml}
-            />
+            <Html html={typeof content === 'string' ? content : ''} />
           )}
         </Tooltip>
       </Overlay>

packages/amis-ui/src/components/formula/Editor.tsx

@@ -5,7 +5,8 @@ import React from 'react';
 import {
   eachTree,
   resolveVariableAndFilterForAsync,
-  uncontrollable
+  uncontrollable,
+  escapeHtml
 } from 'amis-core';
 import {
   parse,
@@ -208,7 +209,8 @@ export class FormulaEditor extends React.Component<
       .filter(item => item)
       .sort((a, b) => b.length - a.length);
 
-    const content = value || '';
+    // XSS 防护：对用户输入进行转义
+    const content = escapeHtml(value || '');
     let html = '';
 
     // 标记方法调用

packages/amis-ui/src/index.tsx

@@ -13,10 +13,12 @@ import type {SchemaEditorItemPlaceholder} from './components/schema-editor/Commo
 import {schemaEditorItemPlaceholder} from './components/schema-editor/Common';
 import withStore from './withStore';
 import withRemoteConfig from './withRemoteConfig';
+import {HTMLFilterContext} from './components/Html';
 
 export {
   schemaEditorItemPlaceholder,
   SchemaEditorItemPlaceholder,
   withStore,
-  withRemoteConfig
+  withRemoteConfig,
+  HTMLFilterContext
 };

packages/amis/src/preset.tsx

@@ -6,7 +6,7 @@ import {
   themeable,
   ThemeProps
 } from 'amis-core';
-import {ImageGallery} from 'amis-ui';
+import {HTMLFilterContext, ImageGallery} from 'amis-ui';
 import {setRenderSchemaFn} from 'amis-ui/lib/components/Alert';
 import {alert, confirm} from 'amis-ui/lib/components/Alert';
 import {toast} from 'amis-ui/lib/components/Toast';
@@ -46,9 +46,11 @@ setRenderSchemaFn((controls, value, callback, scopeRef, theme) => {
 addRootWrapper((props: any) => {
   const {env, children} = props;
   return (
-    <ImageGallery modalContainer={env.getModalContainer}>
-      {children}
-    </ImageGallery>
+    <HTMLFilterContext.Provider value={env.filterHtml}>
+      <ImageGallery modalContainer={env.getModalContainer}>
+        {children}
+      </ImageGallery>
+    </HTMLFilterContext.Provider>
   );
 });
 

packages/amis/src/renderers/App.tsx

@@ -337,11 +337,7 @@ export class App extends React.Component<AppProps, object> {
 
           <div className={cx('Layout-brand')}>
             {logo && ~logo.indexOf('<svg') ? (
-              <Html
-                className={cx('AppLogo-html')}
-                html={logo}
-                filterHtml={env.filterHtml}
-              />
+              <Html className={cx('AppLogo-html')} html={logo} />
             ) : logo ? (
               <img className={cx('AppLogo')} src={logo} />
             ) : (

packages/amis/src/renderers/CRUD.tsx

@@ -2763,7 +2763,7 @@ export default class CRUD<T extends CRUDProps> extends React.Component<T, any> {
         </span>
         <span className={cx('Crud-valueLabel')}>
           {labelTpl ? (
-            <Html html={filter(labelTpl, item)} filterHtml={env.filterHtml} />
+            <Html html={filter(labelTpl, item)} />
           ) : (
             getVariable(item, labelField || 'label') ||
             getVariable(item, valueField || primaryField || 'id')

packages/amis/src/renderers/CRUD2.tsx

@@ -1424,10 +1424,7 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
             </span>
             <span className={cx('Crud-valueLabel')}>
               {labelTpl ? (
-                <Html
-                  html={filter(labelTpl, item)}
-                  filterHtml={env.filterHtml}
-                />
+                <Html html={filter(labelTpl, item)} />
               ) : (
                 getVariable(item, labelField || 'label') ||
                 getVariable(item, primaryField || 'id')

packages/amis/src/renderers/Carousel.tsx

@@ -170,7 +170,7 @@ const defaultSchema = {
             className={cx('Carousel-image')}
           />
         ) : data.hasOwnProperty('html') ? (
-          <Html html={data.html} filterHtml={props.env.filterHtml} />
+          <Html html={data.html} />
         ) : data.hasOwnProperty('item') ? (
           <span>{data.item}</span>
         ) : (

packages/amis/src/renderers/Form/Picker.tsx

@@ -605,7 +605,7 @@ export default class PickerControl extends React.PureComponent<
             }}
           >
             {labelTpl ? (
-              <Html html={filter(labelTpl, item)} filterHtml={env.filterHtml} />
+              <Html html={filter(labelTpl, item)} />
             ) : (
               `${
                 getVariable(item, labelField || 'label') ||

packages/amis/src/renderers/Link.tsx

@@ -94,7 +94,8 @@ export class LinkCmpt extends React.Component<LinkProps, object> {
       translate: __,
       title,
       icon,
-      rightIcon
+      rightIcon,
+      env
     } = this.props;
 
     let value =
@@ -106,7 +107,7 @@ export class LinkCmpt extends React.Component<LinkProps, object> {
       <Link
         className={className}
         style={style}
-        href={value}
+        href={env.filterHtml(value)}
         disabled={disabled}
         title={title}
         htmlTarget={htmlTarget || (blank ? '_blank' : '_self')}