Full-app embed with Keycloak authentication in React

Get Help
1

I have a React application that use Keyloak for the SSO authentication: users, before use the app must login via SSO through Keycloak.

In the React application I embedded the Metabase full-app within an iframe and I redirected the authentication with:

      <iframe
        src={`${config.metabase.url}/auth/sso?redirect=${encodeURIComponent(config.metabase.url)}`}
        title="dashboard-manager"
        style={{ border: "none", width: "100%", height: "calc(100vh - 78px)" }}
      />

where config.metabase.ur is something like https://metabase.my-domain.com/. Unfortunately, I cannot login with the SSO: Chrome blocks the authentication due to CSP with the error in console:

Refused to frame 'https://keycloak.my-domain.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
Obviously, I set "Authorized origins" with "https://*.my-domain.com".

Some suggestion?

Thanks!

2

Hi @alberto.manfrinati
Are you sure the error is coming from Metabase and not Keycloak itself?
Please use the support email when using the Pro/Enterprise edition.

3

Yeah, good catch!

It was a problem with Keycloak.. I had to edit the attribute "Real Settings" > "Security Defenses" > "Content-Security-Policy" appending "https://*.obc.ext.mobisec.com" to the "frame-ancestors" value.