HmiGuide_0-1675349706280.png

HowTo view content from multiple web servers in one web page (reverse proxy)

HmiGuide
Community Moderator
Community Moderator
History

31 Oct 2023  Extend caddy config file for usage of WebIQ Designer PC license
15 Sept 2023 Update caddy config file for easy usage with WebIQ
13 Feb 2023 Disable link to ctrlX  CORE web page in tiger iframe
08 Feb 2023 Initial release

Prerequisites
  • WebIQ Designer version 2.13 or higher (project is created with 2.13)
  • IDE-V-0112 or higher (used in WebIQ demo project)
  • Basic knowledge of WebIQ Designer
  • Basic JavaScript and JSON know how
  • Basic knowldge ctrlX REST API
  • Installation of package Axios see (WebIQ-Communicate-with-ctrlX-Rest-API)

Introduction

Viewing data from different sources, is severely limited by the web browser due to the many security risks. Keywords here are e.g. cross side scripting, certificate handling and mixing of http and https protocols. These are common browser restriction, which are identical for all web pages, nothing special for ctrlX CORE and WebIQ.

If you want to integrate the IDE app of the ctrlX CORE into a WebIQ project, this does not work, because the data are retrieved from different web servers.

The solution for this problem is to use a reverse proxy server. A reverse proxy server collects data from multiple web servers into a single URL. Therefore for the browser the data seems to come from a single source. This means the security restriction are not used anymore.

Setup with multiple web servers

Many application on ctrlX CORE are using the build in reverse proxy server, but WebIQ right now not.
Security restrictions are active. Mixed protocols http and https.

WebIQ without reverse proxy serverWebIQ without reverse proxy server

Setup with multiple web servers and a reverse proxy.

No security restrictions are active. WebIQ http protocol is converted to https by the reverse proxy server.

Helpful links
Workaround for WebIQ runtime

The ctrlX CORE has a reverse proxy server built in. However, this can only be used if the application on ctrlX CORE (e.g. WebIQ) has configured the use of this.

Since WebIQ V2.14 the reverse proxy is used, by the URL https://<ctrlx-IP>/webiq/<project-name>. (e.g., https://192.168.1.1/webiq/myproject). While only the WebIQ runtime, but not the Designer, can use the reverse proxy, you should use caddy installed on PC for developement.

The reverse proxy "caddy" build in ctrlX is available for many different operating systems, so you might can install it on your HMI device and also on the Engineering PC.

WebIQ with reverse proxy server on ctrlXWebIQ with reverse proxy server on ctrlX

The workaround is

  • working for running WebIQ projects
  • not working for WebIQ Designer and Runtime Manager

The revers proxy server caddy is running in ctrlX CORE. We will use it on the PC for this workaround, too.

Install and start caddy

You can start caddy manually or automatically. To start caddy automatically, it must be set up as a Windows service. The Windows service starts caddy automatically when you turn on your PC.

  • Download caddy from: caddyserver.com into C:\caddy (or a directory you prefer)
    • platform Windows amd64 (no extra feature necessary)
  • Rename downloaded file to caddy.exe
  • Download attachment (see end of article) cfg-caddy.zip into C:\caddy
  • Unzip cfg-caddy.zip into C:\caddy (contains Caddyfilecaddy-run.bat, caddy-manual.bat and caddy-service.bat)
  • Change all occurrences of 192.168.1.1 to IP address of your ctrlX CORE in file Caddyfile
Start caddy manually
  • Double click caddy-run.bat to start the reverse proxy server
  • Alternatively you can use caddy-manual.bat which the 4 options shown below:

    Screen shoot of caddy-manual.batScreen shoot of caddy-manual.bat
Start caddy automatically
  • Double click C:\caddy\caddy-service.bat mange caddy as service (admin rights are requested)
  • You can add, delete and restart the caddy service

Screen shoot of caddy-service.batScreen shoot of caddy-service.bat

Edit configuration file Caddyfile

There are 2 section in the config file.

  • # ctrlX CORE (192.168.1.1) for WebIQ v2.13 or lower
  • # ctrlX CORE (192.168.1.1) for browser preview

Comment lines starts with #. When your ctrlX CORE has a different IP address than 192.168.1.1 change all occurrences of the IP to your IP address.  (see comments ToDo: Adapt IP ...) For more information on the configuration see home page of caddy.

Hint: When caddy is not working anymore (after 3-4 hours) you need to restart it, than it is working again.

