CSP violation in marketplace

[atouchsh]

Bug report

Describe the bug

Plugins images are not loading in market place due to CSP violation

Screenshots

System

• Node.js version: 14.17.6
• NPM version: 6.14.15
• Strapi version: 4.1.5

[markkaylor]

Hi @atouchsimo could you try clearing the .cache folder in you Strapi application and then rebuilding the admin panel. Could you also clear your browser cache?

[atouchsh]

@markkaylor yeap it was a cache issue, they are loading now 👍🏻

[christher-lenander]

Clearing the Cache folder didn't work for me. I use the strapi-provider-upload-dos for digital ocean.

[markkaylor]

@ChristherLenander do you have an error in the console you could share? Did you also clear your browser cache?

[christher-lenander]

Yes I cleard both Strapi cache and browser cache. Did yarn build after that.
I also have tested in chrome incognito mode with the same result.

[seeforcat]

Add dl.airtable.com to CSP Directive in /config/middlewares.js

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

[strapi-bot]

This issue has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/strapi-v4-broken-image-blob-dl-airtable-com/17941/10