使用不带 style-src 的 ACE Web 编辑器 'unsafe-inline'

Question

我想使用 ACE-Editor：https://ace.c9.io 以及 CSP（内容安全策略）。目前 ACE-Editor 正在工作，当我允许不安全的内联样式时：style-src 'unsafe-inline'.

有没有办法在没有内联样式的情况下使用 Ace 编辑器？（我从 https://ace.c9.io 下载了 ace.js 文件）

我的代码：

<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>

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);
})

提前感谢您的帮助！

Answer 1

Ace Editor 使用 2 种内联样式：

'' 颜色主题块，由脚本注入
style= 标签中的属性，例如 <div style='...'> 和 <textarea style='..'>

理论上您可以为此类内联样式计算 sha256 哈希值，并通过 'hash-source' + 'unsafe-hashes' 允许这些哈希值，但这将适用于特定的 Ace版本、颜色主题和语言突出显示。
问题是如何处理不支持 'unsafe-hashes' 的浏览器？ 'unsafe-inline' 将被 'hash-source' 取消，因此编辑器将无法在这些浏览器中运行。

或者您可以将 Ace Editor 放入沙盒中 <iframe> 并在其中使用限制较少的 CSP。

但是主要问题还是出现了——在Ace的脚本中如何处理unsafe-eval？在 Firefox 浏览器中 Call to eval() or related function blocked by CSP 违反 occurs，在 Chrome 中 - 没有。
Ace Editor 确实使用了不安全的 eval 结构，但在 worker 内部。 Chrome 和 FF 在这种情况下有不同的行为相关的 CSP 违规行为。
虽然在视觉上编辑器在 FF 中工作，即使锁定 eval

使用不带 style-src 的 ACE Web 编辑器 'unsafe-inline'

Use the ACE Web-Editor without style-src 'unsafe-inline'

html

javascript

content-security-policy