{
	auto_https disable_redirects
}

# Using WebIQ Designer ctrlX license
# ctrlX CORE (192.168.1.1) show published project
127.0.0.1:8081, localhost:8081 {
	# redirect to webIQ server with port fowarding
	handle_path /webiq/cx/* {
		# use https://localhost:8081/webiq/<project_folder>/
		# "/" MUST be entered at end of URL
		# ToDo: Adapt IP 192.168.1.1 to your IP address 
		reverse_proxy http://192.168.1.1:10123
	}

	route * {
		reverse_proxy {
			# ToDo: Adapt IP to your IP address 
			to https://192.168.1.1:443
			transport http {
				tls
				tls_insecure_skip_verify
			}
		}
	}
}

# Using WebIQ Designer ctrlX license
# ctrlX CORE (192.168.1.1) show workspace project by browser preview
127.0.0.1:8082, localhost:8082 {
	# redirect to webIQ server with port fowarding
	handle_path /webiq/cx/* {
		# use https://localhost:8081/webiq/<project-name>
		# "/" MUST be entered at end of URL
		# ToDo: Adapt port if you changed the default port 10124 
		reverse_proxy http://localhost:10124
	}

	route * {
		reverse_proxy {
			# change URL to your ctrlX
			# ToDo: Adapt IP 192.168.1.1 to your IP address    
			to https://192.168.1.1:443
			transport http {
				tls
				tls_insecure_skip_verify
			}
		}
	}
}

# Using WebIQ Designer Pc license
# ctrlX CORE (virtual) show workspace project by browser preview
127.0.0.1:8080, localhost:8080 {
	handle_path /webiq/pc/* {
		# use https://localhost:8080/webiq/pc
		# "/" MUST be entered at end of URL
		# ToDo: Adapt port if you changed the default port 10124 
				reverse_proxy {
			to http://localhost:10130
		}
	}

	route * {
		reverse_proxy {
			# ToDo: Adapt IP to your IP address 
			to https://127.0.0.1:8443
			transport http {
				tls
				tls_insecure_skip_verify
			}
		}
	}
}
Display WebIQ browser preview (Port 8080) (Designer license from PC)
  • Start ctrlX CORE virtual
  • Start caddy
  • WebIQ Designer>Preferences>Designer Settings: Change port form 10123 to 10130
  • Press button Apply
  • Load project RevProxy into WebIQ Designer
  • Create a favorite in your web browser with: https://localhost:8080/webiq/cx/
  • Hint: Be sure that the URL ends with “/”, otherwise it is not working
Display WebIQ browser preview (Port 8082) (Designer license from ctrlX)
  • Start caddy
  • WebIQ Designer>Preferences>Designer Settings: Change port form 10123 to 10124
  • Press button Apply
  • Load project RevProxy into WebIQ Designer
  • Create a favorite in your web browser with: https://localhost:8082/webiq/cx/
  • Hint: Be sure that the URL ends with “/”, otherwise it is not working
Display published project (Port 8081) WebIQ 2.13 or older 
(Designer license from ctrlX)
  • Start caddy
  • Start project with WebIQ Runtime Manger
  • Create a favorite in your web browser with: https://localhost:8081/webiq/cx/
  • Hint: Be sure that the URL ends with “/”, otherwise it is not working
     
Display ctrlX web page

Like the WebIQ project, you can use the reverse proxy URL (https://localhost:8081) to display the ctrlX CORE web page, too.

WebIQ example project

Download attachment demo-reverseProxy-*.zip and start caddy. You can:

  • To display WebIQ browser preview (Port 8082)
    • You must open the project in your WebIQ Designer
  • to display published project (Port 8081)
    • Upload project to the ctrlX CORE 
    • Start project with WebIQ Runtime Manger

The WebIQ project reads host and port from its own URL (via JS document.location.host) and uses this to create the URL string for the tiger. Therefore nothing has to be adjusted if the IP address of the ctrlX CORE changes. Only username and password have to be entered at runtime to enable login into tiger.

The example projects is very basic. It does the following:

  • Get authentication token using axios library via ctrlX REST API
  • Sets the source attribute of an iframe to display tiger app.

To implement the example in your project, you must install axios package. (WebIQ-Communicate-with-ctrlX-Rest-API)

Screen shoot of demo WebIQ programScreen shoot of demo WebIQ program

Must Read
Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist