See why Qlik is a Leader in the 2024 Gartner® Magic Quadrant™ for Analytics & BI Platforms.
Download Now
I can't add an iframe application to a wordpress page, I set the public sheet, I generate the iframe code but I get the following error: "
qms.eu.qlikcloud.com
refused to connect.
."
Attached are the screenshots.
What exactly needs to be done to make it work? thanks
This error occurs when CSP(Content Security Policy) and web integration is missing. The best way to which one is missing is to open a Developer tool & look for the error and add the missing request to CSP in SaaS.
Thank you
This error occurs when CSP(Content Security Policy) and web integration is missing. The best way to which one is missing is to open a Developer tool & look for the error and add the missing request to CSP in SaaS.
Thank you
I have web integration id and CSP in place but I still get the error "Refused to Connect" in browser and this one in console
"Refused to frame '
https://5mgt7zl1n5abmk4.sg.qlikcloud.com/
' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' app.pendo.io localhost:3333""
I am running my NodeJS web app at
http://localhost:3333
and this is added as a whilelist origin and in CSP as well.
@vivek_batra
, are you trying to perform an anonymous auth to your cloud tenant or interactive login? Can you share your code?
You may wish to compare with this example:
https://github.com/goldbergjeffrey/qlik-saas-wordpress-plugin
but keep in mind this code is made to work with jwt authorization in Qlik Cloud hence the certificate requirements.
Hi
@Jeffrey_Goldberg
Thanks for the reply. I am trying to load an iframe in my react web app
import React from 'react';
import * as Config from 'utils/configuration';
export default class QlikIFrame extends React.Component {
constructor(props) {
super(props);
componentDidMount() {
this.initialize();
componentDidUpdate() {
this.initialize();
initialize() {
const webIntegrationId = Config.WEB_INTEGRATION_ID;
function login() {
function isLoggedIn() {
return fetch("https://5mgt7zl1n5abmk4.sg.qlikcloud.com/api/v1/users/me", {
method: 'GET',
mode: 'cors',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'qlik-web-integration-id': webIntegrationId,
}).then(response => {
return response.status === 200;
return isLoggedIn().then(loggedIn => {
if (!loggedIn) {
// check login
window.location.href = "https://5mgt7zl1n5abmk4.sg.qlikcloud.com/login?qlik-web-integration-id=" + webIntegrationId + "&returnto=" + location.href;
throw new Error('not logged in');
login()
render() {
return (
<iframe src="https://5mgt7zl1n5abmk4.sg.qlikcloud.com/single/?appid=43ce1141-2d47-428b-af30-9fd45499be3b&obj=JMGd&theme=horizon&opt=ctxmenu,currsel"
style={{ "border": "none", width: "100%", height: "100%" }}></iframe>
Thats my react componenet