Qlik Sense for Windows: iFrame sample using JWT authentication

Sonja_Bauernfeind · Feb 23, 2021 4:06:50 AM

This is a sample for embedding Qlik Sense in an iFrame with JWT authentication.

Environments:

Qlik Sense Enterprise for Windows June 2017 and later

Below is a working sample.

The general workflow is that you need to first send a request to Qlik Sense including the "Authorization" header that holds the JWT token, then Qlik Sense will let the browser register the session cookie and include it on subsequent requests so that you stay authenticated.

<!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">
    function login() {
      function isLoggedIn() {
        return fetch("https://servername/prefix/qrs/about?xrfkey=0000000000000000", {
          method: 'GET',
          mode: 'cors',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
            'X-Qlik-xrfkey': '0000000000000000',
            'Authorization': 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2...x0amchtrXbn5gYA',
          },
        }).then(response => {
          return response.status === 200;
        });
      }
      return isLoggedIn().then(loggedIn => {
        if (!loggedIn) {
          alert('You are not logged in');      
        }else{
            document.getElementById('QV01').src="https://servername/prefix/hub/";
        }
      });
    }
	login()
  </script>
</head>
<body style="height:600px;">
	<iframe id="QV01" src="" style="border:none;width:100%;height:100%;"></iframe>
</body>
</html>

In a real-world scenario, the JWT token will need to be automatically generated by a backend service and updated automatically in the above code depending on which user is logging in.

annabelg · ‎2022-05-09

Good morning @Sonja_Bauernfeind 🙂

I tried the above code but I am getting a 401 Error when trying to access the hub from the iFrame.

It seems that the first Request is working and getting the necessary information.

Can you help please ?

Sonja_Bauernfeind · ‎2022-05-09

Hello @annabelg

For better visibility of your question, I would recommend heading over to our Qlik Sense Integration forums and posting your question there, including any and all supporting information that you can gather (screencaps/har file - provided the files do not include sensitive information).

Our active engineers and community members can assist you better that way.

All the best,
Sonja

ahdan · ‎2022-10-12

good day @Sonja_Bauernfeind
in your code, the QRS require xrfkey to access Qlik Sense,

Can you point out how to setup the X-Qlik-xrfkey from the QMC?
I tried this method on a simple react web app and i kept getting the CORS error message,

'X-Qlik-xrfkey': '0000000000000000'

any help would be appreciated,

thank you,

for reference this is my error message

Qlik Sense Enterprise on Windows

Cheers,
Ahdan

Sonja_Bauernfeind · ‎2022-10-12

Hello @ahdan

You do not need to set up anything in the Management Console. What you need is to set an URL parameter "xrfkey" and a header "X-Qlik-xrfkey" on the request you perform, those 2 values must match and it can be any 16-digit random character string of your choice.

If you require further assistance on this, I would recommend posting directly to our Qlik Sense Integrations and API forums.

All the best,
Sonja

ahdan · ‎2022-10-16

Hi Sonja, thank you for answering my question!

Alright I did use the url as you mentioned, parameter "xrfkey" and X-Qlik-xrfkey header on a simple .html files. However I still got hit by the CORS block.. I wonder do you know else I should check regarding this error?

again I really appreciate the help,

Kindest regards,

Ahdan

TeunJacobs · ‎2023-03-20

Hi everyone,

I'm facing the same issue as @ahdan. Do you already found a solution for this?

So the xrfkey issue is solved. It does login on the first try, because I'm not getting the "You are not logged in" message. I do see in the Chrome console that I'm getting hit by this CORS block.

Sonja_Bauernfeind · ‎2023-03-22

Hello @TeunJacobs

I'd recommend posting about the challenge you're facing in our Integration forum, where our active userbase and support agents who monitor the forums can see the question.

All the best,
Sonja

ahdan · ‎2023-03-29

hi @TeunJacobs

two things that did work for me:

- add my site to allow CORS / whitelist from QMC settings,
- also had to use https from my original site. othwerwise if i had to use http (non secure) i had to utilise Firefox browser, since any other modern browser won't allow cross site cookie

hope this helps,

Ahdan

dcandyalex · ‎2023-08-08

Hi @Sonja_Bauernfeind

Thanks for your post. I also hit a CORS block similar to @ahdan @TeunJacobs. Has anyone posted in the integration forum about this?

Regards,

Andy

TeunJacobs · ‎2023-08-09

Hi @dcandyalex ,

Probably I found it after some more research and with the help of @ahdan. I've added several changes to my Virtual Proxy settings, don't remeber which one solved it eventually. But the info from @ahdan definiately helped me.

The CORS blocked issue is probably caused by the fact that your website can't make a handshake with Qlik in a secured way. What I did is the following:

- My website (where the embedded dashboard is located) is running on a on-premise VM in IIS, I've added a SSL-certificate to this website;
- I've added all the possible address to the 'Host allow list' in the Virtual Proxy settings, so the IP adres of the onprem VM but also the URL's with and without https/http but also with the ports.
- As an Additional response header (als in the Virtual Proxy settings) I've added the following value: [Access-Control-Allow-Origin: https://mywebsite.com:443].

Hopefully this is going to solve your problem.

Anthony

Qlik Sense for Windows: iFrame sample using JWT authentication

Qlik Sense for Windows: iFrame sample using JWT authentication

Integration and Embedding