Access Denied when upgrading from PDK 0.25.13 to later version

[AlexTo]

Describe the bug

Hi We have been using PDK version 0.25.13. We encounter an issue with upgrading 0.25.13 to any later version of PDK.

We have a React front end that

1. Allow the user to create a project
2. After creating the project, redirect to /projects/{project-id}

The redirect will cause "Access Denied" error

This is the request with error from the browser

and the log from Cloudfront

2025-04-15	01:31:27	SYD62-P1	350	124.170.236.69	GET	mydomain.cloudfront.net	/projects/project-6129b5d0-cd2c-42a3-a8da-b8085987783b	403	https://mydomain.cloudfront.net/new-project	Mozilla/5.0%20(Windows%20NT%2010.0;%20Win64;%20x64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/135.0.0.0%20Safari/537.36%20Edg/135.0.0.0	-	-	Error	R8syZYk9oo8Ob6BdaAyke7BahEFsT0msxUUg5wcebj0sMUddtWJsEQ==	mydomain.cloudfront.net	https	69	0.012	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	64299	0.012	Error	application/xml	-	-	-
2025-04-15	01:31:27	SYD62-P1	351	124.170.236.69	GET	mydomain.cloudfront.net	/favicon.ico	403	https://mydomain.cloudfront.net/projects/project-6129b5d0-cd2c-42a3-a8da-b8085987783b	Mozilla/5.0%20(Windows%20NT%2010.0;%20Win64;%20x64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/135.0.0.0%20Safari/537.36%20Edg/135.0.0.0	-	-	Error	yEaNi_eyFu1Kwhq9KDG85WYWOcEveLriPa_nL-N0xGcIVpUhNmPSaQ==	mydomain.cloudfront.net	https	36	0.013	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	64299	0.013	Error	application/xml	-	-	-
2025-04-15	01:31:26	SYD62-P1	351	124.170.236.69	GET	mydomain.cloudfront.net	/projects/project-6129b5d0-cd2c-42a3-a8da-b8085987783b	403	https://mydomain.cloudfront.net/new-project	Mozilla/5.0%20(Windows%20NT%2010.0;%20Win64;%20x64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/135.0.0.0%20Safari/537.36%20Edg/135.0.0.0	-	-	Error	ibwK4aIc1pEtDkAWU1rGHH38ntRYjZxI0DxXJjFVQZ25sujb38nQ7w==	mydomain.cloudfront.net	https	77	0.049	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	64299	0.049	Error	application/xml	-	-	-
2025-04-15	01:31:26	SYD62-P1	352	124.170.236.69	GET	mydomain.cloudfront.net	/favicon.ico	403	https://mydomain.cloudfront.net/projects/project-6129b5d0-cd2c-42a3-a8da-b8085987783b	Mozilla/5.0%20(Windows%20NT%2010.0;%20Win64;%20x64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/135.0.0.0%20Safari/537.36%20Edg/135.0.0.0	-	-	Error	N-RwkJrkAzTDTVtMwfG4SW_wrwqgThp7NN7h71tyBZrFO1DYvTpEUQ==	mydomain.cloudfront.net	https	36	0.029	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	64299	0.029	Error	application/xml	-	-	-
2025-04-15	01:32:09	SYD62-P1	352	124.170.236.69	GET	mydomain.cloudfront.net	/projects/project-a2a2c7c7-99fe-4503-b2cc-c4d164082538	403	https://mydomain.cloudfront.net/new-project	Mozilla/5.0%20(Windows%20NT%2010.0;%20Win64;%20x64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/135.0.0.0%20Safari/537.36%20Edg/135.0.0.0	-	-	Error	La4XF7oXHztiMLIeFxq1I3dkdDXXAQ7JaJXlE6ds9O9fGzgRX4MlOw==	mydomain.cloudfront.net	https	67	0.033	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	64299	0.033	Error	application/xml	-	-	-
2025-04-15	01:32:10	SYD62-P1	350	124.170.236.69	GET	mydomain.cloudfront.net	/favicon.ico	403	https://mydomain.cloudfront.net/projects/project-a2a2c7c7-99fe-4503-b2cc-c4d164082538	Mozilla/5.0%20(Windows%20NT%2010.0;%20Win64;%20x64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/135.0.0.0%20Safari/537.36%20Edg/135.0.0.0	-	-	Error	wh8O77xElo6uN4YTalo0y8Z1Nh7gHzUu4LLW0lbbQRUH0f7doCoJPQ==	mydomain.cloudfront.net	https	102	0.028	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	64299	0.028	Error	application/xml	-	-	-

I suspect that it may have something to do with the introduction of OAC in static-website in version 0.25.14?

Thanks

Expected Behavior

Upgrading to version later than 0.25.13 and redeploying without issues

Current Behavior

Current system is based on 0.25.13. Upgrading to any version later than 0.25.13 and reployding will cause "Access Denied" issue as described above

Reproduction Steps

1. Create a project using PDK 0.25.13
2. In the React app, POST/GET any URL that is not the cloudfront root URL, for e.g. http://domain.cloudfront.net/some-path
3. Access Denied happens

Possible Solution

No response

Additional Information/Context

No response

PDK version used

0.25.13

What languages are you seeing this issue on?

Typescript

Environment details (OS name and version, etc.)

Ubuntu 24.04.2

[cogwirrel]

Hey @AlexTo!

As a workaround, I wonder if changing the logical id of your StaticWebsite construct will address this? It should ensure CloudFormation creates a new CloudFront distribution.

Cheers, Jack

[AlexTo]

@cogwirrel thank you, creating a new CloudFront distribution works fine

[AlexTo]

@cogwirrel I think creating a new CloudFront distribution doesn't help. I created a new project from scratch with the latest version 0.26.6

I will have "access denied" from CloudFront if I put https://some-id.cloudfront.net/some-path directly into my browser

It's fine if I first go to the root at https://some-id.cloudfront.net/ and then navigate around in my React app.

[cogwirrel]

So from a bit of digging it looks like with OAC CloudFront now responds with a 403 instead of a 404 when you request a resource that's missing in the bucket. For single-page apps, we need to return the same index.html page for missing resources, so need to map 403 errors just like we did for 404 errors.

As a workaround you can pass distributionProps to the StaticWebsite construct, eg:

    const website = new StaticWebsite(this, id, {
      ...
      distributionProps: {
        errorResponses: [
          // Redirect 404 and 403 to index.html for single page apps
          {
            httpStatus: 404,
            responseHttpStatus: 200,
            responsePagePath: `/index.html`,
          },
          {
            httpStatus: 403,
            responseHttpStatus: 200,
            responsePagePath: `/index.html`,
          },
        ]
      },
    });

I'll raise a PR to fix this in the construct itself soon! :)

[cogwirrel]

Fix has been released in version 0.26.7