Lack of URL encoding in preview URLs breaks AWS CloudFront

[vrio_dave]

Builder content link

Builder.io: Drag & Drop Headless CMS

Builder public api key
b0975e23e2414930ae315bf23821fc88

Detailed steps to reproduce the bug

1. Create a Next.js application for Builder
2. Deploy it with SST (which deploys it to AWS)
3. Try to create a page and preview it via Builder

Notice that on step 3, you’ll get the following error:

The link that the preview is trying to hit is https://pages.vrio.dev/b0975e23e2414930ae315bf23821fc88/p/ecommerce-page-test?builder.space=b0975e23e2414930ae315bf23821fc88&builder.cachebust=true&builder.preview=ecommerce-page&builder.noCache=true&__builder_editing__=true&builder.overrides.ecommerce-page=1d407db63efe457fbe2e7e1fe86ce202&builder.overrides.1d407db63efe457fbe2e7e1fe86ce202=1d407db63efe457fbe2e7e1fe86ce202&builder.overrides.ecommerce-page:/b0975e23e2414930ae315bf23821fc88/p/ecommerce-page-test=1d407db63efe457fbe2e7e1fe86ce202.

If you take the last query string parameter and URL encode it, you get the following link:

https://pages.vrio.dev/b0975e23e2414930ae315bf23821fc88/p/ecommerce-page-test?builder.space=b0975e23e2414930ae315bf23821fc88&builder.cachebust=true&builder.preview=ecommerce-page&builder.noCache=true&__builder_editing__=true&builder.overrides.ecommerce-page=1d407db63efe457fbe2e7e1fe86ce202&builder.overrides.1d407db63efe457fbe2e7e1fe86ce202=1d407db63efe457fbe2e7e1fe86ce202&builder.overrides.ecommerce-page%3A%2Fb0975e23e2414930ae315bf23821fc88%2Fp%2Fecommerce-page-test%3D1d407db63efe457fbe2e7e1fe86ce202

That link works. So the issue is that AWS Cloudfront can’t handle the : in the query string. In my opinion, this query string should be URL encoded to start never mind that it’s breaking my specific application.

Code stack you are integrating Builder with
Next.js, SST, & AWS.

[manish-sharma]

Hi @vrio_dave,

We really appreciate you reporting this possible issue to us, we are going to investigate this further and deploy a possible solution. We will try to update you as soon as we have any insights on this. Thank you!

[samcoleman]

Hi @manish-sharma ,
Has there been any update on this? I am also running into the same issue with deploying using SST.

This is the query that CloudFront is blocking, “:” characters are not allowed in query parameters.

I have been unable to find a way to configure AWS to ignore this problem. The only workaround I have found is to edit the query in the iframe of the visual builder, allowing me to live edit and publish changes. However, this is not optimal as I have to do this every time I load the page.