Is it possible to access the files on Amazon S3 using JavaScript / HTML5. I basically plan to access these files in a PhoneGap app.
To be more specific, I mean without any server in middle i.e. making direct calls to Amazon S3. Is it possible?
Yes. You can enable CORS for your bucket so that objects can be loaded via XMLHttpRequest.
http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html
http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
When using PhoneGap/Cordova specifically, you may be able to bypass enabling CORS on the server by whitelisting the domain from within your app:
http://docs.phonegap.com/en/2.3.0/guide_whitelist_index.md.html
Answering my own question - I came up with a JavaScript S3 request signer using which I was able to sign the URL and access the files on S3 from JavaScript.
Anybody needs any details, please leave comment and would be happy to assist.
Cheers
Related
I've read through quite a few pages of documentation and other StackOverflow questions/answers but can't seem to come across anything that can help me with my scenario.
I'm hosting a public, static site in an S3 bucket. This site makes some calls to an API that I have hosted in an EC2-instance in a VPC. Because of this, my API can only be called by other instances and services in the same VPC.
But I'm not sure how to allow the S3 Bucket site access to my API.
I've tried creating VPC Endpoints and going down that route, but all that did was restrict access to my S3 site from only the instances within my VPC (which is not what I want).
I would appreciate any help with this, thank you so much.
Hopefully my question is clear.
No, S3 Static Websites are 100% client side code. So it's basically just html + css + javascript being delivered, as-is from S3. If you want to get dynamic content into your website, you need to look at calling an API accessible from your user's browser, i.e. from the internet.
AWS API Gateway with Private Integrations could be used to accept the incoming REST call and send it on to your EC2 Server in your VPC.
My preferred solution to adding dynamic data to S3 Static Websites is using API Gateway with AWS Lambda to create a serverless website. This minimises running costs, maintenance, and allows for quick deployments. See The Serverless Framework for getting up and running with this solution.
A static site doesn't run on a server. It runs entirely in the web browser of each site visitor. The computer it is running on would be the laptop of your end-user. None of your code runs in the S3 bucket. The S3 bucket simply stores the files and serves them to the end-user's browser which then runs the code. The route you are going down to attempt to give the S3 bucket access to the VPC resource is not going to work.
You will need to make your API publicly accessible in order for code running in your static site (running in web browsers, on end-user's laptops/tablets/phones/etc.) to be able to access it. You should look into something like API keys or JWT tokens to provide security for your public API.
I'm trying to understand if there currently is any way to do resumeable uploads (for example to a Google Cloud Storage bucket) from a web client. Looking at FileReader it does not look possible (for big files). Do I miss something?
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
You may want to check the Cloud Storage official documentation for resumable uploads, either for the JSON API or the XML API. You'll basically need to request a resumable session URI to Storage in a first HTTP request and actually upload the file to that URI in a second request, via jQuery's ajax method for example.
You'll see that you'll need to authenticate your request via a bearer token when requesting the resumable session URI. As explained in this SO answer:
You'll either need to have your customers use their own Google credentials (unusual, but makes sense for a third party tool for managing someone else's Google Cloud resources) or use some form of signed URL or similar feature.
I did not understand the documentation. There is a "slice" method that can be used here, but it is on the File object. See for example "Reading local files in JavaScript - HTML5 Rocks", https://www.html5rocks.com/en/tutorials/file/dndfiles/
Im just starting down my dev journey and need some advice on how to approach a simple app I'm working on. I do not have a good understanding of
modern web development.
What I am looking to achieve is to upload a video or image via a browser form / html form to Amazon S3.
Ideally, I want to leverage the AWS node.js SDK but keep my front end as basic as possible (i.e bootstrap page + html changes) I acknowledge that I could do a straight http operation but would still like to leverage the SDK for now.
I have my html,form and css created (using bootstrap), but do not understand how to connect the form to a node.js script that does the authorization/PUT?
Can I even go from the form, and pass the file to the script to be uploaded?
Thanks for any advice!!! :D
Check out the AWS documentation. They even have an example for your use case: Uploading Photos to Amazon S3 from a Browser
You can use, AWS CloudFront Signed URLs to perform the upload. The flow involved are as follows.
From the browser, you will request for a url, with an expiration time, to allow upload a file to a bucket. You can write Sign url creation using NodeJS Backend and AWS SDK as given in this example, after authenticating the user.
Using the Signed URL and AWS JavaScript SDK for S3, browser can directly upload the file to S3.
For more information about Signed URLs, check How Signed URLs Work.
I'm looking for a front-end solution for uploading files to amazon s3 (that is, not passing them through my server.
The solution I have found is
https://code.google.com/p/swfupload/
It might do the job, but it requier flash and this is the first sentence of the project description is:
SWFUpload has not been under active development for several years.
Here are my desired features, though none of them are nessesary
No plugins
Built with Amazon S3 in mind, handling buckets authentification etc.
Some way to see file upload-progress
Support from IE8+
kgu87 is correct, this article pretty much explains the entire process to upload files directly to S3 without passing them trough your own server.
You can also check out the AWS docs related to this on:
http://docs.aws.amazon.com/AmazonS3/latest/dev/UsingHTTPPOST.html
http://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPOST.html
If you're looking for an upload tool that supports HTML5 uploads directly to S3, check out Plupload
They have a great article that explains how to set it up:
https://github.com/moxiecode/plupload/wiki/Upload-to-Amazon-S3
The documentation describes a PHP service that's used to generate a policy and signature (both are required for S3 to accept your download) but you can use any language to generate those. Also, in certain use cases, you can just generate a one-time policy with a very high expiration time and hard code it into your upload form.
You could start by using this tutorial as a baseline , if you are asking about uploading from your web app -
http://aws.amazon.com/articles/1434
You could use this tool: http://aws.amazon.com/customerapps/Amazon-S3/Consumers/2069 free, and works in most browsers; doesn't require a server.
S3 Browser is a free client interface for users of the Amazon S3 service.
It provides an easy to use GUI to manage your storage buckets and allows you to:
- Browse, create, delete Amazon S3 buckets
- Upload and download files to and from Amazon S3
- Create public URLs to share the files.
- Keep your files backed up on a multiple data centers.
- Set Access Control on buckets and files.
S3 Browser is free for non-commercial use.
I'm looking to confirm or refute the following:
For what I have read so far it is not possible to write a web application with only javascript -- no server side logic -- served from Amazon S3 that also store data only to S3 if you need to have multiple clients with private data per client.
The issue I see is the Authorization header required for every Ajax call that would force me to put the signature (and my AWS id) right there in the page source for everybody to see.
Is that correct or I misunderstood the docs?
Are there workarounds?
In short, you are correct.
If your AWS key ends-up in any way on the client-side, you are in trouble.
A possible solution is, of course, to have the user specify their AWS key for storing their data.
I'm working on a project that will do something similar to this, mine will have the users use their own S3 which I will store in HTML5 localStorage. It's a bit tricky, but I've got the basics working.
It involves making an Javascript program that replicates itself into S3, gets itself from S3 and then transfers credentials and control into the S3 loaded version.
I'm using the excellent SJCL to do signature generation and jQuery's ajax functionality for the parts I can.
My work simply initializes the S3 side application and does a test PUT/GET sequence to S3. I also rewrote a JQuery postMessage plugin (which StackOverflow won't let me post for lack of rep) for communicating between my frames.
In my case, I'm trying to fit the entire application into a single HTML file so that I don't have to do as much initial transfer into S3, but perhaps there are other ways to work this out.
iBeans offers a way around this without having to write any server side code. There's an S3 iBean (a developer is working on it to be released in the next few days - watch the mulesoft blog for an announcement) and you can access it right from your javascript. The iBean itself runs on a server so you wouldn't need to store your keys in the javascript.