Upload a File to S3 From Browser Application

Upload files Securely to AWS S3 Directly from Browser

Efficient file upload pattern for Spider web/Mobile Apps

Uploading files to AWS S3 straight from the browser improves the performance and provides less overhead for your servers. However, this can be challenging to implement securely for a person who is new to AWS.

This article discusses two approaches to implement uploading files directly to AWS S3 individual bucket from browser, using AWS IAM Temporary Admission Credentials and using a pre-signed POST policy.

Using Temporary Access Credentials

Get temporary admission credentials to support uploading to S3 directly using JavaScript SDK from the browser.

In AWS Lambda

Using AWS SDK for STS, presume an IAM Office that has access to S3. Information technology returns a set of temporary security credentials (an access primal ID, a secret admission key, and a security token) that needs to return to the browser.

                      var            params = {            
            RoleArn: 'STRING_VALUE',            /* required */            
            RoleSessionName: 'STRING_VALUE',            /* required */            
            DurationSeconds: 0,            
            ExternalId: 'STRING_VALUE',            
            Policy: 'STRING_VALUE',            
            SerialNumber: 'STRING_VALUE',            
            TokenCode: 'STRING_VALUE'            
};                    sts.assumeRole(params,            function(err, data) {            
            if            (err)            
            console.log(err, err.stack);            // an error occurred            
            else            
            panel.log(data);            // successful response            
});        

Note: Normally, this code should execute later on hallmark and authority (checking whether the user should be allowed to upload to the S3 bucket). Ane of the better places to practise this is using an AWS Lambda Custom Authorizer and configure information technology to the API Gateway.

AWS API Gateway

It will provide an endpoint (e.k./api/getTokens) for the browser to request temporary access credentials (e.g., Credentials are shown below).

                      {
              Credentials: {              
              AccessKeyId: "AKIAEXAMPLE",              
              Expiration: <Date Representation>,              
              SecretAccessKey: "wJalrXUtnFE",
              SessionToken: "AQoDYXdz==" }
              }
}                  

AWS IAM Roles & Policies

AWS IAM is used in two places.

• The Office is assumed by AWS temporary access credentials (Office refer in Lambda code). It needs to be a policy that grants admission to S3.
• The Office attached to the AWS Lambda granting to presume the above. Information technology needs to be a policy that grants access to IAM to presume a office. Also, brand certain Lambda has the trust relationship set properly.

At Browser Using AWS S3 SDK

After receiving the temporary access credentials from the assumeRole method in the data callback, y'all can instantiate a credentials object every bit shown below in JavaScript.

          AWS.config.credentials =            new            AWS.Credentials(accessKeyId, secretAccessKey, sessionToken); // Keys returned from STS                      var            params = {            
            Torso: <Binary Cord>,
            Bucket: "examplebucket",
            Key: "exampleobject",
            ServerSideEncryption: "AES256",
            Tagging: "key1=value1&key2=value2"
};            
s3.putObject(params, office(err, information) {            
            if (err)            
            console.log(err, err.stack); // an error occurred            
            else            
            console.log(data);           // successful response    /*            
            information = {
            ETag: "\"6805f2cfc46c0f04559748bb039d69ae\"",
            ServerSideEncryption: "AES256",
            VersionId: "Ri.vC6qVlA4dEnjgRV4ZHsHoFIjqEMNt"
            };
});        

Overall, this approach provides a unproblematic fashion of granting access to individual S3 buckets with improved performance, less overhead to backend servers.

What about uploading files from a Server? To upload files from a server, yous can use AWS IAM roles or IAM user permissions depending on the server location which uploads the files.

For instance, if the code runs inside AWS in compute services such as EC2, Lambda can use IAM roles. For servers exterior AWS, information technology must use IAM user'southward programmatic admission credentials to upload files to S3. In addition, y'all can utilize AWS Storage Gateway Stored/Buried Volumes or third-party solutions such equally AWS S3 Sync to synchronize files with AWS S3 efficiently for frequently changing files.

Using a Pre-Signed POST Policy

