Set up Amazon S3 Upload Provider Plugin for Your Strapi App

5

Hello I’ve been following this guide and I’ve got uploading to the S3 bucking working. However I’m having an issue with getting uploaded .jpg files to display from the S3 bucket in strapi admin. I get the following error after the URL to the img on aws.

because it violates the following Content Security Policy directive: “img-src ‘self’ data: blob: dl.airtable.com .s3.amazonaws.com”.

I’ve done a fair amount of research and generally it seems to be a middleware configuration issue for most people. I’ve tried all the commonly found suggestions with no luck. This is my middleware config

module.exports = [
      'strapi::errors',

      {
        name: 'strapi::security',
        config: {
          contentSecurityPolicy: {
            useDefaults: true,
            directives: {
              'connect-src': ["'self'", 'https:'],
              'img-src': [
                "'self'",
                'data:',
                'blob:',
                'dl.airtable.com',
                `${process.env.AWS_BUCKET_NAME}.s3.amazonaws.com`,
              ],
              'media-src': [
                "'self'",
                'data:',
                'blob:',
                'dl.airtable.com',
                `${process.env.AWS_BUCKET_NAME}.s3.amazonaws.com`,
              ],
              upgradeInsecureRequests: null,
            },
          },
        },
      },
      /* End of snippet */
      'strapi::cors',
      'strapi::poweredBy',
      'strapi::logger',
      'strapi::query',
      'strapi::body',
      'strapi::session',
      'strapi::favicon',
      'strapi::public',
    ];

Any ideas would be appreciated. Thanks

1 Like