R
Railway•9mo ago
Blackbeak

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?
No description
Solution:
isnt your file spelt wrong? you have middleware.js but isnt it middlewares.js?
Jump to solution
48 Replies
Percy
Percy•9mo ago
Project ID: b5bfdc68-e6f6-4a25-903c-7ccd329c8f97
Blackbeak
Blackbeak•9mo ago
Project 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.
Brody
Brody•9mo ago
do you have the cloudinary plugin configured correctly in code?
Blackbeak
Blackbeak•9mo ago
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.
Brody
Brody•9mo ago
let me know how that goes!
Blackbeak
Blackbeak•9mo ago
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', ];
Brody
Brody•9mo ago
do you see the appropriate headers being returned by your app?
Blackbeak
Blackbeak•9mo ago
The app works fine apart from the thumbnail images. Which header should I be looking out for?
Brody
Brody•9mo ago
the content security policy
Blackbeak
Blackbeak•9mo ago
Appears to only have the market-assets file in it. See attached.
No description
Blackbeak
Blackbeak•9mo ago
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.
Brody
Brody•9mo ago
are you sure that's the correct format? why does self have triple single quotes?
Blackbeak
Blackbeak•9mo ago
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?
Brody
Brody•9mo ago
your code but you aren't setting img-src somewhere to include cloudinary
Blackbeak
Blackbeak•9mo ago
Ok, but there is only one place you add it. The plugin and you've seen my code.
Brody
Brody•9mo ago
but it's not being sent to the browser, maybe there's cache? do a hard refresh
Blackbeak
Blackbeak•9mo ago
Tried that. I have restarted it from the code base several times and hard refreshed/used fresh browsers etc.
Blackbeak
Blackbeak•9mo ago
Works fine as you can see. So it's only the thumb not returned to strapi which I actually need as well.
Brody
Brody•9mo ago
you'd have to look into why your img-src values aren't all being set
Blackbeak
Blackbeak•9mo ago
this worked perfectly before the changes I had to make today. So what could be the reasons?
Brody
Brody•9mo ago
I honestly have no clue
Blackbeak
Blackbeak•9mo ago
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?
Brody
Brody•9mo ago
nope railway doesnt touch your code, all code is ran as-is
Blackbeak
Blackbeak•9mo ago
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']
Brody
Brody•9mo ago
so if your values arent being set, then your config would be wrong
Blackbeak
Blackbeak•9mo ago
Ok. So why would my values not be set?
Brody
Brody•9mo ago
that would more so be a question for strapi's docs
Blackbeak
Blackbeak•9mo ago
trying what you said earlier about the double quotes. Doesn't make much sense and doesn't break the code.
Brody
Brody•9mo ago
yeah double quotes around a single quote is fine, just looks like 3 triple single quotes since you didnt code format it
Blackbeak
Blackbeak•9mo ago
Dunno how in discord. hardly ever use it. 😄
Brody
Brody•9mo ago
surround the code in triple backticks
Blackbeak
Blackbeak•9mo ago
Yeah. That didn't work either. No I am stumped. I am going to eat. Please forward any ideas you might have here.
Brody
Brody•9mo ago
can you send me a link to your site where i can see this error?
Brody
Brody•9mo ago
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
No description
Blackbeak
Blackbeak•9mo ago
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.
Brody
Brody•9mo ago
can you share your repo for strapi?
Blackbeak
Blackbeak•9mo ago
Sure. I'll DM it. Can't recall if this is public or private. Can you access it?
Brody
Brody•9mo ago
yes
Blackbeak
Blackbeak•9mo ago
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
Brody
Brody•9mo ago
isnt your file spelt wrong? you have middleware.js but isnt it middlewares.js?
Blackbeak
Blackbeak•9mo ago
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?
Blackbeak
Blackbeak•9mo ago
Ok. Something to check out tomorrow as well. Thx for your help.
Brody
Brody•9mo ago
no problem
Blackbeak
Blackbeak•9mo ago
You got to be kidding me. That's actually what it was.
Blackbeak
Blackbeak•9mo ago
Interestingly the strapi SVG logos don't work, but I changed them anyway so no worries.
No description
Blackbeak
Blackbeak•9mo ago
Anyway thanks for your help. You can mark this as closed.
Want results from more Discord servers?
Add your server