Skip to main content

Qlik

cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
homer
Contributor
Contributor
‎2021-07-14 04:08 PM

Embedded analytics using iframe only is broken if not logged in

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?

E6NQZBOX0AYCOok.png

Labels (1)
Labels

  • SaaS

2,010 Views
0 Likes
1 Solution

Accepted Solutions
Damien_Villaret
Support
Support
‎2021-07-23 09:51 AM

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.

If the issue is solved please mark the answer with Accept as Solution.

View solution in original post

1,796 Views
6 Replies
homer
Contributor
Contributor
‎2021-07-19 12:13 PM
Author

Anyone? 

1,937 Views
0 Likes
Daniele_Purrone
Support
Support
‎2021-07-22 09:46 AM

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-ances...

 

Daniele - Principal Technical Support Engineer & SaaS Support Coordinator at Qlik
If a post helps to resolve your issue, please accept it as a Solution.
1,884 Views
0 Likes
Damien_Villaret
Support
Support
‎2021-07-22 09:53 AM

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-i...

If the issue is solved please mark the answer with Accept as Solution.
1,881 Views
homer
Contributor
Contributor
‎2021-07-22 11:13 AM
Author

In response to Daniele_Purrone

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.

1,868 Views
0 Likes
homer
Contributor
Contributor
‎2021-07-22 11:26 AM
Author

In response to Damien_Villaret

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.

1,866 Views
0 Likes
Damien_Villaret
Support
Support
‎2021-07-23 09:51 AM

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.

If the issue is solved please mark the answer with Accept as Solution.
1,797 Views