在我的 React SharePoint 现代 Web 部件中使用 dangerouslySetInnerHTML 的安全方法

Question

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

在 Web 部件设置页面内 >> 有 2 个名为“我们是谁”和“我们的价值”的字段，允许用户输入 HTML.
Web 部件将呈现 2 个按钮“我们是谁”和“我们的价值”>> 并且当用户单击任何按钮时 >> 将显示一个弹出窗口，其中包含输入的 HTML 步骤 1 中的代码

内容如下：-

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

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 中 >> i 运行我的项目目录中的这个命令：-

npm install dompurify eslint-plugin-risxss

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

我添加了这个导入import { sanitize } from 'dompurify';
我用这个 <div dangerouslySetInnerHTML={{ __html: sanitize(myprops.OurValue) }} />

<p dangerouslySetInnerHTML={{__html:myprops.OurValue}}></p>

所以我的问题是：-

我尝试确保 dangerouslySetInnerHTML 的方式是否正确？或者我遗漏了什么？
第二个问题，如何测试 sanitize() 方法是否有效？

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

里面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>
    );
  }
}

Answer 1

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

这不仅可以测试 sanitize，还可以更全面地测试您的使用情况。

我不能说出你的解决方案的实际 quality/security，我认为那更像是一个代码审查问题。

Answer 2

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

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

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

Answer 3

实际上，您可以使用 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>" />

在我的 React SharePoint 现代 Web 部件中使用 dangerouslySetInnerHTML 的安全方法

Secure way to use dangerouslySetInnerHTML inside my react SharePoint Modern web part

javascript

xss

reactjs

sharepoint-online

dompurify