Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

AWS S3 Bucket Browser Sparkline

-

Single HTML file to browse AWS S3 buckets

Demo

Installation

Self-Hosted

  • Just download index.html and upload it to your bucket.
    • Adjust config within index.html if needed, e.g.
      const config = {
        title: 'Bucket Browser',
        subtitle: 'made with ♥ by qoomon',
        logo: 'https://qoomon.github.io/aws-s3-bucket-browser/logo.png',
        favicon: 'https://qoomon.github.io/aws-s3-bucket-browser/favicon.ico',
        primaryColor: '#167df0',
        
        bucketUrl: undefined,
        // If bucketUrl is undefined, this script tries to determine bucket Rest API URL from this file location itself.
        //   This will only work for locations like these
        //   * https://s3.BUCKET-REGION.amazonaws.com/BUCKET-NAME/index.html
        //   * http://BUCKET-NAME.s3-website-BUCKET-REGION.amazonaws.com/index.html
        //   * https://storage.googleapis.com/BUCKET-NAME/index.html
        // If bucketUrl is set manually, ensure this is the bucket Rest API URL, e.g.
        //   * https://s3.BUCKET-REGION.amazonaws.com/BUCKET-NAME
        //   * https://storage.googleapis.com/BUCKET-NAME
        //   The URL should return an XML document with <ListBucketResult> as root element.
        rootPrefix: undefined, // e.g. 'subfolder/'
        keyExcludePatterns: [/^index\.html$/],
        pageSize: 50,
        
        bucketMaskUrl: undefined, 
        // If bucketMaskUrl is set file urls will be changed from ${bucketUrl}/${file} to ${bucketMaskUrl}/${file}
        //   bucketMaskUrl: 'https://example.org'
        //     => https://example.org/foo/bar.txt 
        //   bucketMaskUrl: document.location.origin
        //     => ${document.location.origin}/foo/bar.txt 
        
        defaultOrder: 'name-asc' // (name|size|dateModified)-(asc|desc)
      }
  • ⚠️ 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
    • Grant Cross Origin Access by CORS Configuration
      [
      {
          "AllowedHeaders": [
              "*"
          ],
          "AllowedMethods": [
              "GET"
          ],
          "AllowedOrigins": [
              "http://www.example.com"
          ],
          "ExposeHeaders": [
              "x-amz-server-side-encryption",
              "x-amz-request-id",
              "x-amz-id-2"
          ],
          "MaxAgeSeconds": 3000
      }
      ]
  • Open hosted index.html in your browser and provide bucket url as bucket request parameter

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