ACE.js 的内容安全策略

Question

所以我正在设置 helmet-csp(https://www.npmjs.com/package/helmet-csp)，并且是运行高手。这是我的头盔设置：

var csp = require("helmet-csp");

app.use(csp({
    directives: {
        defaultSrc: ["'self'", "https://localhost:8000"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        sandbox: ["allow-forms", "allow-scripts", "allow-same-origin"],
        reportUri: "/report-violation",
        scriptSrc: ["'self'", "'unsafe-inline'",
        "https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js",
        "https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/theme-monokai.js",
        "https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-javascript.js"]
    }
}));

脚本是这样实现的（src链接到ace的本地嵌入）：

<script src="../../src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>

    var editor = ace.edit("editor");
    editor.getSession().setUseWorker(false);
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");

</script>

这没有破坏性的错误，但我一直在浏览器控制台中得到这个：

Refused to create a worker from 'blob:https://localhost:8000/34145ece-2c95-403b-92b0-79d02a5b4edd' because it violates the following Content Security Policy directive: "default-src 'self' https://localhost:8000". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.

和

Could not load worker DOMException: Failed to construct 'Worker': Access to the script at 'blob:https://localhost:8000/701e5193-c7f3-47b4-94da-c2086bfc2dd4' is denied by the document's Content Security Policy.
    at new u (https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js:1:305119)
    at createWorker (https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-javascript.js:1:22584)
    at p.$startWorker (https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js:1:159829)
    at p.$onChangeMode (https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js:1:159064)
    at p.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js:1:158825)
    at https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js:1:55143
    at Array.forEach (native)
    at https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js:1:55120
    at n (https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js:1:936)
    at a (https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js:1:1487)

感觉我已经尝试了 google 所能提供的一切，但没有结果。有人可以帮助我吗？

Answer 1

我必须添加 child-src 工作人员的政策才能工作。由于工作人员发送了某种 blob，因此我允许来自该来源的 blob。

app.use(csp({
    directives: {
        defaultSrc: ["'self'"],
        imgSrc: ["data: *"],
        childSrc: ["blob: *"],
        styleSrc: ["'self'", "'unsafe-inline'",
        "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"],
        sandbox: ["allow-forms", "allow-scripts", "allow-same-origin"],
        scriptSrc: ["'self'", "'unsafe-inline'", "https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js",
        "https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/theme-monokai.js",
        "https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-javascript.js",
        "https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/worker-javascript.js"],
        fontSrc: ["'self'", "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0",
        "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0]",
        "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0",
        "https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/worker-javascript.js"]
    }
}));

我还对脚本进行了一些更改以使其正常工作。为什么之后它起作用了，我不知道：

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
<script>
    var textarea = document.querySelector("#content");

    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");

    editor.getSession().on("change", function () {
        textarea.innerHTML = editor.getSession().getValue();
    });

    textarea.innerHTML = editor.getSession().getValue();
</script>

Answer 2

我正在使用 apache 网络服务器 headers 来设置内容安全策略。我在 script-src 指令中添加了 blob: 并且它工作正常。

Header 设置 Content-Security-Policy "default-src 'self'; media-src *; img-src ; font-src 'self' data:; script-src 'self' 'unsafe-eval' 'unsafe-inline' blob: https://.googleapis.com https://.google.com https://.google-analytics.com https://*.gstatic.com; style-src 'self' 'unsafe-inline'; object-src 'self';"

Answer 3

“script-src”中不需要包含ace URL，可以这样使用

scriptSrc: ["'self'", "'unsafe-eval'", 'blob:', 'data:'],

它会起作用

ACE.js 的内容安全策略

Content-security-policy with ACE.js

javascript

express

ace-editor

content-security-policy