Allowed origins when using embedding in iframe/custom component

App Building
1

We are embedding an external application/service in our Retool project utilizing an iFrame.
That application requires clients to set "Allowed Origins", otherwise, there are policies which restrict loading in iFrame.

We provided as our Allowed Origin: https://retool-edge.com/*
(We are using cloud-hosted Retool. And they claim to support '*' as wildcard.

However, when trying to load the application using iFrame, we're getting a 'Refused to Connect'.
Looking in Dev Tools, we're getting something like this:
Refused to frame 'https://___.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://retool-edge.com/*".

Before I reached out to that vendor I wanted to confirm: is https://retool-edge.com/* in fact the correct hostname to use for Allowed Origin?

One other thing, there is another error message that appears,
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://retool-edge.com') does not match the recipient window's origin ('null').
It looks like that appears just on a reload.

Any help would be much appreciated!

2

Hey Diskin,

Apologies for the delayed response here :pensive: We've been a bit busy over here!

For your first issue, I believe you'll want to use your own domain (something like https://subdomain.retool.com/*) as retool-edge is mostly just where we host our assets.

For your second issue, do you know which permissions you've granted to your iFrame? I wonder if enabling the "Storage and Cookies" settings would help. Let me know!

3

Thank you, Victoria.
We're going to revert back with the results.

For your second issue, do you know which permissions you've granted to your iFrame? I wonder if enabling the "Storage and Cookies" settings would help. Let me know!

We had tried that to no avail. Hopefully, updating the domain will be sufficient.

4

Sounds like a plan! Definitely let me know how you fare :slight_smile:

5

I have a similar but different issue. We added https://*.retool.com to our CSP and can render our app with the iFrame component. Yet, when using the "Custom Component" for iFraming, our app gets blocked.

@victoria, should we add more URLs to our CSP for the app to render in a Custom Component iFrame?

6

Hi @noah_m :wave: . Welcome to the community!

Is the custom component appearing at all? Please provide screenshots if possible.

7

Thank you! Confirming we resolved this issue by adding https://retool-edge.com/* to our CSP.

Below recap for future ref on which URL's to add to your CSP:

  • iFrame Component: https://subdomain.retool.com/*
  • Custom Component iFrame: https://subdomain.retool.com/* & https://retool-edge.com/*
8

Thank you for sharing you solution! Glad you got it resolved.