Merge pull request #6638 from allenve/xss-fix

fix: html 组件支持filterHtml
2024-12-02 20:09:08 +08:00 · 2023-04-18 15:24:46 +08:00 · 2023-04-18 15:24:46 +08:00 · dacca057e2
commit dacca057e2
parent 710de70fd3 e32aa90f38
8 changed files with 145 additions and 61 deletions
--- a/packages/amis-ui/src/components/Html.tsx
+++ b/packages/amis-ui/src/components/Html.tsx
@ -14,6 +14,7 @@ export interface HtmlProps {
  inline: boolean;
  classPrefix: string;
  classnames: ClassNamesFn;
+  filterHtml?: (input: string) => string;
 }

 export class Html extends React.Component<HtmlProps> {
@ -45,10 +46,10 @@ export class Html extends React.Component<HtmlProps> {
  }

  _render() {
-    const {html} = this.props;
+    const {html, filterHtml} = this.props;

    if (html) {
-      this.dom.innerHTML = html;
+      this.dom.innerHTML = filterHtml ? filterHtml(html) : html;
    }
  }

--- a/packages/amis-ui/src/components/TooltipWrapper.tsx
+++ b/packages/amis-ui/src/components/TooltipWrapper.tsx
@ -80,6 +80,10 @@ export interface TooltipObject {
   * 文字提示浮层CSS类名
   */
  tooltipClassName?: string;
+  /**
+   * html xss filter
+   */
+  filterHtml?: (input: string) => string;
 }

 export interface TooltipWrapperProps {
@ -300,7 +304,8 @@ export class TooltipWrapper extends React.Component<
      offset,
      tooltipTheme = 'light',
      showArrow = true,
-      children
+      children,
+      filterHtml
    } = tooltipObj;

    const childProps: any = {
@ -352,7 +357,10 @@ export class TooltipWrapper extends React.Component<
          {children ? (
            <>{typeof children === 'function' ? children() : children}</>
          ) : (
-            <Html html={typeof content === 'string' ? content : ''} />
+            <Html
+              html={typeof content === 'string' ? content : ''}
+              filterHtml={filterHtml}
+            />
          )}
        </Tooltip>
      </Overlay>
--- a/packages/amis/src/renderers/App.tsx
+++ b/packages/amis/src/renderers/App.tsx
@ -280,7 +280,15 @@ export default class App extends React.Component<AppProps, object> {
  }

  renderHeader() {
-    const {classnames: cx, brandName, header, render, store, logo} = this.props;
+    const {
+      classnames: cx,
+      brandName,
+      header,
+      render,
+      store,
+      logo,
+      env
+    } = this.props;

    return (
      <>
@ -294,7 +302,11 @@ export default class App extends React.Component<AppProps, object> {

          <div className={cx('Layout-brand')}>
            {logo && ~logo.indexOf('<svg') ? (
-              <Html className={cx('AppLogo-html')} html={logo} />
+              <Html
+                className={cx('AppLogo-html')}
+                html={logo}
+                filterHtml={env.filterHtml}
+              />
            ) : logo ? (
              <img className={cx('AppLogo')} src={logo} />
            ) : null}
--- a/packages/amis/src/renderers/CRUD.tsx
+++ b/packages/amis/src/renderers/CRUD.tsx
@ -2126,7 +2126,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
      labelField,
      labelTpl,
      primaryField,
-      translate: __
+      translate: __,
+      env
    } = this.props;

    if (!store.selectedItems.length) {
@ -2150,7 +2151,10 @@ export default class CRUD extends React.Component<CRUDProps, any> {
            </span>
            <span className={cx('Crud-valueLabel')}>
              {labelTpl ? (
-                <Html html={filter(labelTpl, item)} />
+                <Html
+                  html={filter(labelTpl, item)}
+                  filterHtml={env.filterHtml}
+                />
              ) : (
                getVariable(item, labelField || 'label') ||
                getVariable(item, primaryField || 'id')
--- a/packages/amis/src/renderers/CRUD2.tsx
+++ b/packages/amis/src/renderers/CRUD2.tsx
@ -1087,7 +1087,8 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
      labelField,
      labelTpl,
      primaryField,
-      translate: __
+      translate: __,
+      env
    } = this.props;

    if (!store.selectedItems.length) {
@ -1111,7 +1112,10 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
            </span>
            <span className={cx('Crud-valueLabel')}>
              {labelTpl ? (
-                <Html html={filter(labelTpl, item)} />
+                <Html
+                  html={filter(labelTpl, item)}
+                  filterHtml={env.filterHtml}
+                />
              ) : (
                getVariable(item, labelField || 'label') ||
                getVariable(item, primaryField || 'id')
--- a/packages/amis/src/renderers/Carousel.tsx
+++ b/packages/amis/src/renderers/Carousel.tsx
@ -99,7 +99,7 @@ export interface CarouselSchema extends BaseSchema {
   * 多图模式配置项
   */
  multiple?: {
-    count: number
+    count: number;
  };

  /**
@ -152,7 +152,7 @@ const defaultSchema = {
            className={cx('Carousel-image')}
          />
        ) : data.hasOwnProperty('html') ? (
-          <Html html={data.html} />
+          <Html html={data.html} filterHtml={props.env.filterHtml} />
        ) : data.hasOwnProperty('item') ? (
          <span>{data.item}</span>
        ) : (
@ -431,7 +431,7 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
      newOptions = new Array(options.length);
      for (let i = 0; i < options.length; i++) {
        newOptions[i] = new Array(count);
-        for(let j = 0; j < count; j++) {
+        for (let j = 0; j < count; j++) {
          newOptions[i][j] = options[(i + j) % options.length];
        }
      }
@ -472,16 +472,26 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
      controls!.indexOf('arrows') > -1
    ];
    const animationName = nextAnimation || animation;
-    
+
    if (Array.isArray(options) && options.length) {
      let multipleCount = 1;
-      if (multiple && typeof multiple.count === 'number' && multiple.count >= 2) {
-        multipleCount = Math.floor(multiple.count) < options.length ? Math.floor(multiple.count) : options.length;
+      if (
+        multiple &&
+        typeof multiple.count === 'number' &&
+        multiple.count >= 2
+      ) {
+        multipleCount =
+          Math.floor(multiple.count) < options.length
+            ? Math.floor(multiple.count)
+            : options.length;
      }
      const newOptions = this.getNewOptions(options, multipleCount);
-      const transitionDuration = multipleCount > 1 && typeof duration === 'number'
-        ? `${duration}ms`: (duration || '500ms');
-      const timeout = multipleCount > 1 && typeof duration === 'number' ? duration : 500;
+      const transitionDuration =
+        multipleCount > 1 && typeof duration === 'number'
+          ? `${duration}ms`
+          : duration || '500ms';
+      const timeout =
+        multipleCount > 1 && typeof duration === 'number' ? duration : 500;

      body = (
        <div
@ -506,9 +516,15 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
                    );
                }
                if (multipleCount > 1) {
-                  if ((status === ENTERING || status === EXITING) && !this.loading) {
+                  if (
+                    (status === ENTERING || status === EXITING) &&
+                    !this.loading
+                  ) {
                    this.loading = true;
-                  } else if ((status === ENTERED || status === EXITED) && this.loading) {
+                  } else if (
+                    (status === ENTERED || status === EXITED) &&
+                    this.loading
+                  ) {
                    this.loading = false;
                  }
                }
@ -518,27 +534,41 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
                } = {
                  [ENTERING]: 0,
                  [ENTERED]: 0,
-                  [EXITING]: animationName === 'slideRight' ? 100 / multipleCount : -100 / multipleCount,
-                  [EXITED]: animationName === 'slideRight' ? -100 / multipleCount : 100 / multipleCount
+                  [EXITING]:
+                    animationName === 'slideRight'
+                      ? 100 / multipleCount
+                      : -100 / multipleCount,
+                  [EXITED]:
+                    animationName === 'slideRight'
+                      ? -100 / multipleCount
+                      : 100 / multipleCount
                };
-                const itemStyle = multipleCount > 1 ? {
-                  transitionTimingFunction: 'linear',
-                  transitionDuration: transitionDuration,
-                  ...(animation === 'slide' ? {transform: `translateX(${transformStyles[status]}%)`} : {})
-                } : {};
-                const itemRender = (option: any) => render(
-                  `${current}/body`,
-                  itemSchema ? itemSchema : (defaultSchema as any),
-                  {
-                    thumbMode: this.props.thumbMode,
-                    data: createObject(
-                      data,
-                      isObject(option)
-                        ? option
-                        : {item: option, [name!]: option}
-                    )
-                  }
-                );
+                const itemStyle =
+                  multipleCount > 1
+                    ? {
+                        transitionTimingFunction: 'linear',
+                        transitionDuration: transitionDuration,
+                        ...(animation === 'slide'
+                          ? {
+                              transform: `translateX(${transformStyles[status]}%)`
+                            }
+                          : {})
+                      }
+                    : {};
+                const itemRender = (option: any) =>
+                  render(
+                    `${current}/body`,
+                    itemSchema ? itemSchema : (defaultSchema as any),
+                    {
+                      thumbMode: this.props.thumbMode,
+                      data: createObject(
+                        data,
+                        isObject(option)
+                          ? option
+                          : {item: option, [name!]: option}
+                      )
+                    }
+                  );

                return (
                  <div
@ -550,16 +580,20 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
                    style={itemStyle}
                  >
                    {multipleCount === 1 ? itemRender(option) : null}
-                    {multipleCount > 1 ? 
-                      newOptions[key].map((option: any, index: number) => (
-                        <div key={index} style={{
-                          width: 100 / multipleCount + '%',
-                          height: '100%',
-                          float: 'left'
-                        }}>
-                          {itemRender(option)}
-                        </div>
-                      )) : null}
+                    {multipleCount > 1
+                      ? newOptions[key].map((option: any, index: number) => (
+                          <div
+                            key={index}
+                            style={{
+                              width: 100 / multipleCount + '%',
+                              height: '100%',
+                              float: 'left'
+                            }}
+                          >
+                            {itemRender(option)}
+                          </div>
+                        ))
+                      : null}
                  </div>
                );
              }}
@ -571,7 +605,11 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {

    return (
      <div
-        className={cx(`Carousel Carousel--${controlsTheme}`, {['Carousel-arrow--always']: !!alwaysShowArrow}, className)}
+        className={cx(
+          `Carousel Carousel--${controlsTheme}`,
+          {['Carousel-arrow--always']: !!alwaysShowArrow},
+          className
+        )}
        style={carouselStyles}
      >
        {body ? body : placeholder}
@ -579,16 +617,28 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
        {dots ? this.renderDots() : null}
        {arrows ? (
          <div className={cx('Carousel-leftArrow')} onClick={this.prev}>
-            {icons && icons.prev
-              ? React.isValidElement(icons.prev) ? icons.prev : render('arrow-prev', icons.prev)
-              : (<Icon icon="left-arrow" className="icon" />)}
+            {icons && icons.prev ? (
+              React.isValidElement(icons.prev) ? (
+                icons.prev
+              ) : (
+                render('arrow-prev', icons.prev)
+              )
+            ) : (
+              <Icon icon="left-arrow" className="icon" />
+            )}
          </div>
        ) : null}
        {arrows ? (
          <div className={cx('Carousel-rightArrow')} onClick={this.next}>
-            {icons && icons.next
-              ? React.isValidElement(icons.next) ? icons.next : render('arrow-next', icons.next)
-              : (<Icon icon="right-arrow" className="icon" />)}
+            {icons && icons.next ? (
+              React.isValidElement(icons.next) ? (
+                icons.next
+              ) : (
+                render('arrow-next', icons.next)
+              )
+            ) : (
+              <Icon icon="right-arrow" className="icon" />
+            )}
          </div>
        ) : null}
      </div>
--- a/packages/amis/src/renderers/Form/Picker.tsx
+++ b/packages/amis/src/renderers/Form/Picker.tsx
@ -387,7 +387,8 @@ export default class PickerControl extends React.PureComponent<
      labelField,
      labelTpl,
      translate: __,
-      disabled
+      disabled,
+      env
    } = this.props;

    return (
@ -418,7 +419,10 @@ export default class PickerControl extends React.PureComponent<
              }}
            >
              {labelTpl ? (
-                <Html html={filter(labelTpl, item)} />
+                <Html
+                  html={filter(labelTpl, item)}
+                  filterHtml={env.filterHtml}
+                />
              ) : (
                `${
                  getVariable(item, labelField || 'label') ||
--- a/packages/amis/src/renderers/TooltipWrapper.tsx
+++ b/packages/amis/src/renderers/TooltipWrapper.tsx
@ -253,7 +253,8 @@ export default class TooltipWrapper extends React.Component<
      offset,
      showArrow,
      disabled,
-      enterable
+      enterable,
+      filterHtml: env.filterHtml
    };

    return (