All content scripts blocked due to Content Security Policy enforcement in Chrome v130+

[lewisfzhang]

Build tool

Rollup

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

Content scripts don't load. Followed all of the steps in the documentation to create a starter chrome extension, the content script doesn't load anymore on Chrome V130 (works on <=Chrome V129)

Error

content-script-loader.content.tsx.js.js:8 Refused to load the script 'chrome-extension://8f4a282b-c178-49d5-985a-d69f0f0b3ccd/assets/content-script-preamble.js.js' 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 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

On closer inspection, it appears that this is due to Manifest V3 security policies being enforced. Which is weird because the template itself uses manifest version 3?

In Manifest V3, all CSP sources that refer to external or non-static content are forbidden. The only permitted values are 'none', 'self', and 'wasm-unsafe-eval'. In Manifest V2, a source for a script directive is considered secure if it meets these criteria:
source: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy

Reproduction

Update Chrome to V130
Any chrome extension with content script created using this template with Vite 2 will have the same error npm init vite@^2.9.4

Logs

No response

System Info

System:
    OS: macOS 13.3
    CPU: (8) arm64 Apple M2
    Memory: 41.92 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.18.0/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
    pnpm: 9.12.2 - ~/.nvm/versions/node/v18.18.0/bin/pnpm
    Watchman: 2024.07.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 130.0.6723.59
    Safari: 16.4
  npmPackages:
    @crxjs/vite-plugin: ^1.0.14 => 1.0.14 
    vite: ^2.9.15 => 2.9.18

Severity

blocking all usage of RPCE

[lvzhenbo]

Related issues
samrum/vite-plugin-web-extension#144

[onv]

The problem is not CSP but the change in the chrome.runtime.getURL() which now generates url chrome-extension://1d4b08e1-f2c5-48e5-839d-32c125e7a989/.. instead of extension://EXTENSION-ID/..
Replacing chrome.runtime.getURL() with template string chrome-extension://${chrome.runtime.id}/${filepath} solves the issue.

[n1kk]

I tried to make this patch locally, just replacing chrome.runtime.getURL with ((path)=>`chrome-extension://${chrome.runtime.id}/${path}`) in @crxjs/vite-plugin@2.0.0-beta.25, it fixed the loading of initial file, but then errored out on crx-client-preamble.js

Denying load of chrome-extension://gceefdnfdlgloahalkfhdfannbdcplom/vendor/crx-client-preamble.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

Trying to add that file to the web_accessible_resources crashes the plugin because it can't find that file in the source folder, which is not surprising.

[lvzhenbo]

According to the chromium issue, it's the use_dynamic_url: true option that's causing the problem.

[n1kk]

Yup, had to patch use_dynamic_url to false in all the places I could find it in the code. Now it seems to work for dev and build. Thanks @lvzhenbo. Found a some good pointers here too #918

[pietrofxq]

This is being tracked on #918. There are workarounds for the problem posted there

[jacksteamdev]

This was fixed in 2.0.0-beta.26. Closing in favor of #918 so people don't get confused.