Complete Guide: Amazon S3 Remote Storage Configuration & BBCode Usage
This document provides a step-by-step walkthrough for configuring Amazon S3 for website remote storage and explains how to use BBCode to display or link to these files.
Part 1: Administrative Configuration (The Backend)
To enable remote storage, you must configure two layers of security: IAM (for the website server backend) and S3 Bucket Policies (for public visitor read access).
1. IAM User Setup (For Website Backend File Upload & Management)
Your forum/website requires valid Access Secret Keys to upload, overwrite, list and delete files inside your bucket.
- Navigate to AWS Console → IAM → Users → Create User
- User name: Enter a recognizable name (e.g. forum-s3-storage)
- Access Key Type: Select Access key - Programmatic access (Application running outside AWS)
- Permissions option: Attach inline custom policy (Do NOT use broad managed policies for security)
- Copy & paste the below JSON inline policy. Remember replace YOUR_BUCKET_NAME with your real bucket name.
JSON:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:PutObjectAcl",
"s3:GetObject",
"s3:DeleteObject",
"s3:ListBucket"
],
"Resource": [
"arn:aws:s3:::YOUR_BUCKET_NAME",
"arn:aws:s3:::YOUR_BUCKET_NAME/*"
]
}
]
}
- After user creation: Download the CSV file containing Access Key ID and Secret Access Key.
- Important: The Secret Access Key only shows once. Save it securely; you cannot recover it later if lost.
2. S3 Bucket Permissions (For Public Visitor Viewing)
If you want embedded images visible inside forum posts via BBCode, visitors need public read permission to objects.
- Go to S3 Console → Open your target bucket → Permissions tab
- Block all public access → Edit → Disable ALL four public access block checkboxes
- Save changes (You will see a public access warning; this is expected for public file hosting)
Bucket Policy JSON (Allow public read on all objects):
JSON:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
}
]
}
CORS Configuration (Prevent broken images / browser cross-origin errors):
Open Bucket → Permissions → Cross-origin resource sharing (CORS) → Edit, paste below:
JSON:
[
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["GET", "HEAD"],
"AllowedOrigins": ["*"],
"ExposeHeaders": []
}
]
Part 2: User Guide (How to use BBCode)
Once backend storage integration finished, users can embed S3-hosted files directly into forum posts with standard BBCode tags.
1. Understand Standard S3 Object URL Structure
Default regional S3 direct download/view link format:
Example:https://[BUCKET_NAME].s3.[REGION].amazonaws.com/[FILE_PATH/FILENAME]
2. Common BBCode Usage Examples
A. Embed display image (Direct image rendering)
Syntax:
Code:
[img]YOUR_S3_FILE_URL[/img]
Code:
[img]https://my-bucket.s3.us-east-1.amazonaws.com/nature.png[/img]
B. Create text download link (PDF, ZIP, archives, documents)
Syntax:
Code:
[url=YOUR_S3_FILE_URL]Custom Link Text[/url]
Code:
[url=https://my-bucket.s3.us-east-1.amazonaws.com/manual.pdf]Download User Manual[/url]
C. Clickable thumbnail image (Image button linking to target page)
Syntax:
Code:
[url=TARGET_WEBSITE_URL][img]S3_IMAGE_URL[/img][/url]
Code:
[url=https://google.com][img]https://my-bucket.s3.us-east-1.amazonaws.com/button.jpg[/img]
Part 3: Troubleshooting Table
| Issue Symptom | Root Cause | Solution |
|---|---|---|
| 403 Forbidden / Access Denied | 1. Block all public access still enabled 2. Bucket Policy missing or syntax error 3. Wrong bucket ARN inside policy | Turn off all four public access blocks. Double check Bucket Policy JSON syntax, confirm bucket name matches ARN. |
| Website cannot upload files to S3 | IAM user missing required s3 | Verify inline IAM policy, ensure resource entry contains /* for all objects inside bucket. |
| Invalid Resource Error (AWS Console) | Typo inside bucket ARN, mismatched bucket name | Copy bucket name exactly; no extra spaces or uppercase characters (S3 bucket names are lowercase only) |
| Broken image placeholder icon in posts | 1. Incorrect file URL 2. Missing CORS rule 3. File does not exist on S3 4. Wrong file extension | Confirm full HTTPS URL, verify file exists in bucket, apply correct CORS configuration, check filename spelling. |
| Images load when opening directly but fail inside forum | Cross Origin (CORS) restriction blocking browser embedding | Re-save bucket CORS configuration and clear browser cache. |
Part 4: Administrator Final Checklist
IAM User created with Programmatic Access Keys
IAM Inline Policy includes all required S3 actions and correct bucket ARN
S3 Bucket: All "Block public access" switches disabled
Valid Bucket Policy applied for public s3:GetObject access
CORS rule saved inside bucket permissions
Forum backend settings filled correctly: Access Key, Secret Key, Bucket Name, AWS Region
Test upload a sample file and verify BBCode renders image normally
Distribute BBCode instructions to forum members
- Do NOT share your IAM Secret Access Key publicly inside posts or forums.
- Public bucket setup means anyone can download your uploaded files. Do not store sensitive/private data.
- If you only need private storage, keep Block Public Access enabled and remove public bucket policy.
- Consider enabling S3 Object Logging to track file access for audit purposes.
- Avoid ["*"] allowed origins in CORS for production sites handling confidential content.