Error Loading Chrome Extension - Insecure CSP value "" in directive 'script-src'

Question

When Migrating MV2 to MV3, Chrome is throwing this error:

Insecure CSP value "" in directive 'script-src'

Here's my content security policy:

"content_security_policy": {
    "extension_pages": "script-src 'self' 'https://www.fonts.googleapis.com' 'unsafe-eval'; object-src 'self'"
}

How can I fix this?

Destroyer

You can't do it. ManifestV3 doesn't allow external scripts. – Runin

Answer 1

According to the section on Remotely hosted code restrictions in the v2 to v3 migration guide:

Remotely hosted code refers to any code that is not included in an extension's package as a loadable resource. For example, the following are considered remotely hosted code:

• JavaScript files pulled from the developer's server.
• Any library hosted on a CDN.
• a code string passed into eval() at runtime

In Manifest V3, all of your extension's logic must be included in the extension. You can no longer load and execute a remotely hosted file.

You'll have to download a local version of the script and reference that

Manifest V2 Page

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Manifest V3 Page

<script src="./react-dom.production.min.js"></script>
<link href="./bootstrap.min.css" rel="stylesheet">

Quiberon

Answer 2

"In Manifest V3, all of your extension's logic must be part of the extension package. You can no longer load and execute remotely hosted files." Source: https://developer.chrome.com/docs/extensions/migrating/improve-security/#remove-remote-code

This was particularly bothersome for me because I need to be able to use the Google Maps Javascript API which is not an external script I can easily download and host. To my understanding, it is always changing.

If your external content is something like an image or resource, you can load that with an XMLHTTPRequest. More info: https://developer.chrome.com/docs/apps/contentSecurityPolicy/#remote_resources

One method Google Developers Guide alludes to is to have your popup.html load in a "sandbox". To my understanding, the main way to use sandbox is simply load in an iframe in your popup.html. The sandbox has a different CSP and does not have direct access to the Chrome APIs. If you want it to have access to that, you will have to communicate to it through iframe messaging, something for a different question.

Essentially, just copy & paste your popup.html into a new sandbox.html.

Then your new popup.html will need to have an iframe like this:

<iframe src="/sandbox.html" frameborder="0" width="400" height="800"></iframe>
<!-- popup.js is where you would put code to communicate with the iframe -->
<script src="popup.js"></script>

Your sandbox.html can have as many external script tags as you like. You may need to mess with the sizing of the iframe and style it so it looks the same as V2.

As other commenters pointed out, the Manifest V3 has a new format. More info can be found at: https://developer.chrome.com/docs/extensions/mv3/manifest/content_security_policy/#default-policy

Your manifest might look something like this:

{
  ...
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  },
  "content_security_policy": {
    // This is default
    "extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self'",
    // This has been changed to allow the Maps API
    "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self'; script-src-elem 'self' https://maps.googleapis.com"
  },
  "sandbox": {
    "pages": ["sandbox.html"]
 }
}

The Guide also mentions you can use a webview tag but the link for more info is broken like many others in the guide and I don't feel like spending more of my time on poor documentation: https://developer.chrome.com/docs/apps/contentSecurityPolicy/#embed_content

Lastly, the Guide mentions you should watch this video about CSP and iFrames: https://www.youtube.com/watch?v=GBxv8SaX0gg

Sy

Answer 3

You should not have quotes around URLs, hosts and schemes. You should only quote keyword as 'self', 'none', 'unsafe-inline', 'nonce-XXX' and hashes. See https://content-security-policy.com/#source_list for examples. Specifically you need to remove the quotes around https://www.fonts.googleapis.com

Ganger

Sir, I tried without quotes doesn't work – Destroyer