Refused to create a worker inside chrome.offscreen html page due to Content Security Policy (CSP) violation

1,825 views
Skip to first unread message

isk

unread,
Jul 7, 2023, 12:29:42 PM7/7/23
to Chromium Extensions
I'm encountering a Content Security Policy (CSP) violation error while using `chrome.offscreen()` in my Chrome extension MV3. The issue arises when trying to create a web worker using the new Worker() constructor. Here are the relevant details:

- The error message:
 ``` Refused to create a worker from 'data:application/javascript;base64,... Owp9KShzZWxmKQ==' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:\* http://127.0.0.1:\*". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback. ```

 - The HTML code in offscreen.html:
```html
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; worker-src 'self' blob: data:; object-src 'self';">
    <title>Extension</title>
    <script defer="defer" src="src/offscreen.js"></script>
</head>
</html>
```

- The manifest.json file: ```
{
  "manifest_version": 3,
  "name": "Extension",
  "description": "Extension description",
  "version": "1.0.1",
  "background": {
    "service_worker": "src/backgroundPage.js",
  },
  "content_scripts": [
    {
      "matches": ["file://*/*", "http://*/*", "https://*/*"],
      "js": ["src/content.js"],
      "run_at": "document_start",
      "all_frames": true
    },
    {
      "matches": ["file://*/*", "http://*/*", "https://*/*"],
      "js": ["src/injected.js"],
      "run_at": "document_start",
      "all_frames": true,
      "world": "MAIN"
    }
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; script-src-elem 'self' data: blob:; worker-src 'self' data: blob:; object-src 'self'"
  },
  "permissions": [
    "scripting",
    "clipboardWrite",
    "activeTab",
    "storage",
    "notifications",
    "unlimitedStorage",
    "offscreen"
  ],
  "host_permissions": ["http://*/", "https://*/", "*://*/*"],
  "web_accessible_resources": [
    {
      "resources": ["src/content.js"],
      "matches": ["*://*/*"]
    },
    {
      "resources": ["src/offscreen.js"],
      "matches": ["*://*/*"]
    }
  ]
}
```

I have already attempted to resolve the issue by explicitly setting the 'worker-src' directive in the CSP, including the 'data:' scheme, but the error persists. I'm seeking assistance to identify the cause of this error and find a suitable solution.

Any help or insights would be greatly appreciated. Thank you!

Simeon Vincent

unread,
Jul 7, 2023, 2:05:08 PM7/7/23
to isk, Chromium Extensions
When I try to load an extension with the content_security_policy object you provided I recieve the following error message on load:
'content_security_policy.extension_pages': Insecure CSP value "data:" in directive 'worker-src'.

Manifest V3 Chrome extensions can't execute arbitrary code (and if they can it's against CWS policy), which is exactly what you're trying to do by providing a data: URI for the Worker script. The most direct way to work around this is to use a static script that is bundled with your extension rather than a data: URI.

Simeon - @dotproto


--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/e0dbc5b1-feb6-476f-939e-f6cebcd6d572n%40chromium.org.

Jackie Han

unread,
Jul 8, 2023, 1:36:06 AM7/8/23
to Simeon Vincent, isk, Chromium Extensions
From the error message, you want to use the contents of a string as a worker's source code.

1. In extension pages
As Simeon said, dynamic code is not allowed in normal extension pages.
You should use static code, e.g. new Worker("worker.js");

2. In sandbox pages
In extension sandbox pages, you can use it. For example,

// in manifest.json
"content_security_policy": {
  "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';",
  "sandbox": "sandbox allow-scripts allow-modals; script-src 'self' 'unsafe-inline' blob:"
},
"sandbox": {
  "pages": ["sandbox.html"]
},

// in sandbox.html
<html>
  <head></head>
  <body>
    <script>
      let response = "self.onmessage=function(e){postMessage('Worker: '+e.data);}";
      let blob = new Blob([response], {type: 'application/javascript'});
      let worker = new Worker(URL.createObjectURL(blob));

      worker.onmessage = function(e) {
        alert('Response: ' + e.data);
      };
      worker.postMessage('Test');
    </script>
  </body>
</html>

But sandbox pags have some limitations, more details see https://developer.chrome.com/docs/extensions/mv3/manifest/sandbox/

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/CACA%3D7_bMhtGKLXhujhavxOVdQSotjS-o8QZLga5yK1oCwhzZqA%40mail.gmail.com.

Jay Wang

unread,
Aug 17, 2023, 9:12:09 AM8/17/23
to Chromium Extensions, Jackie Han, isk, Chromium Extensions, Simeon Vincent
Hi Jackie and Simeon,

Thank you so much for the replies! I'm facing the same error. I now tried to put my web worker file as a static script and import it using the url `chrome.runtime.getURL('worker.js')`. However, it gives me this error in Chrome "Uncaught (in promise) DOMException: Failed to construct 'Worker': Script at 'chrome-extension://xxxxxxxxxxxxxxxx/worker.js' cannot be accessed from origin 'https://xxxxxx.com'." Do you have any tips on loading worker scripts?

Thanks you!
Jay

Jackie Han

unread,
Aug 17, 2023, 10:45:19 AM8/17/23
to Jay Wang, Chromium Extensions, isk, Simeon Vincent
Jay, your question is another problem.

Our previous answers talked about "new Worker()" in an extension page. Extension's CSP doesn't allow string(data url) as a worker's source except in a sandbox page.

But your problem is about "new Worker()" in a web page (not extension pages) with content scripts I guess. Usually web pages allow string as a worker's source if the page doesn't set a CSP. So you can use string as code like my previous example for sandbox. You can also refer to other examples like https://stackoverflow.com/a/62914052/1330598 . If the page has a strict CSP, you can try other workarounds like insert an iframe(an extension page) and let the worker run in the iframe.

Note: any resources used in web pages needs to be exposed via "web_accessible_resources".

sakthi

unread,
Aug 19, 2023, 1:27:17 AM8/19/23
to Chromium Extensions, Jackie Han, Chromium Extensions, isk, Simeon Vincent, Jay Wang
Hi Jackile . Is there any resource or perfect sample for sanboxing? becoz i tried google dev docs.It is not easy to understand.Plz share some reference if you have !!      

Reply all
Reply to author
Forward
0 new messages