How to add WAF to protect an Amplify hosted website?

Question

I have a website developed by NextJS and hosted by AWS Amplify. How to integrate WAF to protect the site such as block IP originated from Singapore?

1) I have looked into CloudFront distribution (generated by Amplify hosting) and add a WAF ACL rule, but it did not work well. I block SG (Signapore) but it block from VN as well. Can't figure out why that?

2) What is the difference between WAF ACL Geo rule and CLoudFront Geo Restriction?

```
{
  "Name": "GeoRestriction",
  "Priority": 0,
  "Action": {
    "Block": {}
  },
  "VisibilityConfig": {
    "SampledRequestsEnabled": true,
    "CloudWatchMetricsEnabled": true,
    "MetricName": "GeoRestriction"
  },
  "Statement": {
    "GeoMatchStatement": {
      "CountryCodes": [
        "SG"
      ]
    }
  }
}
```

Answer

I understand you are trying to integrate WAF to protect your site. As to why the WAF ACL rule is not working as intended, there is likely a configuration issue. To troubleshoot the issue quickly, I suggest opening a case with AWS Support: https://console.aws.amazon.com/support/home#/case/create?issueType=technical
         
The difference between WAF geographic match rule statements and CloudFront geographic restrictions is that you can use the former with other AWS WAF statements to build sophisticated filtering. For example, if you wanted to allow certain traffic from certain IPs in Singapore, but deny other traffic from Singapore, the WAF rule would be useful.
                 
https://docs.aws.amazon.com/waf/latest/developerguide/waf-rule-statement-type-geo-match.html
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/georestrictions.html
                 
Considering your use case, creating a geographic restriction on CloudFront would be the most convenient solution. You can block all traffic from Singapore with 99.8% accuracy. In order to do so, please follow these steps:
                 
1. Sign in to the AWS Management Console and open the CloudFront console at https://console.aws.amazon.com/cloudfront/v3/home
2. Choose the distribution that you want to update.
3. Choose Geographic restrictions.
4. Choose Edit.
5. Select Allow list to create a list of allowed countries, or Block list to create a list of blocked countries.
6. Add the desired countries to the list, then choose Save changes.

For more on how AWS WAF works with Amazon CloudFront features: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/georestrictions.html

Answer

To enable AWS WAF for web applications hosted by AWS Amplify please refer to the following documentation - https://docs.aws.amazon.com/amplify/latest/userguide/security.html

Answer

Unfortunately, at this point in time the Amplify Console officially does not support AWS WAF integration with the generated CloudFront URL. The Amplify CloudFront URL does come with AWS Shield standard.

The Amplify service team have identified this as a known feature request. Please refer to this open GitHub issue which is pertaining to the feature request and it can be tracked here: https://github.com/aws-amplify/amplify-console/issues/36

There's a way to setup WAF for your custom domain creating a documentation but the underlying amplifyapp.com domain is still technically live, so it's security by obscurity in essence.

How to add WAF to protect an Amplify hosted website?

Relevant content