Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Create nice directory listings for s3 buckets with javascript and HTML.
JavaScript HTML
branch: gh-pages

Merge pull request #36 from inks007/inks007-patch-1

Update list.js to convert "%2F" to "/" in prefix mode - fixes #25
latest commit 5c50d71810
@rgrp authored

README.md

Create nice directory listings for s3 buckets using only javascript and HTML.

The listing can be deployed on any site and can also be deployed into a bucket.

Inspiration from http://aws.amazon.com/code/Amazon-S3/1713

Live Demo

If you want to see an example of this script in action check out:

http://data.openspending.org/

Usage

Copy these 3 lines into the HTML file where you want the listing to show up:

<div id="listing"></div>

<!-- add jquery - if you already have it just ignore this line -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<!-- the JS to the do the listing -->
<script src="https://rgrp.github.io/s3-bucket-listing/list.js"></script>

We've provided an example index.html file you can just copy if you want.

Tips for S3 buckets

  • You probably want to put this in an index.html in the root of your s3 bucket
  • You can use your S3 bucket in website mode, or non website mode.

Tips for normal websites

  • Copy the code into whatever file you want to act as your listing page.
  • You will need to set the bucket to list - see below
  • You probably want to turn off URL-based navigation.

Turning off URL based navigation

By default the scripts attempts to use the URL path (/xyz/abc/) to do directory style navigation. You may not want this (e.g. if deploying to a website page).

To disable set the following javascript variable:

S3BL_IGNORE_PATH = true;

This will then use the ?prefix= mode.

Configuring the Bucket to List

By default, the script will attempt to guess the bucket based on the url you are trying to access. However, you can configure it to point at any s3 bucket by setting the BUCKET_URL javascript variable, e.g.:

var BUCKET_URL = 'https://s3-eu-west-1.amazonaws.com/data.openspending.org/';

S3 Website buckets in website mode

You cannot use HTTPS mode (Amazon S3 doesn't support this).

For s3 buckets in website mode and URL based navigation, you have to set your index document AND your error document to index.html. If you do not do this, your browser will expect an index.html in every subfolder.

For S3 buckets configured in website mode the standard approach will not work because a GET request on the bucket root returns the site index page rather than the object listing in JSON form.

Thus, you have to set the BUCKET_URL variable to be the S3 bucket endpoint which differs from the website S3 bucket endpoint. For more details see:

http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteEndpoints.html#WebsiteRestEndpointDiff

A specific example for the EU west region:

Note that US east region is different in that the S3 bucket endpoint does not include a location spec but the website version does:

S3 buckets in non-website mode

You can use https mode for this (see below).

You HAVE to turn off URL-based navigation (see above). You MUST link to http://example-bucket.s3.amazonaws.com/index.html (or https)

S3 website bucket permissions

You must setup the S3 website bucket to allow public read access.

  • Grant Everyone the List and View permissions: List & View permissions
    • Alternatively you can assign the following bucket policy if policies are your thing:
{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{your-bucket-name}/*"
        }
    ]
}
  • Assign the following CORS policy
<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

S3 Bucket https only permissions (ie. deny http access)

This is only possible in non-website mode with URL-navigation off.

Set the following bucket policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "HTTPSOnly",
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::{your-bucket-name}/*",
            "Condition": {
                "Bool": {
                    "aws:SecureTransport": false
                }
            }
        },
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{your-bucket-name}/*"
        },
        {
            "Sid": "AllowPublicList",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::{your-bucket-name}"
        }
    ]
}

To stop browser warnings about displaying insecure content in secure mode, host the following 3 files in your bucket: list.js http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js http://assets.okfn.org/images/icons/ajaxload-circle.gif

Edit index.html to point to your bucket's jquery.min.js & list.js file (using relative paths) Edit list.js to point to your bucket's ajaxload-circle.gif

You will now be in full https, and be utilising amazonaws' wildcard SSL (albeit using SHA1).

Copyright and License

Copyright 2012-2013 Rufus Pollock.

Licensed under the MIT license:

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Something went wrong with that request. Please try again.