Problem embedding a non-public retool app without on-premise Google SSO

App Building
#1

Hi! I have created a non-public retool app that I'm embedding in a react app using

<Retool class="retool" url={retool_url} />

where retool_url is something of the style:

https://xxx.retool.com/apps/yyy?_hideNav=true&_hideTimer=true#id=1111

When I open the app where the retool app is embedded in Safari I cannot get past the login page:

Screenshot 2022-02-08 at 11.18.28
Screenshot 2022-02-08 at 11.18.281014×966 42.2 KB

I click on "Sign in with Google", but nothing happens.

If I go to developer mode I get errors of the type:

  • Refused to load Sign in - Google Accounts because it does not appear in the frame-src directive of the Content Security Policy.
  • Unrecognized Content-Security-Policy directive 'require-trusted-types-for'.
  • Refused to display Sign in - Google Accounts in a frame because it set 'X-Frame-Options' to 'DENY'.
  • Sandbox access violation: Blocked a frame at "null" from accessing a cross-origin frame. The frame being accessed is sandboxed and lacks the "allow-same-origin" flag.

Is there a way to solve this? Do I need to use On-premise Google SSO for retool (I'm currently not)?

#2

Hi @Linda! Quick question. Are you embedding in an HTTPS environment? https://docs.retool.com/docs/embedding-retool

#3

Hi @victoria! Sorry for the delay! Yes, it's embedded in an HTTPS environment.

#4

No worries at all. Does this embedded app work when you try in another browser (like Chrome or Firefox)? We only partially support Safari, so perhaps this is one of the areas that we don't support it.

#5

@victoria - I haven't seen any problems in Chrome, but in Firefox it only worked for about half of the people trying it out. The other half didn't manage to log in when in Firefox.

#6

Interesting! Same errors for those users in Firefox? And is there any common theme for those users you can think of? Location, OS, browser extensions, etc