1

我正在尝试构建一个 React.js SharePoint 现代 Web 部件，它具有以下功能：-

  1. 在 Web 部件设置页面 >> 中有 2 个名为“我们是谁”和“我们的价值”的字段，允许用户输入 HTML。

  2. Web 部件将呈现 2 个按钮“我们是谁”和“我们的价值”>>，当用户单击任何按钮 >> 将显示一个弹出窗口，其中包含在步骤 1 中输入的 HTML 代码

如下：-

在此处输入图像描述

但是为了能够在我的 Web 部件中将 HTML 代码呈现为富文本，我必须使用dangerouslySetInnerHTML.tsx 文件中的属性。如下：-

import * as React from 'react';
import { useId, useBoolean } from '@fluentui/react-hooks';
import {
  getTheme,
  mergeStyleSets,
  FontWeights,
  Modal,
  IIconProps,
  IStackProps,
} from '@fluentui/react';
import { IconButton, IButtonStyles } from '@fluentui/react/lib/Button';
export const MYModal2 = (myprops) => {
  const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false);
  const [isPopup, setisPopup] = React.useState(true);
  const titleId = useId('title');
  React.useEffect(() => {
      showModal();
  }, [isPopup]);
  function ExitHandler() {
    hideModal();
    setisPopup(current => !current)
    myprops.handler();
  }

  return (
    <div>
      <Modal
        titleAriaId={titleId}
        isOpen={isModalOpen}
        onDismiss={ExitHandler}
        isBlocking={true}
        containerClassName={contentStyles.container}
      >
        <div className={contentStyles.header}>
          <span id={titleId}>Modal Popup</span>
          <IconButton
            styles={iconButtonStyles}
            iconProps={cancelIcon}
            ariaLabel="Close popup modal"
            onClick={ExitHandler}
          />
        </div>
        <div  className={contentStyles.body}>
        <p dangerouslySetInnerHTML={{__html:myprops.OurValue}}>
   </p>

        </div>
      </Modal>

    </div>

  );
};

const cancelIcon: IIconProps = { iconName: 'Cancel' };

const theme = getTheme();
const contentStyles = mergeStyleSets({
  container: {
    display: 'flex',
    flexFlow: 'column nowrap',
    alignItems: 'stretch',
  },
  header: [
    // eslint-disable-next-line deprecation/deprecation
    theme.fonts.xLarge,
    {
      flex: '1 1 auto',
      borderTop: '4px solid ${theme.palette.themePrimary}',
      color: theme.palette.neutralPrimary,
      display: 'flex',
      alignItems: 'center',
      fontWeight: FontWeights.semibold,
      padding: '12px 12px 14px 24px',
    },
  ],
  body: {
    flex: '4 4 auto',
    padding: '0 24px 24px 24px',
    overflowY: 'hidden',
    selectors: {
      p: { margin: '14px 0' },
      'p:first-child': { marginTop: 0 },
      'p:last-child': { marginBottom: 0 },
    },
  },
});
const stackProps: Partial<IStackProps> = {
  horizontal: true,
  tokens: { childrenGap: 40 },
  styles: { root: { marginBottom: 20 } },
};
const iconButtonStyles: Partial<IButtonStyles> = {
  root: {
    color: theme.palette.neutralPrimary,
    marginLeft: 'auto',
    marginTop: '4px',
    marginRight: '2px',
  },
  rootHovered: {
    color: theme.palette.neutralDark,
  },
};

为了确保安全dangerouslySetInnerHTML，我执行了以下步骤：-

1- 在我的 Node.Js CMD 中 >> 我在我的项目目录中运行这个命令：-

npm install dompurify eslint-plugin-risxss

2-然后在我上面.tsx我做了以下修改：-

  • 我添加了这个导入import { sanitize } from 'dompurify';
  • <p dangerouslySetInnerHTML={{__html:myprops.OurValue}}></p>我用这个替换了这个不安全的代码<div dangerouslySetInnerHTML={{ __html: sanitize(myprops.OurValue) }} />

所以我的问题是： -

  1. 是我试图确保dangerouslySetInnerHTML正确的方式吗？或者我错过了什么？

  2. 第二个问题，我如何测试该sanitize()方法是否有效？

这是我的完整网络部件代码：-

在 MyModalPopupWebPart.ts 中：-

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as strings from 'MyModalPopupWebPartStrings';
import MyModalPopup from './components/MyModalPopup';
import { IMyModalPopupProps } from './components/IMyModalPopupProps';

export interface IMyModalPopupWebPartProps {
  description: string;
  WhoWeAre: string;
  OurValue:string;
}

