Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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
Hi,
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
Hi,
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.
FTR - Documentation for in dev portal-https://qlik.dev/tutorials/content-security-policy-for-embedding-iframes
Hi @Aiham_Azmeh
I have already followed the steps but no use.
@vivek_batra I think the csp origins entries defaults to https (for obvious security reasons)
If you run your web-app in https - it should work.
@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.
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 (
<div>
<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>
</div>
)
}
}
Thats my react componenet
I will give this a try, thanks