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

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.

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

https://caddyserver.com Download & documentation of caddy
WebIQ - Communicate with ctrlX Rest API ctrlX Forum HowTo article

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 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 Caddyfile, caddy-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.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

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)