Amazon S3 is a highly scalable and secure object storage service that allows you to store and retrieve any amount of data from anywhere on the web. Sometimes, you might want to restrict file uploads to your S3 bucket to only come from a specific website. This can be done using AWS Identity and Access Management (IAM) policies and S3 bucket policies. In this blog post, we’ll walk you through the steps to achieve this.
Step 1: Create an S3 Bucket
- Log in to the AWS Management Console and navigate to the S3 service.
- Create a new bucket by clicking the “Create bucket” button.
- Name your bucket and choose a region. Ensure that the bucket name is globally unique.
- Configure options as needed, then click “Create bucket.”
Step 2: Set Up Bucket Policy
To restrict uploads to a specific website, you need to set up a bucket policy that allows uploads only from the specified referrer.
- Navigate to your S3 bucket in the S3 console.
- Click on the “Permissions” tab and then select “Bucket Policy.”
- Add the following policy, replacing YOUR_BUCKET_NAME with your bucket’s name and YOUR_WEBSITE_URL with your website’s URL:
{
“Version”: “2012-10-17”,
“Statement”: [
{
“Effect”: “Allow”,
“Principal”: “*”,
“Action”: “s3:PutObject”,
“Resource”: “arn:aws:s3:::YOUR_BUCKET_NAME/*”,
“Condition”: {
“StringLike”: {
“aws:Referer”: “YOUR_WEBSITE_URL/*”
}
}
}
]
}
This policy allows the s3:PutObject action (file uploads) only if the Referer header in the HTTP request matches your website’s URL.
Step 3: Configure CORS (Cross-Origin Resource Sharing)
To enable your website to interact with the S3 bucket, you need to configure CORS.
- In the S3 console, go to your bucket.
- Click on the “Permissions” tab and select “CORS configuration.”
- Add the following CORS configuration, replacing YOUR_WEBSITE_URL with your website’s URL:
YOUR_WEBSITE_URL
PUT
POST
GET
This configuration allows PUT, POST, and GET requests from your website.
Step 4: Implement the Upload Functionality on Your Website
To upload files to your S3 bucket from your website, you need to implement the client-side logic using JavaScript. Here’s an example using the AWS SDK for JavaScript:
- Include the AWS SDK in your website:
- Initialize the S3 client and configure it with the necessary credentials:
AWS.config.update({
region: ‘YOUR_AWS_REGION’,
credentials: new AWS.CognitoIdentityCredentials({
IdentityPoolId: ‘YOUR_COGNITO_IDENTITY_POOL_ID’
})
});
var s3 = new AWS.S3({
apiVersion: ‘2006-03-01’,
params: { Bucket: ‘YOUR_BUCKET_NAME’ }
});
- Create the upload function:
function uploadFile(file) {
var params = {
Key: file.name,
Body: file,
ACL: ‘public-read’
};
s3.upload(params, function(err, data) {
if (err) {
console.log(‘Error’, err);
} else {
console.log(‘Upload Success’, data.Location);
}
});
}
document.getElementById(‘file-upload’).addEventListener(‘change’, function(event) {
var file = event.target.files[0];
if (file) {
uploadFile(file);
}
});
Conclusion
By following these steps, you can securely allow file uploads to your S3 bucket from a specific website. This setup ensures that only requests originating from your website can upload files, enhancing the security of your S3 bucket.