Allowed origins when using embedding in iframe/custom component

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!

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!

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.

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