Angular redirects to 403 when accessing the portal through a component URL-CodePudding

I am new to aws and angular. The portal is hosted on aws cloudfront and s3 bucket. The url for the root page works fine, but when I try to access the portal from a different url(of a particular component) it redirects to the forbidden 403 page.

Scenario: User gets redirected to add some details on a different page which is a third party application. When that application redirects to the success page, the portal gets redirected to 403 page.

It is hosted on cloudfront and s3, where the bucket policy is set to block public access. Can it be because of that? How to get around this issue, if we need to keep the policy private?

Thanks for your time.

CodePudding user response：

You can do it in two ways:

Option 1 - via S3 bucket static web hosting configuration Just add routing rules as described by @Allan Chua

Option 2 - via cloudfront distribution config Just add custom Error pages:

Error code: 403, Response page path: index.html, Response code: 200
Error code: 404, Response page path: index.html, Response code: 200

Option 1 is fine if webpage can be accessed via cloudfront and S3 URL If you want to restrict access to cloudfront URL only, use option 2 (with Origin access identity to allow cloudfront to access S3 bucket)

CodePudding user response：

You will need to implement a redirect rule either in the CloudFront or S3 level. This is happening because the routes that were assigned to non-root components are not existing in S3, they only reside virtually on the browser's runtime. Therefore S3 / CloudFront responds with a 404/403 status code.

In order to solve this, there's a need need to implement a redirect rule in either the S3 or CloudFront layers. There are several ways to to do this:

If you have manually setup your S3 static site, you can manually configure this by following this guide:
If you have configured your bucket via Terraform, I would recommend to add a routing rule for the redirect rules.

resource "aws_s3_bucket" "main_bucket" {
  bucket = join("-", [var.project_name, "website-main-s3"])
  acl    = "private"

  server_side_encryption_configuration {
    rule {
      apply_server_side_encryption_by_default {
        sse_algorithm = "AES256"
      }
    }
  }

  # Redirect rules for 404 and 403
  # Assuming the logical routes are the primary cause of the 404 and 403 hits.
  routing_rules = <<EOF
    [{
        "Condition": {
          "HttpErrorCodeReturnedEquals": "403"
        },
        "Redirect": {
          "ReplaceKeyWith": "index.html"
        }
    },
    {
        "Condition": {
          "HttpErrorCodeReturnedEquals": "404"
        },
        "Redirect": {
          "ReplaceKeyWith": "index.html"
        }
    }]
  EOF

  tags = {
    Name        = join("-", [var.project_name, "website-main-s3"])
    Environment = var.environment
  }
}

Just like the terraform template that I've shared, there are also ways that this routing implementation can be achieved using AWS CDK and Cloud Formation

If you've like a whole copy of the terraform template I'm using, you can follow this sample from Github

PS: You may also want to consider checking if your CloudFront's OAI has enough permission to pull non-root components in your bucket. If you are saying that the root path is being served well, the likeliness of this issue is low.