How to embed qlik sense app (cloud) in angular web app
Hi,
I'd need some help with embedding a qlik dashboard in my environment.
This is the context:
I have an Angular web app. It is composed by a frontend (typescript) and a backend (nodejs) which serves on port 3000.
Now, in my personal space on qlik i created a new app (a dashboard with multiple sheets). My account is a developer one, not an admin and it does not allow me to access the administration console to change any configurations (e.g. csp headers config). Also, it allows only the embedding of single visualisation (sheet) and not of the entire app.
I am trying to embed it as an iframe in my frontend (in localhost), but I keep getting the following error:
Refused to frame 'https://xxxxx-sense.eu.qlikcloud.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
When checking on the network tab I can see that the request is sent successfully to the qlik url (i get 200 ok), but looking into the response I see "no resource with given identifier found".
From my understanding this error means that I either have to:
- configure the frame ancestor csp in the web management console (but i am not allowed to);
- switch my backend from http to https.
In my current scenario my angular app is served over http.
In order to embed these sheets into my app would it be enough to switch from http to https? Or do I still need to have access to the web management console to make it work?
