How to load a website via s3 with pre-signed URL - amazon-web-services

Question

I would like to block public access to my webapp served via S3 and only allow pre-signed URL to load the website. To do this I have allowed static site hosting in S3, and allowed public read to all objects. This allowed me to load the website public. Then I added a policy to deny access to index.html:
{
"Version": "2008-10-17",
"Id": "PolicyForPublicWebsiteContent",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::web-portal/*"
},
{
"Sid": "PrivateReadGetObject",
"Effect": "Deny",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::web-portal/index.html"
}
]
}
Thereafter I generated a pre-signed URL to the index.html page via using the sdk.
const url = s3.getSignedUrl('getObject', {
Bucket: 'web-portal',
Key: 'index.html',
Expires: signedUrlExpireSeconds
})
However, I get access denied when I try to access the URL provided via the SDK.
I assume this happens as I added the deny policy to index.html. I would be much obliged to know what is the proper way to implement such a feature with aws s3.

Answer 1

This was resolved by only adding the policy to allow other files (js, css) to be accessed publicly, and not adding any policy (Allow/Deny) to the index.html.
For me all my other files we located under the folder called static. Therefore I added a policy to allow public access to this folder.
{
"Version": "2008-10-17",
"Id": "PolicyForPublicWebsiteContent",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::web-portal/static/*"
}
]
}
After adding the above policy you cannot access the index.html page via browser. However you can access the index.html if you have a pre-signed URL. As the other required files are in public domain, the index.html was able to load the rest.
I pressume the same can be done if we can gzip the entier website. Thus all files will reside in one single zip folder. Then provide a pre-signed url to that file. In this way we do not have to enter any bucket policies for other non index files.