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.
