# Lack of URL encoding in preview URLs breaks AWS CloudFront

**URL:** <https://forum.builder.io/t/lack-of-url-encoding-in-preview-urls-breaks-aws-cloudfront/3571>\
**Category:** Bugs\
**Created:** [May 4, 2023, 11:28am UTC](https://forum.builder.io/t/lack-of-url-encoding-in-preview-urls-breaks-aws-cloudfront/3571 "2023-05-04T11:28:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![vrio\_dave](https://avatars.discourse-cdn.com/v4/letter/v/54ee81/32.png) [@vrio\_dave](https://forum.builder.io/u/vrio_dave)\
**Post date:** [May 4, 2023, 11:28am UTC](https://forum.builder.io/t/lack-of-url-encoding-in-preview-urls-breaks-aws-cloudfront/3571/1 "2023-05-04T11:28:26Z")

</div>

**Builder content link**

> **[Builder.io: Drag & Drop Headless CMS](https://builder.io/content/1d407db63efe457fbe2e7e1fe86ce202)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

**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:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/5794c4a9e3afb4adfadc6c69a570886e3b654740.png)

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](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](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.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [May 4, 2023, 5:58pm UTC](https://forum.builder.io/t/lack-of-url-encoding-in-preview-urls-breaks-aws-cloudfront/3571/2 "2023-05-04T17:58:34Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![samcoleman](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@samcoleman](https://forum.builder.io/u/samcoleman)\
**Post date:** [September 13, 2023, 8:00pm UTC](https://forum.builder.io/t/lack-of-url-encoding-in-preview-urls-breaks-aws-cloudfront/3571/3 "2023-09-13T20:00:23Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/7/70bf57ae5ff15c22cbf2f29f72723f68115e3d40.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/c/c6c3612827761f17df8116d506df53bb44a32c85.png)

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.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/c/c40b9a70433837906bb1eeb35fe1a3cfa3693fe9.png)
