react-draft-wysiwyg编辑器内联样式触发CSP问题该如何解决？

react-draft-wysiwyg默认会将编辑器生成的富文本样式以内联style属性的方式插入到DOM节点上，当站点CSP策略未开启unsafe-inline的样式权限时，这些内联样式会被直接拦截，导致样式失效，可按如下优先级选择修复方案：

• 方案1：将内联样式转换为CSS类名输出（最推荐，安全性最高）
  自定义编辑器的块渲染规则和内联样式渲染规则，为所有样式预定义对应的CSS类名，替换默认的内联样式输出，示例代码如下：

  import { Editor } from 'react-draft-wysiwyg';
  import Immutable from 'immutable';
  
  // 自定义块级样式渲染映射，比如文本对齐类
  const blockRenderMap = Immutable.Map({
    'align-left': {
      element: 'div',
      wrapper: <div className="text-align-left" />
    },
    'align-center': {
      element: 'div',
      wrapper: <div className="text-align-center" />
    },
    'align-right': {
      element: 'div',
      wrapper: <div className="text-align-right" />
    }
  });
  
  // 自定义内联样式渲染映射，比如文本颜色、字号类
  const customStyleMap = {
    COLOR_RED: {
      className: 'text-red'
    },
    FONT_SIZE_16: {
      className: 'text-size-16'
    }
  };
  
  // 将自定义配置传入Editor组件
  <Editor
    blockRenderMap={blockRenderMap}
    customStyleMap={customStyleMap}
    // 保留原有其他配置
  />
  

  之后在全局CSS文件中提前定义好上述类名对应的样式规则即可，完全规避内联样式生成。

• 方案2：通过哈希/nonce配置CSP放行合法内联样式（次推荐，兼顾安全与兼容性）
  如果需要保留内联样式，可计算合法内联样式的SHA256哈希值，配置到CSP的style-src指令中，示例配置如下：

  Content-Security-Policy: style-src 'self' 'sha256-替换为你要放行的样式哈希值';
  

  也可以使用nonce方案，每次页面渲染生成随机nonce值，配置到CSP中同时给所有合法内联样式加上对应nonce属性即可。

• 方案3：后置处理输出的HTML字符串（适合已有项目快速兼容）
  如果无法修改编辑器配置，可以在获取到编辑器输出的HTML字符串后，通过DOM解析工具遍历所有节点的style属性，将样式规则匹配转换为提前定义好的CSS类名，再移除节点的style属性后再存储/渲染。

  注意该方案需要穷举所有编辑器支持的样式规则，避免遗漏导致样式丢失。

• 方案4：添加unsafe-inline权限（仅推荐测试环境临时使用）
  直接在CSP的style-src指令中添加unsafe-inline，示例配置：

  Content-Security-Policy: style-src 'self' 'unsafe-inline';
  

  该方案会大幅降低站点防XSS攻击的安全等级，生产环境禁止使用。

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