Strapi v4 - images uploaded to S3 are not displayed in media gallery

Question

I'm trying out the new Strapi v4. I installed the provider-upload-aws-s3 to upload my images to S3 and configured it. I do see my images in the S3 bucket, but I do not see them in the Media Gallery. I inspected request and I see I'm getting this error:

Content Security Policy: The page’s settings blocked the loading of a resource at {my img URL}.

When trying to get the image directly in the browser with the same URL and the image is being loaded.

I believe it has something to do with this warning (quote from Strapi documentation):

Strapi has a default Security Middleware that has a very strict contentSecurityPolicy that limits loading images and media to "'self'" only, see the example configuration on the provider page or take a look at our middleare documentation for more information.

But I'm not sure what to do with it and how to override it. So how do I make the uploaded to S3 images appear in the Media Gallery?

Answer 1

Well, at this point I was really sure it's a bug and reported it at Strapi Github issues. But according to this answer I received some more configuration had to be done in middlewares.js file:

module.exports = [
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "your-s3-url",
          ],
          "media-src": ["'self'", "data:", "blob:"],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::favicon",
  "strapi::public",
];

I changed your-s3-url to *.amazonaws.com and then everything finally worked.