legege / aws-s3-bucket-browser

Single page application to browse AWS S3 bucket content

AWS S3 Bucket Browser

Single HTML file to browse AWS S3 buckets

Demo

Installation

Self-Hosted

• Just download index.html and put at root level of S3 bucket.
  • Adjust config within index.html if needed.
    • title - string
    • subtitle - string
    • logo - location
    • favicon - location
    • keyExcludePatterns - array of regex
    • pageSize - number
• ⚠️ 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 or Bucket Policy
    • Access Control List
      • Enable List objects for Everyone
    • 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>/*"
                  ]
              }
          ]
      }

• Open <YOUR BUCKET URL>/index.html in your browser.

Hosted

• ⚠️ 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 or Bucket 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>

• 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

CloudFront Setup

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