How-To display multiple machine HMIs in browser with kiosk mode

History

• 11 March 2026 url-manager.htm improve delayed start

• 13 Feb. 2026 initial version

Introduction

This video shows the attached example HTML file at startup (waiting until all connected devices are up and running. You can )

To display pages from different machines on a single device, the HTML element iframe is used. The following two options are often required for machine web visualizations:

• Displaying one or more sub pages in the machine HMI,
  e.g., displaying the 3D Viewer app or the ctrlX diagnostics page in an iframe
  

  

• Using a single HMI device for multiple controllers

  When the browser is started in kiosk mode, there is no tab navigation, so only one URL can be displayed. This can be circumvented by defining a parent page that functionally replaces the browser's tab navigation.
  

  

Browser Security Restrictions

Basic information

The restrictions for iframes are primarily focused on security (protection against cross-site scripting, clickjacking, and data theft) and secondarily on user-friendliness and data protection. Commissioning engineers of web HMIs that use iframes must be aware of and consider these restrictions to avoid problems and ensure a functioning and secure application.

• Preventing Displaying iframes

  The embedded page (child page) can completely prohibit display in the parent page's iframe.

• Untrusted SSL/TLS Certificates

  • If an embedded HTTPS page uses an untrusted SSL/TLS certificate, the browser either blocks it completely or displays a warning.

    If the URL is accessed in an iframe, most browsers do not display the warning page shown below; the page often remains blank. Clicking the "Proceed to … (unsafe)" (1) link displays the page despite the browser's security concerns.
    

    

• Machines typically use private IP addresses such as 192.168.1.1. These use self-signed certificates, which are not trusted by browsers.

• The website uses techniques that do not work in the iframe. For example, HELIO 25.3 can only be used in an iframe if the parent page has the same URL.

  

Display web pages with Self-Signed Certificates

As mentioned earlier, web browsers do not trust self-signed certificates. However, there are several ways to still use the iframe technique:

1. All websites have the same URL

2. Configure browser to trust certificates

3. Instruct browser to ignore certificate errors

4. Open all URLs in browser tabs

1. All websites have the same URL

For example, by using a reverse proxy server. See the article: howto-view-content-from-multiple-web-servers-in-one-web-page

In this case, the user can mark the certificate as trusted each time the browser is started. To avoid this, the certificate should be imported as described in the next point.

2. Configure browser to trust certificates

Customers can trust self-signed certificates. To do this, you must:

- create such a certificate and assign IP addresses
- upload customer certificates to ctrlX
- trust the root certificate that issued the certificates in the browser

Although ctrlX has uploaded customer certificates, these are delivered late or sometimes not at all. Therefore, this option often doesn't work.

For more information how to create and trust certificates see: how-to-make-an-https-connection-with-ctrlx-os-web-server

3. Instruct browser to ignore certificate errors

This option can be configured as follows:

• WebPanel WR21xx.1 in the Kiosk App

  

  HINT: Since the WR21xx.1 does not support the protocol type file://, the file must be stored on a web server and read from there.

  • Windows 11 PC

    Start Chrome/Edge with command line parameter: --ignore-certificate-errors

    

    The message is misleading in my opinion, since the flag works. It should read more like this: "You are using a flag that compromises security. Stability and security will suffer."

  • Firefox does not support this option

Since this disables the browser's security management, this option should only be used in test environments and secure networks.

4. Open all URLs in browser tabs

   The following option can also be used in a test environment. Open all linked URLs in different tabs of the browser and confirm message "Your connection is not private" until the URL is displayed. Than display file url-manager.htm in the browser.

   Browsers save the manually configured trust settings but then forget them again. I haven't yet figured out under what conditions the browsers delete the setting.

Displaying one or more sub pages in the machine HMI

This only works if the conditions mentioned in the chapter "Display web pages with Self-Signed Certificates" are met. e.g. a ctrlX https page can also be displayed in the CoDeSys http WebVisu.

Using a single HMI device to display multiple URLs

Parent HTML page: url-manager.htm

For easy setup, the file url-manager.htm can be used. It has the following features:

• Delayed start if all URLs are reachable. Once a connection has been established, the window can be manually closed. As long as a connection has not yet been established, it cannot be displayed. (Button is disabled)
  

  

Two options for switching between the configured web pages are included:

1. Header with buttons for switching between web pages

2. Small, positionable button that opens a toggle dialog.

3. Easy parameterization of URLs, colors, message texts and toggle options

• In the first <style> section of the HTML file, you can set colors, menu height and the position of the overlay button.

  

• In the first <script> section of the HTMLfile, you can set the URLs, selection type, messages and delays.

  

Loading the parent HTML file

On Windows PCs, the file can be saved on the device and viewed from there. To view a local file, use file://<path>/<filename>

Windows C:\html\url-manager.htm

• URL: file:///C:/html/url-manager.htm

• Use Windows file to copy the html file to the hard drive of your computer

WR21xx.1

It does not support displaying local files, therefore the file must be stored on a web server. This could be, for example, the web servers of WebVisu, HELIO or WebIQ.

Upload url-manager.htm to web server:

• WebVisu & HELIO

  • In ctrlX web UI start "Manages app data"
    

    

    • HELIO path: helio> assets
      URL: https://192.168.1.1/helio/assets/url-manager.htm

    • WebVisu path (X3): plc>run>linux-gcc-aarch64>data>visu

      WebVisu path (X5,X7,..): plc>run>linux-gcc-x64>data>visu
      URL: https://192.168.1.1/webvisu/url-manager.htm

  • Press upload button and select url-manager.htm

  • HINT: HELIO 25.3 is only running in an iframe, if parent document has the same URL as HELIO project

• WebIQ

  • Copy url-manager.htm to %appdata%\webiq-designer\workspace
    Adapt path, if you configured a different path for for WebIQ

  • File is uploaded with WebIQ project

  • https://192.168.1.7/webiq/<projectFolder>/url-manager.htm
    Replace <projectFolder> with the folder name of the uploaded project