Safari Refused to load <source> because it does not appear in the img-src directive of the Content Security Policy, but works in Chrome

Question

I have a Safari extension which loads images from Unsplash from the domain https://images.unsplash.com. I recently migrated to manifest v3 and used the following CSP in manifest.json:

  "content_security_policy": {
    "extension_pages": "img-src https://images.unsplash.com data:; script-src 'self'; object-src 'self';"
  },

This allows images to load correctly on Chrome, both the initial request from images.unsplash.com and a preload mechanism that loads them via a data: scheme.

On Safari, I get an error:

Refused to load https://images.unsplash.com/photo-1587830290334-020efdcbc345?crop=entropy&cs=tinysrgb&fit=max&fm=webp&ixid=MnwxNzkyODZ8MHwxfGFsbHx8fHx8fHx8fDE2MTczMjkzMDc&ixlib=rb-1.2.1&q=80&w=400 because it does not appear in the img-src directive of the Content Security Policy.

I get this even if I use that exact URL in the CSP. It seems to work as expected in other browsers, with images loading successfully. Is my CSP definition not technically correct and it's more strictly enforced in Safari, or some other issue?

References

1. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src
2. https://developer.chrome.com/docs/extensions/mv3/intro/

Answer 1

As @wOxxOm points out, there is indeed a bug. If you set a CSP via meta tag instead, it will behave as expected. So when submitting a build to App Store, remove the CSP key from manifest.json and Safari will rely on the CSP set via meta tag.

Works:

    <meta
      http-equiv="Content-Security-Policy"
      content="img-src https://images.unsplash.com data:; script-src 'self'; object-src 'self';"
    />

Tracking bug in Webkit: https://bugs.webkit.org/show_bug.cgi?id=243349