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
3 Likes
i get the same error for google cloud storage
@Carlos_Barrionuevo did you find any solutions?
@be_tim , @johnwick
Hey guys, have you found how to solve it?
It’s pretty annoying issue
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
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",
];
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",
];
Thanks that worked for me
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.
ijy
April 3, 2023, 9:16pm
10
@rudedude42069 dl.airtable is for marketplace assets:
opened 07:51PM - 19 Mar 22 UTC
closed 10:50AM - 21 Mar 22 UTC
source: marketplace
## Bug report
### Describe the bug
Plugins images are not loading in marke… t place due to CSP violation
### Screenshots

### System
- Node.js version: 14.17.6
- NPM version: 6.14.15
- Strapi version: 4.1.5
2 Likes
Hey,
I had the same issue when uploading a media, everything was fine except the thumbnail in the back-office.
In fact, I just needed to add the CDN URL to the authorized srcs
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/`,
env("CDN_URL"),
],
"media-src": [
"'self'",
"data:",
"blob:",
"dl.airtable.com",
`https://${env("AWS_BUCKET")}.s3.${env("AWS_REGION")}.amazonaws.com/`,
env("CDN_URL"),
],
upgradeInsecureRequests: null,
},
},
},
},
"strapi::cors",
"strapi::poweredBy",
"strapi::logger",
"strapi::query",
"strapi::body",
"strapi::session",
"strapi::favicon",
"strapi::public",
];
Hope it helps you