使用没有 style-src 'unsafe-inline' 的 ACE Web-Editor

Question

I would like to use the ACE-Editor: https://ace.c9.io and also CSP (content-security-policy).我想使用 ACE 编辑器： https : //ace.c9.io和 CSP（内容安全策略）。 At the moment the ACE-Editor is just working, when I allow the unsafer inline styling: style-src 'unsafe-inline'.目前 ACE-Editor 正在工作，当我允许不安全的内联样式时：style-src 'unsafe-inline'。

Is there a way to use the Ace Editor without inline styling?有没有办法在没有内联样式的情况下使用 Ace Editor？ (I downloaded the ace.js file from https://ace.c9.io ) （我从https://ace.c9.io下载了 ace.js 文件）

My Code:我的代码：

<body>
<script src="{{url_for('static', filename='ace.js')}}" type="text/javascript" charset="utf-8"></script>

<h2>Code editor</h2>

<br>

<button type="button" class="btn btn-primary btn-lg" id="edit_code">Edit</button>
<button type="button" class="btn btn-primary btn-lg" id="SendCode">Send to server</button>
<br> <br>

<div class="editor" id="editor">
import math

def foo(): 
    x = "All this is syntax highlighted"
    return x

print(foo())
</div> 

<script src="{{ url_for('static', filename='code_editor.js') }}"></script>
</body>

the content of the code_editor.js file: code_editor.js 文件的内容：

document.addEventListener('DOMContentLoaded', function () {

    class CodeEditor {
        constructor() {
            this.editor = ace.edit("editor");
            this.editor.setTheme("ace/theme/twilight");
            this.editor.session.setMode("ace/mode/python");
        }

        activate_edit_mode() {
            this.editor.setReadOnly(false);
            document.getElementById("SendCode").disabled = true;
        }

        post_code() {
            // Sends the working code to the server backend,
            // from here it gets inserted into the queque

            var arr = { python_code: this.editor.getValue()};
            $.ajax({
                url: '/login/receiver',
                type: 'POST',
                data: JSON.stringify(arr),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json', // # expected return data type
                async: false,
                success: function successor(){
                    alert("Data was succesfully sended to the server!");
                    },
                error: function(jqXhr, textStatus, errorMessage){
                alert("Error: "+ errorMessage);
                    }

                });
                // stop link reloading the page
                event.preventDefault();
        }       

    };

    const code_editor = new CodeEditor();
    code_editor.activate_edit_mode();
    // Code editor functions

    function post_code() {
        code_editor.post_code();
    }

    function make_ace_editable() {
        code_editor.activate_edit_mode();
    }

    // Button interactions
    document.getElementById("SendCode").addEventListener("click", post_code);
    document.getElementById("edit_code").addEventListener("click", make_ace_editable);
})

Thanks for the help in advance!我在这里先向您的帮助表示感谢！

Answer 1

Ace Editor uses 2 kinds of inline styles: Ace Editor 使用了 2 种内联样式：

'' blocks for color theme, injected by script '' 颜色主题块，由脚本注入
style= attribute in tags like <div style='...'> and <textarea style='..'> style= 标签中的属性，例如<div style='...'>和<textarea style='..'>

Theoretically you can to calc sha256 hashes for such inline styles and do allow those via 'hash-source' + 'unsafe-hashes', but this will applicable for specific Ace version, color theme and language highlighting.从理论上讲，您可以为此类内联样式计算 sha256 哈希值，并通过“哈希源”+“不安全哈希”允许这些哈希，但这将适用于特定的 Ace 版本、颜色主题和语言突出显示。
The question is what to do with browsers not support 'unsafe-hashes'?问题是如何处理不支持“不安全哈希”的浏览器？ 'unsafe-inline' will be cancelled by 'hash-source' therefore Editor will not operate in those browsers. 'unsafe-inline' 将被 'hash-source' 取消，因此 Editor 将无法在这些浏览器中运行。

Alternatively you can place Ace Editor into sandboxed <iframe> and use less restrictive CSP in it.或者，您可以将 Ace Editor 放入沙盒<iframe>并在其中使用限制较少的 CSP。

But main question is still arised - what to do with unsafe-eval in scripts of Ace?但主要问题仍然出现 - 如何处理 Ace 脚本中的 unsafe-eval？ In Firefox browsers Call to eval() or related function blocked by CSP violation occurs , in Chrome - does not.在 Firefox 浏览器中， Call to eval() or related function blocked by CSP违规Call to eval() or related function blocked by CSP会发生，而在 Chrome 中则不会。
Ace Editor do really use unsafe eval constructs, but inside workers. Ace Editor 确实使用了不安全的 eval 构造，但是在工作人员内部。 Chrome and FF have different behaviour related CSP violations for this case.在这种情况下，Chrome 和 FF 有不同的与 CSP 违规相关的行为。
Although visually the editor works in FF even with locked eval尽管在视觉上编辑器在 FF 中工作，即使锁定了 eval

使用没有 style-src 'unsafe-inline' 的 ACE Web-Editor

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-11-02 05:31:23

使用没有 style-src &#39;unsafe-inline&#39; 的 ACE Web-Editor

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-11-02 05:31:23

使用没有 style-src 'unsafe-inline' 的 ACE Web-Editor

解决方案1
0 已采纳 2020-11-02 05:31:23