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.
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)
