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"
      ]
    }
  }
}
```

Ibrahim Cesar · 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.

Slava · 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

How to add WAF to protect an Amplify hosted website?

Relevant content