Hosting a Secure Single Page Website on AWS CloudFront

Modern web applications demand speed, security, and scalability. AWS CloudFront, combined with AWS Shield Advanced, AWS WAF, and ACM (AWS Certificate Manager), provides a secure and high-performance infrastructure for hosting single-page applications (SPAs) globally.

This blog explores how to securely host an SPA on AWS CloudFront, implement Lambda@Edge functions for request processing, and leverage Infrastructure as Code (IaC) for full automation.

🌍 Architecture Overview

When a user accesses the website, the request is routed via Amazon Route 53 to AWS CloudFront, which caches content and enforces security. AWS WAF protects against web-based threats, while AWS Shield Advanced mitigates DDoS attacks. To ensure end-to-end encryption, AWS Certificate Manager (ACM) provides HTTPS/TLS certificates.

Lambda@Edge or CloudFront Functions enable custom request handling at different lifecycle stages:

• Viewer Request: Runs before CloudFront checks the cache.
• Viewer Response: Runs after CloudFront processes the request.
• Origin Request: Runs before the request is sent to the origin.
• Origin Response: Runs before CloudFront returns the response.

CloudFront routes traffic to multiple origins, such as Amazon S3 (for static assets) or Amazon EKS pods, APIs, or external services for dynamic content.

🔐 Strengthening Security with AWS WAF, Shield, and ACM

AWS WAF for Web Protection

AWS WAF acts as a first line of defense, blocking threats such as SQL injection, cross-site scripting (XSS), and bot attacks. By applying rate-limiting rules, bot mitigation, and request filtering, WAF ensures that only legitimate traffic reaches CloudFront.

AWS Shield Advanced for DDoS Protection

AWS Shield Advanced automatically detects and mitigates DDoS attacks before they impact your website. By leveraging global threat intelligence and real-time attack visibility, it ensures uptime even during large-scale attacks.

ACM for SSL/TLS Encryption

AWS Certificate Manager (ACM) enables secure HTTPS connections by provisioning TLS/SSL certificates. This eliminates manual certificate renewals, ensuring that all traffic is encrypted and trusted.

🚀 Deployment Process

To deploy a secure SPA using AWS CloudFront, follow these steps:

1. Set Up S3 Bucket for Static Content

# Using AWS CLI
aws s3 mb s3://my-spa-bucket --region us-east-1
# Upload website files
aws s3 sync ./build/ s3://my-spa-bucket/ --delete

2. Create CloudFront Distribution

Configure CloudFront to serve content from the S3 bucket with appropriate security headers.

3. Configure AWS WAF Rules

Apply WAF rules to protect against common web vulnerabilities.

4. Enable DDoS Protection

Add AWS Shield Advanced to the CloudFront distribution.

🔧 Lambda@Edge for SPA Routing

For SPAs, configure Lambda@Edge to handle client-side routing:

exports.handler = async (event) => {
  const request = event.Records[0].cf.request;
  const uri = request.uri;
  // If the request doesn't point to a file with extension or API path
  if (!uri.includes('.') && !uri.startsWith('/api')) {
    // Rewrite to index.html for SPA routing
    request.uri = '/index.html';
  }
  return request;
};

🛠️ Infrastructure as Code Example

Deploy the entire infrastructure using Terraform:

module "cdn" {
  source = "terraform-aws-modules/cloudfront/aws"
  aliases = ["app.example.com"]
  origin = {
    s3_bucket = {
      domain_name = "my-spa-bucket.s3.amazonaws.com"
    }
  }
  default_cache_behavior = {
    target_origin_id       = "s3_bucket"
    viewer_protocol_policy = "redirect-to-https"
    lambda_function_association = {
      origin-request = {
        lambda_arn   = aws_lambda_function.spa_router.qualified_arn
        include_body = false
      }
    }
  }
  viewer_certificate = {
    acm_certificate_arn = aws_acm_certificate.app.arn
    ssl_support_method  = "sni-only"
  }
}

📋 Best Practices

• Implement proper CORS configuration for API requests.
• Configure cache behaviors to optimize performance.
• Set up monitoring and alarming for security events.
• Implement CI/CD pipelines for automated deployments.
• Regularly update and audit security settings.

🎯 Conclusion

By leveraging AWS CloudFront with enhanced security features, you can create a robust, high-performance infrastructure for your SPAs. This approach provides global distribution, DDoS protection, enhanced security against web vulnerabilities, and automated TLS certificate management.

For organizations seeking to host mission-critical web applications, this infrastructure delivers the security, scalability, and performance needed in today's digital landscape.