System Information
- Strapi Version: v4.20.1
- Operating System: Mac and EC2 Linux
- Database: RDS Postgres
- Node Version: v18.19.1 and v18.20
I am uploading media asset from Strapi media library, but is not visible in preview. Here is the middleware:
module.exports = ({ env }) => [
"strapi::errors",
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
"connect-src": ["'self'", "https:"],
"img-src": [
"'self'",
"data:",
"blob:",
"market-assets.strapi.io",
"https://xxx.clientsideassets.s3.amazonaws.com",
"https://xxx.s3.us-east-2.amazonaws.com",
"https://s3.us-east-2.amazonaws.com/xxx.clientsideassets",
"xxx.clientsideassets.s3.us-east-2.amazonaws.com",
"https://s3.us-east-2.amazonaws.com/xxx.clientsideassets", // Add this line
],
"media-src": [
"'self'",
"data:",
"blob:",
"market-assets.strapi.io",
"https://xxx.clientsideassets.s3.amazonaws.com",
"https://xxx.s3.us-east-2.amazonaws.com",
"https://s3.us-east-2.amazonaws.com/xxx.clientsideassets",
"xxx.clientsideassets.s3.us-east-2.amazonaws.com",
],
"default-src": ["'self'"],
"script-src": ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
"style-src": ["'self'", "'unsafe-inline'"],
upgradeInsecureRequests: null,
},
},
},
},
{
name: "strapi::cors",
config: {
origin: [
"http://localhost:1337", // for development
"http://18.189.28.173", // for production
"https://localhost:1337", // for development
"https://18.189.28.173", // for production
],
},
},
"strapi::poweredBy",
"strapi::logger",
"strapi::query",
"strapi::body",
"strapi::session",
"strapi::favicon",
"strapi::public",
];
Also here are s3 configurations/permissions:
Bucket Policy:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:PutObject"
],
"Resource": [
"arn:aws:s3:::xxx.clientsideassets/*",
"arn:aws:s3:::xxx.clientsideassets"
],
"Condition": {
"Bool": {
"aws:SecureTransport": "false"
}
}
},
{
"Sid": "AllowUpload",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:PutObject",
"Resource": "arn:aws:s3:::xxx.clientsideassets/*",
"Condition": {
"StringEquals": {
"s3:x-amz-acl": "upload"
}
}
}
]
}
CORS:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
And when I have opened Web Inspector ro check, why media is not getting previewed, I am seeing this status code: {blocked:csp}