Content security policy for embedding iframes

Note: Where possible, use qlik-embed rather than this framework. Review the tutorial embedding Qlik Analytics using qlik-embed web components.

Third-party cookies: This tutorial leverages cookies for auth, which are blocked by some browser vendors. Please use an OAuth solution where possible, which doesn’t leverage cookies.

Overview

Embedding visualizations and Qlik Sense experiences in custom web applications requires a content security policy (CSP) definition in your tenant. The CSP configuration instructs your tenant to allow cross-site requests for selected web-content and protocol types from an external domain.

Content Security Policy (CSP) is a browser mechanism for mitigating and preventing cross-site scripting (XSS) attacks. Setting a CSP header in the management console enables Qlik components embedded in external web applications to render and work properly.

If your solution includes embedding Qlik Sense visualizations using iframes, the tenant hosting the analytic content must have a CSP entry. Here’s how to perform the configuration.

Configuring Qlik Cloud to allow iframe embedding in your web application

  1. Open a web browser and navigate to your Qlik Cloud tenant. Once authenticated to your tenant, click the waffle icon and select Management Console.

    a screenshot of the management console menu of Qlik Cloud.

  2. Select Content Security Policy in the Integration section of the side menu. Click the Add button on the right side of the screen.

    a screenshot of the add configuration button of Qlik Cloud.

  3. In the Add origin window, give the entry a name and provide the origin for the web application, for example glitch.com). Under the origin, select the frame-ancestors directive.

    a screenshot of the csp configuration screen of Qlik Cloud.

By selecting the frame-ancestors directive, the web application with the iframe tag containing a reference to Qlik Cloud renders the requested content.

Conclusion

In this tutorial, you learned how to configure content security policy to allow an iframe referencing content from Qlik Cloud to render properly in your web application.

For more information on content security policy in Qlik Cloud, visit help.qlik.com.

For more information on content security policy in general, visit this website on the topic.

Was this page helpful?