topic Re: Embedded analytics using iframe only is broken if not logged in in Integration, Extension & APIs

Embedded analytics using iframe only is broken if not logged in

homer — Wed, 14 Jul 2021 20:08:17 GMT

I'm trying to do embedded analytics and have successfully followed these instructions to load an iframe https://support.qlik.com/articles/000096877

If I'm not logged in however, then the iframe redirects to https://login.qlik.com which refuses to load because of CSP. What's the fix?

Re: Embedded analytics using iframe only is broken if not logged in

homer — Mon, 19 Jul 2021 16:13:20 GMT

Anyone?

Re: Embedded analytics using iframe only is broken if not logged in

Daniele_Purrone — Thu, 22 Jul 2021 13:46:39 GMT

Hi @homer , can you please check if this apply to your scenario? https://community.qlik.com/t5/Integration-Extension-APIs/Refuse-to-display-iFrame-due-to-frame-ancestor/td-p/1683350

Re: Embedded analytics using iframe only is broken if not logged in

Damien_V — Thu, 22 Jul 2021 13:53:03 GMT

Hi @homer

The error message suggest that you're trying to load login.qlik.com inside the iFrame which is not possible.

It needs to be loaded OUTSIDE the iFrame, only the Qlik Sense app/objects should be loaded inside the iFrame.

There is an example here:
https://community.qlik.com/t5/Knowledge-Base/Qlik-Sense-Enterprise-SaaS-How-to-embed-a-chart-in-an-iFrame/ta-p/1711503

Re: Embedded analytics using iframe only is broken if not logged in

homer — Thu, 22 Jul 2021 15:13:40 GMT

Hello, no thats not the case.

When already logged in, the embed iframe works - I've already added the frame ancestors CSP. The trouble is that when not logged in, the embed itself redirects to the login.qlik.com domain inside the iframe, thereby breaking the CSP of that domain and then failing to load *anything* in the iframe.

The behaviour I would expect is that the embed says that you need to login, and then you'd have to click on a button to login, which would open login.qlik.com in a popup, then reload the iframe on successful login. Instead I just get a broken iframe.

Re: Embedded analytics using iframe only is broken if not logged in

homer — Thu, 22 Jul 2021 15:26:35 GMT

Thanks for the link. I'm getting closer now. I can see how that would work for other use cases, but my scenario in more complex.

My app (app A) on domain A is actually in an iframe itself (in app B on domain B).

I have already added iframe ancestors CSP for domains A & B, so when logged in, all is good. The iframe embed loads.

Now, if I was to follow the example you give, which is good in some scenarios, then the login screen would replace app A in the iframe, but still fall foul of the CSP on say login.qlik.com, or whatever other login provider.

My expectation for login would be as I explained to @Daniele_Purrone :

> The behaviour I would expect is that the embed says that you need to login,
> and then you'd have to click on a button to login, which would open login.qlik.com
> in a popup, then reload the iframe on successful login.
> Instead I just get a broken iframe.

Re: Embedded analytics using iframe only is broken if not logged in

Damien_V — Fri, 23 Jul 2021 15:10:37 GMT

Hi @homer

If you want that kind of behavior, you will have to code it on your page, that is not something that happens out of the box in Qlik Sense.

Here is a very simplistic example:

Parent page:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body style="height:600px;"> <iframe src="childpage.html" style="border:none;width:100%;height:100%;"></iframe> </body> </html>

Child page:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript"> const webIntegrationId = "TbFuSrrd-AljEFjqqyBCHXzWLYiY4xEh"; function login() { function isLoggedIn() { return fetch("https://yourtenant.eu.qlikcloud.com/api/v1/users/me", { method: 'GET', mode: 'cors', credentials: 'include', headers: { 'Content-Type': 'application/json', 'qlik-web-integration-id': webIntegrationId, }, }).then(response => { return response.status === 200; }); } return isLoggedIn().then(loggedIn => { if (!loggedIn) { // check login window.top.location.href = "https://yourtenant.eu.qlikcloud.com/login?qlik-web-integration-id=" + webIntegrationId + "&returnto=" + top.location.href; document.body.innerHTML = document.body.innerHTML + "<div>Please log in to https://yourtenant.eu.qlikcloud.com before accessing this page.</div>"; }else{ window.location.href = "https://yourtenant.eu.qlikcloud.com/single/?appid=8120d03d-3902-4f4e-b0f1-3fee539227ad&obj=DKnjQAk&opt=ctxmenu,currsel" ; } }); } login() </script> </head> <body style="height:600px;"> </body> </html>

Hope that helps.