2017-04-12 51 views
0

我遇到了與react-ace有關的奇怪問題。我使用Meteor和mobx編輯器。這裏的全部問題:https://github.com/securingsincity/react-ace/issues/186react-ace編輯器導致內容安全策略錯誤

(1)實質上,如果我使用模式爲'toml'的Ace編輯器實例,它工作正常。如果我在'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:...」,因爲它違反了以下內容安全政策指令:「默認 - src'self'data:「。請注意,'worker-src'沒有明確設置,所以'default-src'被用作後備。

回答

0

ace會嘗試爲html語法檢查創建一個webworker,該語法檢查由於規則允許self和data而被csp阻止。要解決該問題,請將白名單添加到白名單