Wordpress iframe error

[digitalizarecatgroup]

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

[Akshesh_Patel · Accepted solution]

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

[vivek_batra]

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.

[Aiham_Azmeh]

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

[vivek_batra]

Hi @Aiham_Azmeh 

I have already followed the steps but no use.

[Aiham_Azmeh]

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

[Jeffrey_Goldberg]

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

[vivek_batra]

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 

[vivek_batra]

I will give this a try, thanks