Strapi v4 broken image Blob: dl.airtable.com

Community Packages Middlewares
#1

This is the problem that the chrome console shows me.

Refused to load the image ‘https://bucket.s3.amazonaws.com/thumbnail_trogon_03a82adfef.jpeg?width=1200&height=800’ because it violates the following Content Security Policy directive: “img-src ‘self’ data: blob: https://dl.airtable.com”.

Middelware

middleware
middleware1144×1396 186 KB

3 Likes
Is there a way to show my s3 images when viewing Media Library?
#2

i get the same error for google cloud storage

#3

@Carlos_Barrionuevo did you find any solutions?

#4

@be_tim , @johnwick
Hey guys, have you found how to solve it?
It’s pretty annoying issue

#5

delete “strapi:security”

#6

yes, just remove the region from the resource url string you create in the middleware file, your middlewares.js should be like:

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

that solves the problem.

2 Likes
#7

These settings worked for me:

module.exports = ({ env }) => [
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "dl.airtable.com",
            `https://s3.${env("AWS_REGION")}.amazonaws.com/${env(
              "MEDIA_BUCKET"
            )}/`,
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            "dl.airtable.com",
            `https://s3.${env("AWS_REGION")}.amazonaws.com/${env(
              "MEDIA_BUCKET"
            )}/`,
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::session",
  "strapi::favicon",
  "strapi::public",
];
#8

Thanks for sharing, it almost worked for me, I only had to change the AWS url a bit, this is the code that worked for me:

module.exports = ({ env }) => [
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "dl.airtable.com",
            `https://${env("AWS_BUCKET")}.s3.${env("AWS_REGION")}.amazonaws.com/`,
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            "dl.airtable.com",
            `https://${env("AWS_BUCKET")}.s3.${env("AWS_REGION")}.amazonaws.com/`,
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::session",
  "strapi::favicon",
  "strapi::public",
];
#9

Thanks that worked for me :slight_smile:
Just had to get the s3 URL pattern to match what was being requested… and change the env variable names to match mine.

Also, this is a sidenote… but what does dl.airtable.com have anything to do with aws or strapi? I googled but couldn’t find anything.