Get a pre-signed POST policy to support uploading to S3 straight from an HTML form from the browser.

In AWS Lambda

Using AWS SDK for S3, create a pre-signed POST Policy and return this to the browser.

                      var            params = {            
            Bucket: 'saucepan',            
            Fields: { fundamental: 'primal' }            
};                    s3.createPresignedPost(params,            function(err, data) {            
            if            (err) {            
            console.error('Presigning post data encountered an error', err); }            
            else            {            
            panel.log('The mail information is', data);            
            }            
});        

Note: Here also essential to handle authentication and authorization before returning a pre-signed POST Policy.

AWS API Gateway

API endpoint volition render a Base64-encoded version of this POST policy. Yous can use this value every bit your StringToSign in signature calculation.

At Browser using a HTML Grade

The browser decodes the Base64-encoded policy using atob('xxxbased64encoded') and will render the policy JSON as follows.

          { "expiration": "2015–12–30T12:00:00.000Z",
            "weather condition": [
            {"saucepan": "sigv4examplebucket"},
            ["starts-with", "$key", "user/user1/"],
            {"acl": "public-read"},
            {"success_action_redirect":  "http://sigv4examplebucket.s3.amazonaws.com/successful_upload.html"
            },
            ["starts-with", "$Content-Blazon", "image/"],
            {"ten-amz-meta-uuid": "14365123651274"},
            {"x-amz-server-side-encryption": "AES256"},
            ["starts-with", "$x-amz-meta-tag", ""],
            {"ten-amz-credential": "AKIAIOSFODNN7EXAMPLE/20151229/us-due east-1/s3/aws4_request"},
            {"ten-amz-algorithm": "AWS4-HMAC-SHA256"},
            {"x-amz-date": "20151229T000000Z" }
            ]
}        

Yous can use these values to generate an HTML form with Submit button to upload an image.

          <html>            
            <head>            
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-eight" />            
            </caput>
            <trunk>
            <form activeness="http://sigv4examplebucket.s3.amazonaws.com/" method="mail service" enctype="multipart/form-data">            
            Cardinal to upload:            
            <input type="input" proper name="key" value="user/user1/${filename}" />
            <br />            
            <input type="subconscious" name="acl" value="public-read" />
            <input type="hidden" name="success_action_redirect" value="http://sigv4examplebucket.s3.amazonaws.com/successful_upload.html" />            
            Content-Type:            
            <input type="input" name="Content-Blazon" value="prototype/jpeg" />
            <br />            
            <input type="subconscious" name="x-amz-meta-uuid" value="14365123651274" />            
            <input type="hidden" proper noun="x-amz-server-side-encryption" value="AES256" />            
            <input type="text" proper noun="X-Amz-Credential" value="AKIAIOSFODNN7EXAMPLE/20151229/u.s.a.-due east-1/s3/aws4_request" />            
            <input blazon="text" name="X-Amz-Algorithm" value="AWS4-HMAC-SHA256" />            
            <input type="text" name="X-Amz-Date" value="20151229T000000Z" /> Tags for File: <input type="input" name="x-amz-meta-tag" value="" />            
            <br />            
            <input type="hidden" name="Policy" value='<Base64-encoded policy string>' />            
            <input type="hidden" name="X-Amz-Signature" value="<signature-value>" />            
            File:            
            <input type="file"   name="file" />
            <br />     <!-- The elements after this will be ignored -->            
            <input type="submit" name="submit" value="Upload to Amazon S3" />            
            </form>            
            </body>
</html>        

References

For more details, go through the post-obit references.

• Examples: Browser-Based Upload using HTTP Post (Using AWS Signature Version 4).
• AWS JavaScript SDK AWS STS AssumeRole.
• AWS JavaScript SDK AWS S3 CreatePresignedPost.
• AWS JavaScript SDK AWS S3 PutObject
• Creating a POST Policy
• Creating an HTML Form (Using AWS Signature Version 4)

Learn More than

pollardforutived.blogspot.com

Source: https://enlear.academy/upload-files-to-aws-s3-using-signed-urls-fa0a0cf489db

Share this post