Third-Party Cookie Handling with Embedded Content

Contributed by Daniel Pilla

Overview

Note: This tutorial provides sample code that using OpenID Connect OIDC for authentication. If you are using JWT authorization, refer to this article.

In this tutorial, you are going to learn how to configure your Qlik embedded project to handle for scenarios where your client's browser does not support third-party cookies. Given that a Qlik Cloud tenant resides at *.*.qlikcloud.com, and your web page will not reside on that same domain (for example it might reside at analytics.company.com), this means that inherently, any embedded content from Qlik Cloud must handle third-party cookies, as Qlik Cloud relies on cookies for authentication.

Some browsers, by default, block third-party cookies. Furthermore, select browser modes (such as Chrome's Incognito mode) and certain browser configurations also turn off support for third-party cookies. This sample code handles whether the user's browser supports third-party cookies, which enables you to display a message (for example a nice modal) that the user will either have to modify their browser settings or try another browser to view the embedded Qlik content. Without this, the accessing user may perceive Qlik to be malfunctioning, as the embedded content will not render.

If you're not familiar with third-party cookies, here's a great blog to learn more .

Contents

Configuration

The code example in this tutorial provides a basic, fully functional web page that places an iframe into a div after successfully logging in to Qlik Cloud. To embed an iframe, you first need to make sure that you have the following:

  1. An existing application ID and sheet ID to embed.
  2. A web integration configured which contains the location of the web page that will be embedding the Qlik Cloud application.
  3. A content security policy entry with the frame-ancestors directive added for the location of the web page that will be embedding the Qlik Cloud application.

To configure the code, the following variables from the sample code must be filled in:

const TENANT = '<tenant>.<region>.qlikcloud.com';
const WEBINTEGRATIONID = '<web-integration-id>';
const APPID = '<app-id>';
const SHEETID = '<sheet-id>';
const IDENTITY = '<identity>';

Note: The IDENTITY > parameter is an arbitrary string to establish a separate session state. This can be used across iframes/varying methods of embedding to tie and/or separate sessions accordingly. It is an optional parameter included in this example for illustrative purposes.

Sample code

This sample code showcases how to implement a custom message to alert the use if their browser does not support third-party cookies. Be sure to test your final customized message code in third-party cookie supported and unsupported modes to ensure the message appears when you expect it.

<html>

<body>
    <iframe id='qlik_frame' style='border:none;width:100%;height:800px;'></iframe>
    <script>
        const TENANT = '<tenant>.<region>.qlikcloud.com';
        const WEBINTEGRATIONID = '<web-integration-id>';
        const APPID = '<app-id>';
        const SHEETID = '<sheet-id>';
        const IDENTITY = '<identity>';

        (async function main() {
            const initQlikLogin = await qlikLogin();
            if (qlikLogin) {
                const frameSrc = `https://${TENANT}/single/?appid=${APPID}&sheet=${SHEETID}&identity=${IDENTITY}&opt=ctxmenu,currsel`;
                document.getElementById('qlik_frame').setAttribute('src', frameSrc);
            }

            async function qlikLogin() {
                const loggedIn = await fetch(`https://${TENANT}/api/v1/users/me`, {
                    mode: 'cors',
                    credentials: 'include',
                    headers: {
                        'qlik-web-integration-id': WEBINTEGRATIONID,
                    },
                })
                if (loggedIn.status !== 200) {
                    if (sessionStorage.getItem('tryQlikAuth') === null) {
                        sessionStorage.setItem('tryQlikAuth', 1);
                        window.location = `https://${TENANT}/login?qlik-web-integration-id=${WEBINTEGRATIONID}&returnto=${location.href}`;
                        return await new Promise(resolve => setTimeout(resolve, 10000)); // prevents further code execution
                    } else {
                        sessionStorage.removeItem('tryQlikAuth');
                        const message = 'Third-party cookies are not enabled in your browser settings and/or browser mode.';
                        alert(message); // replace alert with modal or otherwise
                        throw new Error(message);
                    }
                }
                sessionStorage.removeItem('tryQlikAuth');
                console.log('Logged in!');
                return true;
            }
        })()
    </script>
</body>

</html>
Was this page helpful?