topic Re: Wordpress iframe error in Integration, Extension & APIs

Wordpress iframe error

digitalizarecatgroup — Tue, 11 Jan 2022 11:20:41 GMT

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

Re: Wordpress iframe error

Akshesh_Patel — Wed, 26 Jan 2022 13:21:48 GMT

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

Re: Wordpress iframe error

vivek_batra — Wed, 03 Aug 2022 10:41:16 GMT

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.

Re: Wordpress iframe error

Aiham_Azmeh — Wed, 03 Aug 2022 11:15:08 GMT

FTR - Documentation for in dev portal-https://qlik.dev/tutorials/content-security-policy-for-embedding-iframes

Re: Wordpress iframe error

vivek_batra — Wed, 03 Aug 2022 11:21:00 GMT

Hi @Aiham_Azmeh

I have already followed the steps but no use.

Re: Wordpress iframe error

Aiham_Azmeh — Wed, 03 Aug 2022 11:44:38 GMT

@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.

Re: Wordpress iframe error

Jeffrey_Goldberg — Wed, 03 Aug 2022 12:25:16 GMT

@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.

Re: Wordpress iframe error

vivek_batra — Thu, 04 Aug 2022 04:51:04 GMT

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 ( <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

Re: Wordpress iframe error

vivek_batra — Thu, 04 Aug 2022 04:52:25 GMT

I will give this a try, thanks