Getting 403 errors on some of the POST requests

[pbteja1998]

Describe the bug

<TITLE>ERROR: The request could not be satisfied</TITLE>

403 ERROR

The request could not be satisfied.

---

This distribution is not configured to allow the HTTP request method that was used for this request. The distribution supports only cachable requests. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

---

Generated by cloudfront (CloudFront)
Request ID: S9Bit4WZWnEar0Bo6NX7h-QbmHFUrnBF79lUp2LDYiLFoVPbw_bkTg==

I have suddenly started getting 403 error on some of the POST requests in my application.

My serverless.yml file for reference.

myNextApplication:
  component: serverless-next.js@1.14.0
  inputs:
    domain:
      - ${env.subdomain}
      - ${env.domain}
  build:
    cmd: yarn build

[danielcondemarin]

@pbteja1998 Is it an HTTP Post to a next API route? POSTs are allowed for any requests to api/* in the CloudFront distribution: https://github.com/danielcondemarin/serverless-next.js/blob/e68b558c3cd52a102c6b87d193fdb095b17f0508/packages/serverless-component/serverless.js#L301

[pbteja1998]

@danielcondemarin No, the POST request is to a backend Node Server.

[pbteja1998]

Everything was working till yesterday

[danielcondemarin]

@danielcondemarin No, the POST request is to a backend Node Server.

Where do you host this backend node server? I don't see how it has anything to do with serverless-next.js unless I'm missing something,

[pbteja1998]

@danielcondemarin No, the POST request is to a backend Node Server.

Where do you host this backend node server? I don't see how it has anything to do with serverless-next.js unless I'm missing something,

It's hosted on AWS Lightsail. I don't know if it has anything to do with Serverless-NextJS. But the error says that there is some cloud front error. Hence opened an issue. My backend has no relation with cloud front.

[jaypeng2015]

The issue is because of the cloudfront settings:
The following source code shows allowedHttpMethods: ["HEAD", "GET"] cannot be overwritten.

const cloudFrontOutputs = await cloudFront({
      defaults: {
        ttl: 0,
        ...cloudFrontDefaults,
        forward: {
          cookies: "all",
          queryString: true,
          ...cloudFrontDefaults.forward
        },
        // everything after here cant be overridden
        allowedHttpMethods: ["HEAD", "GET"],
        "lambda@edge": {
          ...defaultLambdaAtEdgeConfig,
          "origin-request": `${defaultEdgeLambdaOutputs.arn}:${defaultEdgeLambdaPublishOutputs.version}`
        },
        compress: true
      },
      origins: cloudFrontOrigins,
      ...(cloudFrontPriceClassInputs && {
        priceClass: cloudFrontPriceClassInputs
      })
    });

This is a bit frustrating because defaultEdgeLambda should also be able to handle POST requests just like handling a web form.

[dphang]

Thanks @jaypeng2015, looks like that is likely the problem. I think it can be overwritten, we just need to allow all methods. Maybe that comment is for security purpose? We also forked aws-cloudfront package so if changes need to be done there, we can update that.

@pbteja1998 Please try to change the default behavior (*) to allow all HTTP methods and see if that works (just as testing, not sure if this is completely secure yet so I wouldn't recommend you do it on your production app.):

It seems like a limitation on CloudFront, it does not allow just GET, HEAD, POST, you must allow all methods: https://docs.aws.amazon.com/cloudfront/latest/APIReference/API_AllowedMethods.html

I think the fix might be to allow all HTTP methods and then setup permissions in the S3 origin so that only GET is supported, so no one can delete S3 content. Not sure if other changes are needed in origin request handler for security reasons. I believe the bucket policy is already setup to only allow GET, so it might work to just do this.

{
    "Version": "2012-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": " Grant a CloudFront Origin Identity access to support private content",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E1L85R3YH128X4"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::nextjs-repros/*"
        }
    ]
}

@danielcondemarin are there any security concerns with just allowing all HTTP methods to be forwarded to the origin, given the above bucket policy? Do we need to explicitly disallow certain HTTP methods by adding code in the Lambda origin request handler (e.g returning a 405 response in the handler)?

[dphang]

Released in latest 1.17 alpha.15 version