How to Securely Display Objects from an S3 Bucket in a Browser4

Amazon S3 (Simple Storage Service) is a widely used object storage solution that allows developers to store and retrieve large amounts of data. However, serving objects from S3 directly to browsers requires careful attention to security to prevent unauthorized access and avoid exposing sensitive credentials.

This blog will cover best practices and approaches for securely displaying objects from an S3 bucket in a browser. We’ll discuss the security pitfalls to avoid and provide concrete examples to help you implement a robust solution.

Common Security Risks

Exposing AWS Keys in Client Code: Never hardcode AWS Access Key IDs or Secret Access Keys in client-side applications. These credentials provide access to your AWS account and could lead to data breaches.
Publicly Accessible Buckets: Making your bucket public is a straightforward way to serve content, but it’s also a major security risk. Public buckets can lead to unauthorized access and data leakage.
Improper Use of S3 Permissions: Misconfigured bucket policies or IAM roles can inadvertently allow broader access than intended.

Recommended Approaches for Secure Object Access

1. Use Pre-Signed URLs

A pre-signed URL allows you to grant temporary access to an S3 object without exposing your credentials or making the bucket public. Here’s how you can generate and use a pre-signed URL:

Example:

import boto3
from botocore.exceptions import NoCredentialsError

# Initialize the S3 client
s3 = boto3.client('s3')

# Generate a pre-signed URL
def generate_presigned_url(bucket_name, object_key, expiration=3600):
    try:
        url = s3.generate_presigned_url('get_object',
           Params={
              'Bucket': bucket_name,
               'Key': object_key
                },
                ExpiresIn=expiration)
        return url
    except NoCredentialsError:
        return "Error: AWS credentials not found."

bucket_name = 'my-secure-bucket'
object_key = 'images/example.jpg'
url = generate_presigned_url(bucket_name, object_key)
print(f"Pre-signed URL: {url}")

How it works:

The generated URL is valid for a limited time (e.g., 1 hour).
Only the specified object can be accessed using the URL.
You control the expiration time and permissions.

2. Leverage CloudFront Signed URLs and Policies

Amazon CloudFront, a Content Delivery Network (CDN), can be used in conjunction with S3 to deliver content securely. Signed URLs or cookies can be used to restrict access based on user credentials, location, or time.

Steps to Set Up CloudFront Signed URLs:

Configure an S3 bucket as the CloudFront origin.
Enable “Restrict Viewer Access” in CloudFront to require signed URLs.
Use AWS SDK or libraries to generate signed URLs.

Example with Python:

from boto3 import session
from botocore.signers import CloudFrontSigner
import rsa
import datetime

# Load the CloudFront private key
with open("private_key.pem", "rb") as key_file:
    private_key = rsa.PrivateKey.load_pkcs1(key_file.read())

# Signer callback function
def rsa_signer(message):
    return rsa.sign(message, private_key, 'SHA-1')

# Initialize CloudFrontSigner
key_pair_id = "YOUR_KEY_PAIR_ID"
signer = CloudFrontSigner(key_pair_id, rsa_signer)

# Generate a signed URL
def generate_signed_url(url, expiration_minutes=15):
    expiration = datetime.datetime.utcnow() + datetime.timedelta(minutes=expiration_minutes)
    signed_url = signer.generate_presigned_url(
        url=url,
        date_less_than=expiration
    )
    return signed_url

# Example usage
url = "https://example.cloudfront.net/images/example.jpg"
signed_url = generate_signed_url(url)
print(f"CloudFront Signed URL: {signed_url}")

Benefits:

Enhanced security with stricter controls.
Faster delivery with CloudFront’s caching capabilities.

3. Use an API Gateway and Lambda Proxy

For dynamic content or complex access control, an API Gateway with a Lambda function can act as a middle layer between the client and S3. This approach enables you to enforce custom authentication and authorization logic.

Steps:

Create an API Gateway endpoint.
Write a Lambda function to validate user requests and generate pre-signed URLs.
Configure S3 permissions to allow access only through the Lambda’s IAM role.

Example Lambda Function:

import json
import boto3

s3 = boto3.client('s3')

def lambda_handler(event, context):
    bucket_name = 'my-secure-bucket'
    object_key = event['queryStringParameters']['object_key']

    try:
        # Validate user authentication here (e.g., using Cognito or JWT)

        # Generate pre-signed URL
        presigned_url = s3.generate_presigned_url('get_object',
         Params={
         'Bucket': bucket_name,
         'Key': object_key
          },
         ExpiresIn=3600)
        return {
            'statusCode': 200,
            'body': json.dumps({'url': presigned_url})
        }
    except Exception as e:
        return {
            'statusCode': 500,
            'body': json.dumps({'error': str(e)})
        }

4. Integrate Cognito for Fine-Grained Access Control

Amazon Cognito can be used to authenticate users and generate temporary AWS credentials for accessing S3 objects. This allows you to manage user permissions and ensure secure access.