AWS Serverless Website - Article 1 Serverless Security Best Practices for React Applications

Security is the basis of the digital landscape, especially for serverless applications that handle sensitive data. This article simplifies best practices for securing your serverless React application deployed on AWS.

I'll cover authentication and authorization, managing IAM roles, implementing AWS WAF, and monitoring your infrastructure.

Here is my personal website repo.

Managing IAM Roles and Permissions

Properly managing IAM roles is crucial to maintaining the principle of least privilege. Here's an example of setting up an IAM role for Lambda with minimal permissions:

policy_statements = {
  s3_bucket = {
    effect    = "Allow",
    actions   = ["s3:ListBucket"]
    resources = [module.site_s3_bucket.s3_bucket_arn]
  }
  s3_object = {
    effect = "Allow",
    actions = [
      "s3:PutObject",
      "s3:GetObject",
    ]
    resources = ["${module.site_s3_bucket.s3_bucket_arn}/*"]
  }
}

Implementing AWS WAF

AWS WAF helps protect your web applications from common web exploits. To set it up:

Create a Web ACL

resource "aws_wafv2_web_acl" "this" {
  name        = "${var.last_name}_waf"
  description = "CloudFront WAF"
  scope       = "CLOUDFRONT"

  tags = var.tags
}

Add Rules to the Web ACL: Define rules to block SQL injection and cross-site scripting attacks.

visibility_config {
  cloudwatch_metrics_enabled = true
  metric_name                = "${var.last_name}CloudfrontWaf"
  sampled_requests_enabled   = true
}

default_action {
  allow {}
}

rule {
  name     = "AWS-AWSManagedRulesAmazonIpReputationList"
  priority = 1

  override_action {
    none {}
  }

  statement {
    managed_rule_group_statement {
      name        = "AWSManagedRulesAmazonIpReputationList"
      vendor_name = "AWS"
    }
  }

  visibility_config {
    cloudwatch_metrics_enabled = true
    metric_name                = "AWS-AWSManagedRulesAmazonIpReputationList"
    sampled_requests_enabled   = true
  }
}

rule {
  name     = "AWS-AWSManagedRulesBotControlRuleSet"
  priority = 2

  override_action {
    none {}
  }

  statement {
    managed_rule_group_statement {
      name        = "AWSManagedRulesBotControlRuleSet"
      vendor_name = "AWS"
    }
  }

  visibility_config {
    cloudwatch_metrics_enabled = true
    metric_name                = "AWS-AWSManagedRulesBotControlRuleSet"
    sampled_requests_enabled   = true
  }
}

rule {
  name     = "AWS-AWSManagedRulesCommonRuleSet"
  priority = 3

  override_action {
    none {}
  }

  statement {
    managed_rule_group_statement {
      name        = "AWSManagedRulesCommonRuleSet"
      vendor_name = "AWS"

      rule_action_override {
        name = "SizeRestrictions_BODY"
        action_to_use {
          allow {}
        }
      }

      rule_action_override {
        action_to_use {
          allow {}
        }
        name = "SizeRestrictions_QUERYSTRING"
      }
    }
  }

  visibility_config {
    cloudwatch_metrics_enabled = true
    metric_name                = "AWS-AWSManagedRulesCommonRuleSet"
    sampled_requests_enabled   = true
  }
}

Associate the Web ACL with CloudFront: Attach the Web ACL to your CloudFront distribution. It's as easy as adding this into the cloudfront.tf resource.

web_acl_id = var.web_acl_id

Monitoring with AWS CloudTrail and CloudWatch

Set up logging and monitoring to keep track of activities and detect anomalies.

• Enable CloudTrail: This service records AWS API calls and delivers log files.
• Set Up CloudWatch Alarms: Create alarms to monitor specific metrics and trigger actions when thresholds are breached.

cloudwatch_logs_retention_in_days = 3

Securing your serverless React applications involves a multi-faceted approach. By implementing AWS Cognito for authentication, managing IAM roles effectively, using AWS WAF for web protection, and setting up comprehensive monitoring with CloudTrail and CloudWatch, you can significantly enhance the security posture of your applications.

Visit my website here.