Fail to display images from other cloud storage

[SOG-web]

Bug report

Required System information

• Node.js version: 16
• NPM version: 8
• Strapi version: 4
• Database: sqllite
• Operating system: windows

Describe the bug

I was able to build a custom extension for uploading assets to firebase storage and it worked fine, but the image does not display on the strapi admin dashboard media library. I try to debug it and i got this error Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data: blob: <URL>". in the browser console.

The images load properly on my front-end app, so it shows that everything is wired up rightly but strapi seems not to support the google api url

Refused to load the image 'https://storage.googleapis.com/plpm-8f7f5.appspot.com/uploads/thumbnail_65535_52188045251_0062fbe3ea_c_640_480_nofilter.jpg?width=640&height=480' because it violates the following Content Security Policy directive: "img-src 'self' data: blob: https://dl.airtable.com".

[Kazdan1994]

Hey,

Due to the default settings in the Strapi Security Middleware you will need to modify the contentSecurityPolicy settings to properly see thumbnail previews in the Media Library. You should replace strapi::security string with the object bellow instead as explained in the middleware configuration documentation.

./config/middlewares.js

module.exports = [
  // ...
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': ["'self'", 'data:', 'blob:', 'https://dl.airtable.com'],
          'media-src': ["'self'", 'data:', 'blob:', 'https://dl.airtable.com'],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  // ...
];

[SOG-web]

ok thanks, I will try it out now