Implement a Qlik Cloud session cookie proxy

This document will take you through configuring a solution to proxy requests from a web application with Qlik Cloud content embedded in it to Qlik Cloud with the express intention of mitigating third-party cookies on the front-end of the web app, where your solution can’t use OAuth2 impersonation.

Use this guide to adapt your own web application to store and reference Qlik Session cookies on the backend so they can be used to send authorized requests to Qlik Cloud and return the content you want to display in your web application.

The steps outlined here will work for an application based on any suitable framework and language. This specific how-to uses Nodejs and JavaScript.

Prerequisites

  • A Qlik Cloud tenant with a JWT identity provider configuration
  • A Qlik Sense application deployed to a shared or managed space, which your users have access to.
  • A Redis cloud database to store session information for the web application (you can sign up for a free account).
  • You need to be familiar with programming Nodejs applications using the express.js module.
  • You need to at least have a minimal understanding of how your web application authenticates users. For the purposes of this document, an Auth0 identity provider application is used.

Happy path

If you want to get right to the solution, you have two choices.

  • Clone this GitHub repository to develop the solution in your choice of development environment.
  • Fork this repl on Replit to develop and test this solution in their cloud hosted development environment.

Note: This document describes the configuration using the solution hosted on replit.com. You must sign up for a free replit account if you wish to fork the project and use their development environment to build the project.

1.0.0 Install dependencies

From a terminal console, shell, or command line enter npm install to add all the modules needed to build this project. This will install all node modules necessary to complete this document when you use the Replit fork.

Note: If you are building this project in your own Nodejs environment, it’s recommended you install dotenv from npm to add environment variables support.

2.0.0 Configuration

2.1.0 Configure backend environment variables

Open the Secrets tool in the development environment or create a .env file in the project if you’re using dotenv. Add or fill out these variables.

  • clientId: The client id for the identity provider application used to authenticate users to the web application.
  • clientSecret: The client secret for the identity provider application used to authenticate users to the web application.
  • idpUri: The web address of the identity provider used to authenticate users to the web application.
  • redirectUri: The route in the web application that should be called when a user authenticates to the web application.
  • tenantUri: The hostname for the Qlik Cloud tenant from which content will be embedded.
  • webIntegrationId: A string value configured in your Qlik Cloud tenant to allow the web application to embed content when you use iframe embedding.
  • issuer: A string value provided by a JWT identity provider configuration in your Qlik Cloud tenant.
  • keyId: A string value provided by a JWT identity provider configuration in your Qlik Cloud tenant.
  • privateKey: The private key used to sign JWT tokens created by the web application to authorize users to Qlik Cloud.
  • sessionSecret: A string value used to protect the contents of the web application’s session cookie.
  • redis_pwd: The password for connecting to the redis database used by the web application to store session information.
  • redis_db: The database connection string to the redis database.
  • redis_port: The port used to make the database connection to redis.

2.2.0 Configure the frontend

Open the index.html and replace the URLs and Qlik Sense specific identifiers to embed content from your tenant.

2.2.1 URLs to update

In the style sheet link element in the head of the file, replace the <WEB_APP_HOSTNAME> with the hostname of your web application.


<link rel="stylesheet" href="https://<WEB_APP_HOSTNAME>/resources/autogenerated/qlik-styles.css" />

In the first script element in the head of the file, replace the <WEB_APP_HOSTNAME> with the hostname of your web application.


<script src="https://<WEB_APP_HOSTNAME>/resources/assets/external/requirejs/require.js"></script>

In the second script element in the head of the file, replace the <WEB_APP_HOSTNAME> with the hostname of your web application in the data-host property.


<script
  crossorigin="anonymous"
  type="application/javascript"
  src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components"
  data-host="https://<WEB_APP_HOSTNAME>"
></script>

In the third script element in the head of the file, replace the <WEB_APP_HOSTNAME> with the hostname of your web application in the host property of the config JSON object.


const config = {
  host: "<WEB_APP_HOSTNAME>",
  port: 443,
  prefix: "/",
  isSecure: true,
};

2.2.2 Set Qlik Sense specific identifiers

Set the Qlik Sense application id to use for opening a WebSocket to Qlik Cloud. While this may not be the app embedded content will come from, Qlik Cloud requires a valid application id to open a WebSocket to a Qlik Sense engine.

Note: You will set these parameters in multiple places in index.html, as this web app demonstrates various methods for embedding analytics. You may use the same content in every location, or use different content in each.


const appId = "<APP_ID>"; //example: e1024b45-efa3-421f-b0c0-44d7d1222c7d

In the renderSheet function, update the qlikConfig object with an application id and sheet id you want to embed into the web app.

function renderSheet(config) {
  const qlikConfig = {
    appId: "<APP_ID>", //example: e1024b45-efa3-421f-b0c0-44d7d1222c7d
    sheetId: "<SHEET_ID>" //example: a8bdb8b2-525e-486e-91d1-7318d362acee
  }
...
}

In the renderIframe function, update the qlikConfig object with an application id and sheet id you want to embed into the web app.

function renderIframe(config) {
  const qlikConfig = {
    appId: "<APP_ID>", //example: e1024b45-efa3-421f-b0c0-44d7d1222c7d
    sheetId: "<SHEET_ID>" //example: 05743d07-2e17-4c5b-8f81-625c4ee0931b
  }
...
}

In the <qlik-embed> element in the body of the file, update the app-id and the object-id you want to embed into the web app.


<qlik-embed
  ui="object"
  app-id="<APP_ID>"
  object-id="OBJECT_ID"
></qlik-embed>

3.0.0 Run the web application

Press the Run button at the top of the editor, or launch the app from a terminal prompt. Go to a new tab in the browser and enter the URL to the web application.

Depending on how you have implemented authentication, you may redirect to a login page. After a successful authentication, the browser will return to the web application and render content from Qlik Cloud.

Was this page helpful?