react-ace 编辑器导致内容安全策略错误答案

【问题标题】：react-ace editor causes content security policy errorreact-ace 编辑器导致内容安全策略错误
【发布时间】：2017-09-07 14:17:29
【问题描述】：

我对 react-ace 有一个奇怪的问题。我正在使用带有 Meteor 和 mobx 的编辑器。完整问题在这里：https://github.com/securingsincity/react-ace/issues/186

(1) 本质上，如果我使用模式为“toml”的 Ace Editor 实例，它可以正常工作。如果我将同一个实例与“html”一起使用，浏览器会引发 CSP 问题。我已经在 Chrome 和 Firefox 中对此进行了测试。

(2) 使用'toml'，没有错误。

(3) 使用“html”，仅更改了两行，即模式及其来源，这会引发如下图所示的 CSP 错误。

Console with html selected

(4) 任何指针将不胜感激。我花了很多时间尝试调试，但效果有限。我试图减少 CSP 的限制，但 env 是一个单页流星应用程序。在这一点上我很困惑。

(5) 我刚刚升级了我的反应，但我认为这不是问题。在 (a) Chrome 版本 56.0.2924.87 未知（64 位）[Ubuntu] 和 (b) FF 52.0.2（64 位）[Ubuntu] 上测试 - 前两个警告是由于这个原因，因此可以忽略。

(6) 超级简单的代码：

<AceEditor
name="ace"
mode="html" // this is the only line i am changing...
theme="chrome"
width="100%"
fontSize={18}
value={this.props.siteTemplateStore.aceTmpValue}
onChange={this.handleChange.bind(this)}
editorProps={{$blockScrolling: true}}
/>

注意，错误是：拒绝从 'blob:...' 创建工作者，因为它违反了以下内容安全策略指令：“default-src 'self' data:”。请注意，'worker-src' 没有显式设置，因此 'default-src' 用作后备。

【问题讨论】：

标签： javascript google-chrome reactjs meteor ace-editor

【解决方案1】：

ace 尝试创建一个 webworker 用于 html 语法检查，但由于规则允许 self 和 data 而被 csp 阻止。要解决此问题，请将 blob 添加到白名单

【讨论】：