Question

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

（1）从本质上讲，如果我使用Ace Editor实例，模式为＆＃39; toml＆＃39;，它可以正常工作。如果我在＆＃39; html＆＃39;中使用相同的实例，则浏览器会抛出CSP问题。我已经在Chrome和Firefox中对此进行了测试。

（2）使用＆＃39; toml＆＃39;，没有错误。

（3）使用＆＃39; html＆＃39;，只更改了两行，即模式及其来源，这会引发下图中显示的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}}
/>

注意，错误是：拒绝从＆lt; blob创建工作人员：...＆＃39;因为它违反了以下内容安全策略指令：＆＃34; default-src＆＃39; self＆＃39;数据：＆＃34 ;.请注意＆＃39; worker-src＆＃39;没有明确设置，所以＆＃39; default-src＆＃39;被用作后备。

Answer 1

ace试图创建一个用于html语法检查的webworker，由于允许自我和数据的规则，csp被csp阻止。要解决此问题，请将blob添加到白名单

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

1 个答案: