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

【问题标题】：Use the ACE Web-Editor without style-src 'unsafe-inline'使用没有 style-src 'unsafe-inline' 的 ACE Web-Editor
【发布时间】：2021-02-14 08:27:19
【问题描述】：

我想使用 ACE 编辑器：https://ace.c9.io 以及 CSP（内容安全策略）。目前 ACE 编辑器正在工作，当我允许不安全的内联样式时：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);
})

提前感谢您的帮助！

【问题讨论】：

标签： javascript html content-security-policy

【解决方案1】：

Ace Editor 使用 2 种内联样式：

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

理论上您可以为此类内联样式计算 sha256 哈希，并通过“哈希源”+“不安全哈希”允许这些哈希，但这适用于特定的 Ace 版本、颜色主题和语言突出显示。
问题是如何处理不支持“不安全哈希”的浏览器？ '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 构造，但在工作人员内部。对于这种情况，Chrome 和 FF 有不同的行为相关 CSP 违规。
尽管在视觉上编辑器在 FF 中工作，即使锁定 eval

【讨论】：

感谢您的回答。我现在必须考虑我的选择......