Embed Perspective View as an IFRAME

Ignition
1

I have a web application built using React.

I’m trying to embed a perspective view as an iframe in that application.

The perspective view is protected by an open id idp (auth0)

This works fine when my node webserver is running at localhost:3000 and my ignition instance is running at localhost:8088.

We’ve deployed the perspective views to an instance of ignition on a test server and now I’m trying to point the src of iframe to the test server (e.g. https ://testserver.nunya.com:8043/data/perspective/client/…). The IFRAME will display the ‘You must log in to continue’ screen and the ‘Continue to Log In’ button as expected.

image
image953×410 44.3 KB

After I click the ‘Continue to Log In’ button it will spin for a second or two and then take me right back to the ‘You must log in to continue’ screen.

An error message consistently appears in the console log each time I press hte ‘Continue to Log In’ button: Error sending client activity message: TypeError: Cannot destructure property ‘readyState’ of ‘this.webSocket’ as it is undefined.

I have updated my ignition.conf file as follows:

wrapper.java.additional.1=-Dignition.http.header.x_frame_options.enabled=false
wrapper.java.additional.2=-Dignition.http.header.x_content_type_options.enabled=false
wrapper.java.additional.3=-Dignition.http.header.x_xss_protection.enabled=false
wrapper.java.additional.4=-Dignition.http.header.referrer_policy.enabled=false

Has anyone had any success embedding perspective content in an iframe of another application?

2

I have also installed the samplequickstart project on the ignition server and left it un-protected by an idp. I get a slightly different error when I embed https:///data/perspective/client/samplequickstart/ignition-101 the blue perspective loading screen appears and constantly moves from ‘Initializing client…’ to ‘Authenticating…’ to ‘Connecting…’ and then back to ‘Initializing Client’.

image
image343×518 39.6 KB

This error appears in the console:

WebSocket connection to ‘wss:///system/pws/samplequickstart/22636057?token=lzk9Jq00YShlBnUsZ7XNrapFFjutNkfwx_gY6LwgLtg’ failed:

3

I figured this out eventually. The issue is that the two machines are on different domains and so by default they can’t exchange cookies. Because my web app was hosted on a machine on a domain named nunya.int and ignition was hosted on a domain named nunya.com, the two pages couldn’t exchange cookies.

These settings in ignition.conf fixed the issue:
wrapper.java.additional.5=-Dignition.http.session.cookie.same-site.enabled=true
wrapper.java.additional.6=-Dignition.http.session.cookie.same-site.value=None

I wouldn’t recommend setting things up this way in production, but in production my web app server and my ignition server will both be on the nunya.com domain so I won’t have to.

2 Likes
4

Very useful topic! Helped me a lot! Thanks!

5

Is it secured to do it, because I face similar kind of issues. I wanted to embed the perspective page into our MS teams channel and sharepoint page.