Builder Editor - Iframe view blocked by Cloudfront due to invalid character in query Parameter

Bugs
1

I have already mentioned this on a Bug posted on May 4th but I have had no response to it so I am posting on a fresh feed.

Builder content link

N/A - Applies to any Builder Editor View

Builder public api key
1926e37b53694b938d73f2c1b9f36bfd

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
image2500×1471 121 KB

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

image
image861×391 59.6 KB

image

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
image761×172 46.2 KB

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

2

Hi @samcoleman,
Sorry about the delay, wanted to check issue still persists for you?

3

Hi @OmPrakash, I have just checked and yes this problem still persists.

I can still workaround the issue for now by changing the Iframe src as before

4

Thank you for your response, @samcoleman . We are investigating the matter and will reach out if we require additional information or have updates to share.

5

@samcoleman can you please include a content URL or the URL that is getting blocked?

Could you please compare the URL that is getting blocked to a working URL for a different page to see if both of them have the encoded “:” in the URL. If the working URL has the “:” encoded, then it’s a problem with the integration.

6

@samcoleman We were able to track it down. SST adds a cloudfront function which seems to be doing the blocking.

You can change the SST code to change these query strings to be able to proceed.

For example, in the cloudfront function SST generated, change

function handler(event) {
  var request = event.request;
  request.headers["x-forwarded-host"] = request.headers.host;
  return request;
}

to

function handler(event) {
  var request = event.request;
  console.log('REQUEST----', event.request.querystring);
  if (event.request.querystring['builder.overrides.page:/']) {
      event.request.querystring['builder.overrides.page'] = event.request.querystring['builder.overrides.page:/'];
      delete event.request.querystring['builder.overrides.page:/'];
  }
  request.headers["x-forwarded-host"] = request.headers.host;
  return request;
}

The above is just a hack, but it gets the request serving again