New React App Builder Iframe CSP Settings

💬 App Building
1

  1. My goal: I want to embed external URLs as iframes in app created through Retool’s new react app builder

  2. Issue: The CSP header on the React app page sets frame-src 'self'. Is there any setting we can use to have certain allowlisted domains

  3. Steps I've taken to troubleshoot: Confirmed via Network tab that the response header Content-Security-Policy: ... frame-src 'self' ... is set on the React app page by Retool's server.

    Additional info: Cloud. Screenshot of the CSP header attached.

image
image1164×1096 18.3 KB

1 Like
3

Hi there Sonia!

Tanner from the Retool product team here :waving_hand:

First of all, thanks for trying out the new app builder!

Secondly, our current experience is restrictive by design as a security feature. We’re actively working on a feature to allow admins to lax the CSP policy for your organization.

You can expect this to land early next week! Expect a changelog entry when it’s released.

1 Like
4

Glad to hear it’s coming soon! :slight_smile:

5

Hey @sonia - we just announced a customizable CSP policy here! Give it a try and let us know if you have any feedback. :slightly_smiling_face:

6

Hey Darren! It was working well until today when retool updated the domains to follow a new format. I believe we’re facing the same csp restrictions as if we were using a custom domain (Restrictions listed here) . Any idea how we can force the URL to be go back to the subdomain—appname.retool.app format?

7

Ah I was worried about how custom domains would interact with existing CSPs. :thinking: While I dig into this, have you already republished the app?

Also, just to clarify - I assume your org is configured to use a custom domain?

8

It currently is configured to use one as I believe we need it to make the custom embed work.

And yes, I had republished the app, which caused it to break. Seems like no other way to revert the URL changes.

9

I just tested this out and it appears that the embedding only appears broken in the editing IDE, where the entire canvas is nested in an additional sandbox environment. Once you've published the app, it should work as expected whether you are accessing it via a custom or standard Retool subdomain.