Inline Frame Component unable to access most URLs

Hi, I’m trying to use the inline frame component, and it doesn’t seem to work with most url’s. While I can access localhost:8088 or https://www.youtube.com/embed/hYXUZeLw5ek (given in the inline frame example), I haven’t been able to reach any others. Is there something I’m missing regarding the component? Naturally adjusting the referrer policy hasn’t changed anything either.
Regards,
Andrew.

There’s currently an issue with the referrer policy you set not actually being used on the page, but the main drawback to iframes is that many websites will not support rendering if they’re inside a frame. This is done via the x-frame-options HTTP header, which all browsers support. If a given page returns a DENY or SAMEORIGIN value for x-frame-options, then your web browser will refuse to render the content inside the iframe component in your Perspective page.

There’s nothing we can do to change that - the entire point of x-frame-options is to (help) prevent a class of web security attacks called clickjacking.

1 Like

Is there an easy method to allow the exact opposite (embedding ignition views in iframes)? I know how to modify header filter in tomcat, but from googling, seems I’m a bit over my head re: Jetty

https://docs.inductiveautomation.com/display/DOC80/Gateway+Configuration+File+Reference#GatewayConfigurationFileReference-XFrameOptions

thanks, apologies for not RTFM

It’s a big manual, and those overrides are a fairly recent feature :slight_smile:

I made changes to my ignition.conf file, I added

wrapper.java.additional.4=-Dignition.http.header.x_frame_options.enabled=false wrapper.java.additional.5=-Dignition.http.header.x_frame_options.value=SAMEORIGIN

then restarted the gateway and the same result. I’ve been trying with https://www.google.com/ with no luck.
Are there any other changes that need to be made to get the iFrame to work?

These change the headers returned by the Ignition Gateway, and only affect your ability to embed the gateway/Perspective pages in an iframe.

Google’s landing page doesn’t allow itself to be embedded in an iframe, you can’t work around that, and so it doesn’t make a good test candidate.

What are you trying to achieve in the end here?

In the long run, some sort of remote camera stream (which is a nightmare to figure out) but at the moment I can bring up the camera web page in my web browser but in the iFrame it doesn’t work.

There’s a couple reasons this might not work.

Most common would be that the camera is accessed by HTTP but you are using HTTPS to view Perspective pages. You can’t embed unsecured content into a secured page. End of story.

Second would be that the camera is serving up pages with headers that prevent it. You’d have to be able to make a configuration change on the camera’s web server, not Ignition, to change this.

If the problem is the first, and the camera feeds can’t be secured, a workaround is to put a reverse proxy (nginx etc…) that does have HTTPS enabled in front of all the unsecured cameras.

2 Likes

I moved the screen with the iFrame to the Ignition system that I use https on. Now I’m not sure what headers would be preventing it and how to view them.

I got this working finally. I had to use the markdown component to get it working.

I know this is an old thread, but how did you do it with markdown? Can you paste the code please?

BR
/M

Hi Jacob, do you mind sharing how did you managed to get it working by using the markdown component?

I ended up using an iFrame, at one point I got something to work with a markdown, which was an iFrame, it had the <iframe src= tag in it.

It wasn't reliable so we finally paid a company to do the video streaming for us, we paid for broadcasting the video feed on a public URL and use an iFrame to bring that into our perspective web pages.