Content Security Policy
This tutorial explains the concept of content security policy (CSP) and shows how to modify CSP policies in your Qlik Cloud tenant.
CSP is a methodology implemented in modern web browsers to disallow a webpage from accessing resources outside its own origin without explicit permission. The intent is to prevent or mitigate cross-site scripting and data injection attacks when a user navigates to a web application.
You can find an in-depth explanation of content security policy on the Mozilla website.
There are two main cases where content security policy is necessary to support user experiences with cross-site implications:
- Using visualization extensions in Qlik Sense applications
- Embedding content into external web applications
If you have uploaded extensions into your tenant, chances are they
contain references to code, CSS style sheets, or images hosted on a website
outside of the
qlikcloud.com domain. In order for these extensions to function
properly in the Qlik Sense user experience, content security policy needs to be
configured to allow the content from the hosting domain. There are several
directives you can set to permit the content to be accepted by the
Click here for a list of directives you can set in a content security policy entry.
When you embed content using iframes like visualizations, sheets, or entire analytics experiences into your web applications, adding a content security policy reference is necessary to allow the content to render in the application.
If you embed content from your tenant or use visualization extensions and they aren't rendering in the browser, content security is most likely blocking it. Opening your browser's developer tools console will show an error describing the missing directives resulting in the block.
In this example, the browser is blocking an iframe embedded into a web page. The
error states the
frame-ancestors directive is not set for the website
attempting to render the content.
To set up a content security policy directive, access the management console for your tenant.
In the left pane, select “Content security policy”. Click “Add” on the top right.
The example embeds a sheet from a Qlik Sense application using iframes into a
jsfiddle code sample. The
origin is set to the domain for jsfiddle
fiddle.jshell.net and the directive
frame-ancestors is checked to allow the
sheet to render in the jsfiddle web page.
Now that you know what content security policy means and how it works, you can establish the appropriate access on Qlik Cloud to allow content to work seamlessly for embedded experiences and integrated components.