Cloudinary Images "broken" in Strapi after migration
I fixed our migration this morning for connecting strapi to a persisent V2 Postgres DB but now my images are not appearing in strapi after starting the service.
Do I have to modify the cloudinary variables via the raw editor to also reference Railway?
If so how would they look?
IE;
CLOUDINARY_KEY=${{Postgres.CLOUDINARY_KEY}}
Or something else?
Solution:Jump to solution
isnt your file spelt wrong? you have
middleware.js but isnt it middlewares.js?48 Replies
Project ID:
b5bfdc68-e6f6-4a25-903c-7ccd329c8f97Project ID: b5bfdc68-e6f6-4a25-903c-7ccd329c8f97
Any suggestions. I tried the above and it didn't work. It seems to only be the thumbnails not returned to Strapi - the URLs and images are actually loaded correctly.
When I upload a new image it drops to Strapi correctly but doesn't show in the interface.
do you have the cloudinary plugin configured correctly in code?
I am trying one thing to that now. I don't think I should need it but I get this error in the browser console;
Refused to load the image 'https://res.cloudinary.com/dwoluaptn/image/upload/v1692946185/thumbnail_coffee_art_2760d59f61_87f38a5608.jpg' because it violates the following Content Security Policy directive: "img-src 'self' data: blob: https://market-assets.strapi.io".
So I am attempting to add the market-assets-strapi.io to my directives.
let me know how that goes!
Doesn't deploy.... Or it is taking an awfully long time to deploy
Nope. Same error even with the strapi directive;
Refused to load the image 'https://res.cloudinary.com/dwoluaptn/image/upload/v1692946185/thumbnail_coffee_art_2760d59f61_87f38a5608.jpg' because it violates the following Content Security Policy directive: "img-src 'self' data: blob: https://market-assets.strapi.io".
This is my plugin;
module.exports = [
'strapi::errors',
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
'connect-src': ["'self'", 'https:'],
'img-src': [
"'self'",
'data:',
'blob:',
'https://res.cloudinary.com',
'https://market-assets.strapi.io' // Add this line for some reason
],
'media-src': [
"'self'",
'data:',
'blob:',
'https://res.cloudinary.com',
// If you also need to allow media from market-assets.strapi.io, add it here
],
upgradeInsecureRequests: null,
},
},
},
},
'strapi::cors',
'strapi::poweredBy',
'strapi::logger',
'strapi::query',
'strapi::body',
'strapi::session',
'strapi::favicon',
'strapi::public',
];
do you see the appropriate headers being returned by your app?
The app works fine apart from the thumbnail images. Which header should I be looking out for?
the content security policy
Appears to only have the market-assets file in it. See attached.
It has failed each time for this reason whether I put the directive in or leave it out. I am not using it so I never had it in in the first place. I only put it in my plugin because it failed because of it.
are you sure that's the correct format? why does self have triple single quotes?
I have multiple setups and they all look the same;
IE;
directives: {
'connect-src': ["'self'", 'https:'],
'img-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
'media-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
upgradeInsecureRequests: null,
It's a double quote around a single
Where is the strapi.io CSP coming from?
your code
but you aren't setting img-src somewhere to include cloudinary
Ok, but there is only one place you add it. The plugin and you've seen my code.
but it's not being sent to the browser, maybe there's cache? do a hard refresh
Tried that. I have restarted it from the code base several times and hard refreshed/used fresh browsers etc.
This is the link to the image itself.
https://res.cloudinary.com/dwoluaptn/image/upload/v1692946185/coffee_art_2760d59f61_87f38a5608.jpg
Works fine as you can see.
So it's only the thumb not returned to strapi which I actually need as well.
you'd have to look into why your img-src values aren't all being set
this worked perfectly before the changes I had to make today. So what could be the reasons?
I honestly have no clue
I only know the middleware plugin and the plugins.js files are what manage the img-src values. So I cannot see what I am doing wrong here.
Taking the strapi line back out of the code and trying again in case it was a cache issue.
Nope. No joy. Still the same strapi.io error in the console which is the only indication that there is an error somewhere. Is there something that your builds of Strapi are doing that automatically does the CSP to set that up?
nope railway doesnt touch your code, all code is ran as-is
There is no reference anywhere in my code to that line.
Only thing I can find is something in the node files pointing to strapi.
node_modules/@strapi/strapi/lib/middlewares/security.js > line 15.
'img-src': ["'self'", 'data:', 'blob:', 'https://market-assets.strapi.io']
so if your values arent being set, then your config would be wrong
Ok. So why would my values not be set?
that would more so be a question for strapi's docs
trying what you said earlier about the double quotes. Doesn't make much sense and doesn't break the code.
yeah double quotes around a single quote is fine, just looks like 3 triple single quotes since you didnt code format it
Dunno how in discord. hardly ever use it. 😄
surround the code in triple backticks
Yeah. That didn't work either. No I am stumped. I am going to eat. Please forward any ideas you might have here.
can you send me a link to your site where i can see this error?
im unable to reproduce this, when using the template https://railway.app/template/strapi the img-src value get set correctly and my thumbnail shows on the single types page
Yep the thumb doesn't work for me whether it's a single type or a collection. I'll set your email up as a user so you can view the console for yourself.
can you share your repo for strapi?
Sure.
I'll DM it.
Can't recall if this is public or private. Can you access it?
yes
I'll probably try uninstalling node and reinstalling tomorrow as it's the only place I can see which might have an incorrect config.
Solution
isnt your file spelt wrong? you have
middleware.js but isnt it middlewares.js?Not sure. I don't think I've changed that but I've tried so much today it might be something dumb like that.
I'm on mobile at the moment so it's difficult to check. Is your working template middlewares?
Ok. Something to check out tomorrow as well. Thx for your help.
no problem
You got to be kidding me. That's actually what it was.
Interestingly the strapi SVG logos don't work, but I changed them anyway so no worries.
Anyway thanks for your help. You can mark this as closed.