0

I tried loading Ace editor from an HTML file on my computer (using file:/// protocol) to edit JavaScript:

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

However, CSP blocks a worker used by JSHint (which Ace implements by default). The following error is logged to the console:

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

When I set loadWorkerFromBlob to false:

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

A different error was generated:

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

I tried to bypass CSP with <meta http-equiv="Content-Security-Policy"> but to no avail, and searching this problem yielded no results.

How can I use JSHint in Ace editor from a local HTML page?

Edit: Forgot to specify that this is only a problem with Firefox. The first example worked completely fine for me on Chromium.

ban_javascript
  • 339
  • 1
  • 4
  • 16

1 Answers1

1

The file:// URLs produce a null Origin, as you can see in your error message:

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

Therefore CORS doesn't support local file:// access, pls see here and here.
Also Chrome doesn't let you load web workers when running scripts from a local file.

The links above copntains some workarounds, but I think the best way is to run a local server to load workers via network schemes (http://localhost/...).

granty
  • 7,234
  • 1
  • 14
  • 21
  • Do you know if there are any workarounds for Firefox? Despite what these links said, this problem strangely only occurs when I use Firefox and not Chromium. – ban_javascript Mar 05 '21 at 05:56
  • 1
    Mozilla refers to a security policies and [recommends](https://discourse.mozilla.org/t/simple-sync-worker-demo-local-debug-problem/54664) to run local web server. – granty Mar 05 '21 at 07:21