Ace 编辑器中的 JSHint 工作人员在静态 HTML 页面上被阻止

Posted 2023-02-27

【中文标题】Ace 编辑器中的 JSHint 工作人员在静态 HTML 页面上被阻止

【英文标题】：JSHint worker in Ace editor is blocked on static HTML page

【发布时间】：2021-06-02 16:39:58

【问题描述】：

我尝试从计算机上的 html 文件加载 Ace editor（使用 file:/// 协议）来编辑 javascript：

ace.edit("editor", 
    "mode": "ace/mode/javascript",
)

但是，CSP 会阻止 JSHint（Ace 默认实现）使用的工作程序。控制台会记录以下错误：

Content Security Policy: The page’s settings blocked the loading of a resource at blob:null/[...] (“worker-src”).

当我将loadWorkerFromBlob 设置为false 时：

ace.config.set("loadWorkerFromBlob", false)

产生了不同的错误：

Security Error: Content at file:///[...]/index.html may not load data from file:///[...]/ace/worker-javascript.js.

我尝试用<meta http-equiv="Content-Security-Policy">绕过CSP，但无济于事，搜索这个问题没有结果。

如何从本地 HTML 页面在 Ace 编辑器中使用 JSHint？

编辑：忘记说明这只是 Firefox 的问题。第一个示例在 Chromium 上对我来说完全正常。

【参考方案1】：

file:// URL 生成 null 来源，如您在错误消息中所见：

The page’s settings blocked the loading of a resource at blob:null/[...]

因此CORS不支持本地file://访问，请参见here和here。 还有Chrome doesn't let you load web workers when running scripts from a local file。

上面的链接包含一些解决方法，但我认为最好的方法是运行本地服务器以通过网络方案 (http://localhost/...) 加载工作人员。

【讨论】：

您知道是否有针对 Firefox 的解决方法吗？尽管这些链接说了什么，但奇怪的是，这个问题只在我使用 Firefox 而不是 Chromium 时出现。

Mozilla 引用安全策略和recommends 来运行本地网络服务器。