Amazon S3 javascript and css files 403 - javascript

I have some javascript and css files linked in head tag of my page. All the page content (index.html page and javascript and css files) is located in a bucket. When I launch index.html page, I get 403 errors on all those javascript and css files:
Failed to load resource: the server responded with a status of 403 (Forbidden)
This must be some setting on amazon S3 which prevent these files from accessing?
Can you help me resolve this?

You need to check if your files are configured as public:
Or grant permissions using a Bucket policy:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
}
]
}

Related

Loading project file on AWS S3 giving error 403: Forbidden

I have uploaded to AWS basic app where I am loading few assets. For some reason these models are throwing this error:
Error: fetch for “https:…/model1.glb” responded with 403: Forbidden
I have uploaded few test apps to AWS before without any issues. Bucket policy is setup and permissions are all public.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:PutObject",
"s3:PutObjectAcl"
],
"Resource": "arn:aws:s3:::ts1/*"
}
]
}
Edit: the app was built with Vite and I am hosting dist folder
In my case the solution was putting the file into public folder. I am loading the asset now from this path './assets/models/plant1.glb'. For whatever reason that was the whole issue, works now on AWS and Firebase hosting.

Security error in firefox ext while fetching a file

While fetching a files contents with the following code in a background.js file:
function readFile(filename) {
let response = fetch(`file:///${filename}`);
console.log(response);
}
I get the following error:
Security Error: Content at moz-extension://86d386b7-2904-441f-8dbe-47f0af9b6bfb/_generated_background_page.html may not load or link to file:///C:/Users/rando/Downloads/jest-26.6.1.zip.
TypeError: NetworkError when attempting to fetch resource.
My manifest file looks like this:
"permissions": [
"webNavigation",
"webRequest",
"webRequestBlocking",
"cookies",
"tabs",
"http://*/*",
"https://*/*",
"ws://*/*",
"wss://*/*",
"storage",
"downloads",
"sessions",
"file://*/*"
],
"background": {
"scripts": [
"app/scripts/background.js"
],
"persistent": true
},
How do I solve this error and fetch the contents of the file using the background.js file?
Extension access to local file system file:/// has been blocked since Firefox 57 for security reasons.
Extensions can use the input type="file" to launch the file picker on user-click.
Extensions also can:
read files that are packed within the extension
communicate with a software on the local computer via Native messaging
get files via HTTP/s, if the localhost has a server running

CORS ORIGIN Error in React App that uses S3

I've been working on a project that client should upload a file into a Cloud Storage with AWS.
My app was written with ReactJS and I decided to upload the file directly from client side to Cloud Storage. I've built the app and deployed it to server. (Here is the link raymon-tech.ir)
But It returns
Access to XMLHttpRequest at
'https://kamal-archive.s3.ir-thr-at1.arvanstorage.com/aaa.js?uploads'
from origin 'https://raymon-tech.ir' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: It
does not have HTTP ok status.
error.
If I disable CORS of my browser, it works fine.
UPDATE:
I use S3 Browser for config the Bucket Policy and CORS Configuration.
Here's my configs:
CORS Configuration:
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedOrigin>*</AllowedOrigin>
<AllowedHeader>*</AllowedHeader>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>ETag</ExposeHeader>
<ExposeHeader>Accept-Ranges</ExposeHeader>
<ExposeHeader>Content-Encoding</ExposeHeader>
<ExposeHeader>Content-Length</ExposeHeader>
<ExposeHeader>Content-Range</ExposeHeader>
</CORSRule>
</CORSConfiguration>
and
Bucket Policy:
{
"Version": "2008-10-17",
"Id": "S3PolicyId1",
"Statement": [
{
"Sid": "IPAllow",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetBucketCORS",
"Resource": "arn:aws:s3:::raysa/*"
}
]
}
I changed them recently but nothing happend.
If you need to upload files directly from your front-end app to S3 bucket, please make sure you add those to the bucket's CORS policy:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"POST",
"PUT",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"ETag",
"Accept-Ranges",
"Content-Encoding",
"Content-Length ",
"Content-Range"
],
"MaxAgeSeconds": 3000
}
]

FirebaseAuth requests blocked by cors policy in js app

I know that similar questions exist, but I didn't find a solution for me.
I have a built-in Flutter web app that is compiled into javascript. I had it hosted on Firebase Hosting. The in-app first screen is the login page which uses FirebaseAuth for logging. Whenever the first time website is open - all internal library requests have status failed. When after that I press CTRL+F5 everything works smoothly.
Here is a comparison of the same first internal request. On left is successful one, on right one which fails due to "** has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'."
I found out about the configuration of headers for Firebase Hosting, so I did it:
{
"hosting": {
"public": "",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [ {
"source": "**",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
},
{
"key": "Access-Control-Allow-Methods",
"value": "DELETE, POST, GET, OPTIONS"
},
{
"key": "Access-Control-Allow-Headers",
"value": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}
]
}]
}
}
In app there is a simple initialization of a firebase in didChangeDependencies with required data. Then FirebaseAuth.instance.signInWithEmailAndPassword(...) On index.html section about firebase:
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-firestore.js"></script>
<script src="main.dart.js" type="application/javascript"></script>
I have tested it in Chrome many times and always failed. Only on localhost runs smoothly
More info:
requests on "normal" (without clearing cache) return to page:
requests after CTRL+F5 on the same site:
Those blurred on red are the URL of my app
The cause of this issue was from the service worker blocking Firebase Auth calls on web. This has been fixed as mentioned on this GitHub issue thread. Updating to the latest version of firebase_auth plugin should fix the issue.

Publishing Amazon AWS credentials for account with 1 permission

I have an piece of code I want to live on a static website but I want it to pull the latest version of a file in an Amazon AWS S3 bucket to display a link for download. I'm not requiring the user to authenticate in any way with my site.
The API I'm using (aws-sdk for javascript) requires credentials to perform any operation, even on a public bucket. My plan for listing the files is to create an IAM user that can only access a subfolder in this bucket through the following policy to do what I need:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowListingOfDLFolder",
"Action": "s3:ListBucket",
"Effect": "Allow",
"Resource": [
"arn:aws:s3:::cobstatic.com"
],
"Condition": {
"StringLike": {
"s3:prefix": [
"dl/*"
]
}
}
}
]
}
Is this secure? Is there a better solution?

Categories

Resources