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
If you want to see an example of this script in action check out:
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.
- 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.
- 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.
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.
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/';
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:
- Website endpoint: http://example-bucket.s3-website-eu-west-1.amazonaws.com/
- S3 bucket endpoint (for RESTful calls): http://example-bucket.s3-eu-west-1.amazonaws.com/
Note that US east region is different in that the S3 bucket endpoint does not include a location spec but the website version does:
- Website endpoint: http://example-bucket.s3-website-us-east-1.amazonaws.com/
- S3 bucket endpoint (for RESTful calls): http://example-bucket.s3.amazonaws.com/
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)
You must setup the S3 website bucket to allow public read access.
- Grant
EveryonetheListandViewpermissions: - 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>
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 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.