Single HTML file to browse AWS S3 buckets
- Just download
index.html
and put at root level of S3 bucket.- Adjust config within
index.html
if needed.title
- stringsubtitle
- stringlogo
- locationfavicon
- locationkeyExcludePatterns
- array of regexpageSize
- number
- Adjust config within
⚠️ Ensure following Bucket Permissions- Go to
https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissions
- Grant public read permission by
Access Control List
orBucket Policy
- Access Control List
- Enable
List objects
forEveryone
- Enable
- Bucket Policy
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicRead", "Principal": "*", "Effect": "Allow", "Action": [ "s3:ListBucket", "s3:GetObject" ], "Resource": [ "arn:aws:s3:::<YOUR BUCKET NAME>", "arn:aws:s3:::<YOUR BUCKET NAME>/*" ] } ] }
- Access Control List
- Go to
- Open
<YOUR BUCKET URL>/index.html
in your browser.
⚠️ Ensure following Bucket Permissions- Go to
https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissions
- Grant public read permission by
Access Control List
orBucket Policy
- see Self-Hosted
- Grant Cross Origin Access by
CORS Configuration
<!-- Sample policy --> <CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>
- Go to
- Open hosted
index.html
in your browser and passing bucket parameter<INDEX_FILE_LOCATION>?bucket=<S3_BUCKET_URL>
- e.g.
https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.eu-west-1.amazonaws.com/data.openspending.org
If you use CloudFront in upfront of your S3 bucket ensure following CloudFront settings.
- Allowed/Cached HTTP Methods:
GET
,HEAD
,OPTIONS
- Cached Based on Selected Headers:
Whitelist
Access-Control-Request-Headers
Access-Control-Request-Methods
Origin
- Query String Forwarding and Caching:
Forward all