Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
digitalizarecatgroup
Contributor
Contributor

Wordpress iframe error

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

Labels (2)
1 Solution

Accepted Solutions
Akshesh_Patel
Support
Support

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

View solution in original post

8 Replies
Akshesh_Patel
Support
Support

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
Partner - Contributor III
Partner - Contributor III

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
Partner - Contributor III
Partner - Contributor III

Hi @Aiham_Azmeh 

I have already followed the steps but no use.

Aiham_Azmeh
Employee
Employee

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

@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
Partner - Contributor III
Partner - Contributor III

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
Partner - Contributor III
Partner - Contributor III

I will give this a try, thanks