export default class MyModalPopupWebPart extends BaseClientSideWebPart<IMyModalPopupWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IMyModalPopupProps> = React.createElement(
      MyModalPopup,
      {
        description: this.properties.description,
        WhoWeAre: this.properties.WhoWeAre,
        OurValue: this.properties.OurValue
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('WhoWeAre', {
                  label: "who We Are",
    multiline: true
                }),
                PropertyPaneTextField('OurValue', {
                  label: "Our value"
                }), PropertyPaneTextField('description', {
                  label: "Description",
    multiline: true
                }),
              ]
            }
          ]
        }
      ]
    };
  }
}

在 MyModalPopup.tsx 中：-

import * as React from 'react';
import { IMyModalPopupProps } from './IMyModalPopupProps';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { MYModal } from './MYModal';
import { MYModal2 } from './MYModal2';

interface IPopupState {
  showModal: string;
}

export default class MyModalPopup extends React.Component<IMyModalPopupProps, IPopupState> {
  constructor(props: IMyModalPopupProps, state: IPopupState) {
    super(props);
    this.state = {
      showModal: ''
    };
    this.handler = this.handler.bind(this);
    this.Buttonclick = this.Buttonclick.bind(this);
  }
  handler() {
    this.setState({
      showModal: ''
    })
  }
  private Buttonclick(e, whichModal) {
    e.preventDefault();

    this.setState({ showModal: whichModal });
  }
  public render(): React.ReactElement<IMyModalPopupProps> {

    const { showModal } = this.state;

    return (
      <div>

        <DefaultButton onClick={(e) => this.Buttonclick(e, 'our-value')} text="Our Value" />
        { showModal === 'our-value' && <MYModal2 OurValue={this.props.OurValue} myprops={this.state} handler={this.handler} />}

        <DefaultButton onClick={(e) => this.Buttonclick(e, 'who-we-are')} text="Who We Are" />
        { showModal === 'who-we-are' && <MYModal WhoWeAre={this.props.WhoWeAre} myprops={this.state} handler={this.handler} />}
      </div>
    );
  }
}
4

3 回答 3

2

为了测试功能，我建议使用类似React Testing Library的东西。编写测试应该（相当）简单，可以简单地使用恶意数据渲染您的组件，然后断言它不会做坏事（如渲染脚本元素或您关心的任何其他内容）。

这不仅有利于测试sanitize，而且有利于您以更全面的方式使用它。

我无法谈论您解决方案的实际质量/安全性，我认为这更像是一个代码审查问题。

于 2021-11-09T15:49:43.840 回答
2

实际上，您可以使用sanitize-html-react库清理 HTML 标记，并将清理后的结果呈现为以下字符串中的字符串dangerouslySetInnerHTML：

这是一个示例安全组件（使用 JavaScript）：

const defaultOptions = {
  allowedTags: [ 'a', 'div', 'span', ],
  allowedAttributes: {
    'a': [ 'href' ]
  },
  allowedIframeHostnames: ['www.example.com'],
  // and many extra configurations
};

const sanitize = (dirty, options) => ({
  __html: sanitizeHtml(
    dirty,
    options: { ...defaultOptions, ...options }
  )
});

const SanitizeHTML = ({ html, options }) => (
  <div dangerouslySetInnerHTML={sanitize(html, options)} />
);

在下面的示例中，该SanitizeHTML组件将被删除onclick，因为它不在您允许的配置中。

<SanitizeHTML html="<div><a href="youtube.com" onclick="alert('@')">link</a></div>" />
于 2021-11-12T09:44:40.510 回答
-1

你在客户端做什么根本不重要，如果用户想输入一堆脚本标签并在他们的客户端上执行一堆东西，让他们去做吧。最坏的情况是它只会弄乱他们自己的浏览器。不需要清理任何东西，根本不需要关心，你可以直接设置 innerHTML 并显示他们输入的内容。

您唯一真正关心的是数据何时发送到您的服务器，在这种情况下，您必须剥离所有脚本标签并确保它们没有向其中添加恶意代码。存在 XSS 的问题，即数据被传递到您的服务器，保存，然后显示在其他人的浏览器上。如果这不是您系统中发生的事情，那么您不必关心。如果这是您的系统上发生的事情，那么您需要关心的就是剥离脚本标签。

如果您正在从您无法控制的第 3 方站点执行获取请求，那么您唯一需要关心设置 innerHTML 的其他时间，如果您想将该 html 呈现到您的站点中，那么您需要小心. 但即便如此，react 也不会允许任何脚本执行，除非您手动单独创建脚本并使用createElement并appendChild实际渲染它们。即使那样你也很安全。如果您从自己的服务器中提取它，那么您不必关心是否使用 https。

于 2021-11-11T22:13:43.213 回答