I'm trying out the new Strapi v4. I installed the provider-upload-aws-s3 to upload my images to S3 and configured it. I do see my images in the S3 bucket, but I do not see them in the Media Gallery. I inspected request and I see I'm getting this error:
Content Security Policy: The page’s settings blocked the loading of a resource at {my img URL}.
When trying to get the image directly in the browser with the same URL and the image is being loaded.
I believe it has something to do with this warning (quote from Strapi documentation):
Strapi has a default Security Middleware that has a very strict contentSecurityPolicy that limits loading images and media to "'self'" only, see the example configuration on the provider page or take a look at our middleare documentation for more information.
But I'm not sure what to do with it and how to override it. So how do I make the uploaded to S3 images appear in the Media Gallery?
Well, at this point I was really sure it's a bug and reported it at Strapi Github issues. But according to this answer I received some more configuration had to be done in middlewares.js file:
module.exports = [
"strapi::errors",
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
"connect-src": ["'self'", "https:"],
"img-src": [
"'self'",
"data:",
"blob:",
"your-s3-url",
],
"media-src": ["'self'", "data:", "blob:"],
upgradeInsecureRequests: null,
},
},
},
},
"strapi::cors",
"strapi::poweredBy",
"strapi::logger",
"strapi::query",
"strapi::body",
"strapi::favicon",
"strapi::public",
];
I changed your-s3-url to *.amazonaws.com and then everything finally worked.
Related
I am trying to save some info and an image sent through api from React Native app. This is the request that I get if I log it.
[2022-08-05 10:11:09] local.ERROR: array ('{
"data":{
"_parts":' => array ('[
"image", {
"modificationDate":"1659694264000","size":2883040,"mime":"image/jpeg","height":4160,"width":3120,"path":"file:///storage/emulated/0/Android/data/com.wheeloffortune/files/Pictures/image-6ab1ad33-2580-416b-be7d-09a0662739218182247041115654861.jpg"
}' => NULL,
),)
When I tested api from postman I get image as a file and have saved it easily without a sweat. But from the app the developer sends in the format I pasted above. Can I somehow save image from the above request.
I'd like to understand how to enable caching in Strapi for a specific (or any) API endpoint. At the moment when the browser hits my endpoint in the response headers I don't see any caching related headers. Is there a way to use etags and have a long cache time to allow the JSON response to be cached?
There is one mention of etags in the docs but I'm not sure how to implement. If anyone can provide more detailed information it would be appreciated.
At least for static files this can be done within Strapi itself. The middlewares documentation suggests, that there is already a middleware called public, which sets a Cache-Control header with its maxAge when it serves the files from the public/ directory.
But if you want to get your uploaded files cached (i.e. files within the public/uploads/ directory), that’s not enough, because the middleware strapi-provider-upload-local (not yet documented) runs first.
A recently published package solves this issue:
npm i strapi-middleware-upload-plugin-cache
Simply activate it by adding or modifying the config/middleware.js file with the following content:
module.exports = ({ env }) => ({
settings: {
'upload-plugin-cache': {
enabled: true,
maxAge: 86400000
}
}
});
I suggest you manage this kind of thing outside of Strapi.
With another service. For example, if you host you app on AWS, you can use CloudFront.
I am working on an app using Django 2.1.5 with DRF 3.9.1 and on firefox browser console, I am getting this error:
downloadable font: download failed (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:2): bad URI or cross-site access not allowed source: http://softpro-admin-templates.websitedesignmarketingagency.com/assets/vendor_components/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
After some googling, I came across this link https://github.com/ottoyiu/django-cors-headers/
As mentioned in the document I have installed the package and made the following modifications in the settings file:
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', #added at the top
-----
]
INSTALLED_APPS = [
'corsheaders',
]
But still, I am getting the same error. Can someone help me with this issue?
I'm assuming you're not the owner of softpro-admin-templates.websitedesignmarketingagency.com
Somewhere on your site, you're using fontawesome version 4.7.0 (A common icon font) but providing the above host as the source for this font. Due to CORS policies in most browsers, the host has to specifically allow this if the site the request originates from (yours) was fetched from a different domain (origin).
As the maintainer(s) of softpro-admin-templates.websitedesignmarketingagency.com likely don't know anything about your site, this hasn't been done. Change the src of fontawesome to your own server or the CDN suggested by fontawesome to solve this.
I am trying to figure out how to force Cloudinary to use HTTPS in Keystone.
Tried using {{cloudinaryUrl image width=500 height=500 crop=‘fill’ secure=‘true’}} in the actual post.hbs page but no luck.
I've seen mention of this but cannot figure out which file the person is referring to.
If you are serving your page in http but you want to force cloudinary to https, you can set the option in the keystone.init function : 'cloudinary secure': true,
This option is mapped on cloudinary options described here
keystone.init({
'name': 'xyz',
...
'cloudinary secure': true,
....
Turning on this option changes http to https the protocol when you print an src image like this :
src=post._.image.src({dpr:'auto'}) // pug syntax
I'm running into a error with the Facebook SDK which appears to be related to the permissions on my S3 bucket. I'm using Ruby on Rails with the Paperclip gem with Amazon S3 for storage.
Right now I have the dialog setup like so:
FB.ui({
method: 'feed',
name: "Check out this project on WorkHands",
picture: "https://workhands_images.s3.amazonaws.com/images/avatars/1100/original/2013-08-05_04_13_28__0000.jpeg?1376351034",
link: link.attr('href'),
caption: 'Work by',
description: "hello",
display: 'popup',
redirect_ui: window.location.origin
}
The reason why I think it has something to do with S3 is that I can pass in an image url from another src not on S3 (even from google images) and the dialog works perfectly fine.
My understanding is that Paperclip sets the ACL of each object to public_read by default. https://github.com/thoughtbot/paperclip/blob/master/lib/paperclip/storage/s3.rb
I have tried setting a bucket policy similar to the example here: http://ariejan.net/2010/12/24/public-readable-amazon-s3-bucket-policy/
But that didn't seem to fix anything.
For the image above, when I call s3object.acle.grants.inspect, I get XML like this:
[<Grant><Grantee xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:type=\"CanonicalUser\"><ID>0e77d1de2a82b95d7b735e0071296ef5f903fa17ba0b98ecfe5ab2d36a8f17d0</ID>
cush4437FULL_CONTROL, http://www.w3.org/2001/XMLSchema-instance\" xsi:type=\"Group\">http://acs.amazonaws.com/groups/global/AllUsersREAD]
I think it's the numbers after the '?' in your url. Facebook is (probably?) being strict about formatting URL queries in the "k=v" format, and since there is no '=' it is unhappy.
Drop the 's' from 'https'. Facebook won't always reliably fetch them.
It turns out that Facebook throws this error because of the source url has two subdomains. see https://stackoverflow.com/a/7320178/1296645
mybucket.s3.amazonaws.com - throws an error
s3.amazonaws.com/mybucket - works fine