React Markdown编辑器如何用DOMPurify替换marked的sanitize配置

操作步骤 #

• 安装DOMPurify依赖
  在项目根目录执行对应包管理命令完成安装：

  npm i dompurify
  # yarn用户执行 yarn add dompurify
  # TypeScript项目额外安装类型声明：npm i -D @types/dompurify
  

• 调整组件导入
  在App组件文件顶部引入DOMPurify即可。注意marked新版本已经废弃内置的sanitize参数，后续不需要再传该配置项，所有HTML消毒逻辑交给DOMPurify处理。
• 修改渲染逻辑
  调整renderText方法的执行顺序：先用marked把Markdown内容转为原始HTML字符串，再将该字符串传入DOMPurify.sanitize()过滤恶意脚本，最终返回处理后的安全HTML，传给dangerouslySetInnerHTML渲染。

修改后完整组件代码 #

import './App.css';
import { sampleText } from './sampleText';
import { marked } from 'marked';
import DOMPurify from 'dompurify';
import React, { Component } from 'react';

class App extends Component {
  state = {
    text: sampleText,
  };

  handleChange = (e) => {
    this.setState({ text: e.target.value });
  };

  renderText = (text) => {
    // marked旧版本可直接写 const rawHtml = marked(text)
    const rawHtml = marked.parse(text);
    return DOMPurify.sanitize(rawHtml);
  };

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-6">
            <textarea
              onChange={this.handleChange}
              value={this.state.text}
              className="form-control"
              rows="35"
            ></textarea>
          </div>
          <div className="col-sm-6">
            <div
              dangerouslySetInnerHTML={{
                __html: this.renderText(this.state.text),
              }}
            ></div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Stack Snippet调试适配 #

如果是用Stack Snippet做在线演示，不需要走npm安装流程，直接在HTML脚本引入区和其他依赖一样加入DOMPurify的脚本资源即可，JS代码中可以直接使用全局挂载的DOMPurify变量，无需import导入。

DOMPurify默认配置已经可以覆盖绝大多数常规XSS攻击场景，如果有自定义允许的标签、属性白名单需求，直接在sanitize方法的第二个参数传入自定义配置即可。

内容的提问来源于stack exchange，提问作者bob17