HTTPS breaks Socket.io/websocket connection between Rasa and Webchat widget

Rasa Open Source
1

Fault description
I have in my test environment Rasa chatbots running in docker containers. Chatbot’s fronted is a Botfront webchat widget in a website served by Apache2 in same server. I also installed Nginx as reverse proxy which then serves Apache virtual domains. Chatbot works directly from Apache http://testibotti2.omnia.fi:444/ and also via reverse proxy http://testibotti2.omnia.fi/ but when using https it fails i.e. chatbot widget is not shown https://testibot1.omnia.fi/

My environment

Server version: Apache/2.4.41 (Ubuntu)  
nginx version: nginx/1.18.0 (Ubuntu  
Ubuntu 18.04  
Docker version 20.10.9, build c2ea9bc  
docker-compose version 1.29.2, build 5becea4c

Config files

Nginx reverse proxy (I have commented out testibotti2 SSL part for testing purposes)

server {

   #root /var/www/html/;
   #index index.html index.htm;

   server_name testibot1.omnia.fi;
   #server_name 127.0.0.1
   index index.php index.html index.htm index.nginx-debian.html;
   root /var/www/public_html/testibot1;

   location \ {

   proxy_pass http://testibot1.omnia.fi:444;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $remote_addr;
   proxy_set_header Host $host;  
   # I have tried these parameters below but no success
   #proxy_redirect     off;
   #proxy_set_header X-Forwarded-Proto https;
   #proxy_set_header X-Forwarded-Proto $scheme;  
   # also these parameters I added after SSL installed, no success
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "upgrade";

   }

   access_log      /var/log/nginx/testibot1.fi_access.log;
   error_log       /var/log/nginx/testibot1.fi_error.log;


   listen 443 ssl; # managed by Certbot
   ssl_certificate /etc/letsencrypt/live/testibot1.omnia.fi/fullchain.pem; # managed by Certbot
   ssl_certificate_key /etc/letsencrypt/live/testibot1.omnia.fi/privkey.pem; # managed by Certbot
   include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
   ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {

   #root /var/www/html/;
   #index index.html index.htm;

   server_name testibotti2.omnia.fi;
   #server_name 127.0.0.1
   index index.php index.html index.htm index.nginx-debian.html;
   root /var/www/public_html/testibotti2;

   location \ {

   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $remote_addr;
   proxy_set_header Host $host;
   proxy_pass http://testibotti2.omnia.fi:444;
   }

   access_log      /var/log/nginx/testibotti2.fi_access.log;
   error_log       /var/log/nginx/testibotti2.fi_error.log;


#   listen 443 ssl; # managed by Certbot
#   ssl_certificate /etc/letsencrypt/live/testibot1.omnia.fi/fullchain.pem; # managed by Certbot
#   ssl_certificate_key /etc/letsencrypt/live/testibot1.omnia.fi/privkey.pem; # managed by Certbot
#   include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
#   ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = testibot1.omnia.fi) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


   listen 80;

   server_name testibot1.omnia.fi;
    return 404; # managed by Certbot


}

#server {
#    if ($host = testibotti2.omnia.fi) {
#        return 301 https://$host$request_uri;
#    } # managed by Certbot


#   listen 80;

#   server_name testibotti2.omnia.fi;
#   return 404; # managed by Certbot


#}

Botfront webchat widget configuration

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/rasa-webchat@0.11.12/lib/index.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Testisaitti 1
<div id="webchat"></div>
<script>
  WebChat.default.init({
    showFullScreenButton: true,
    selector: "#webchat",
    initPayload: "/tervetuloa",
    customData: {"language": "fi"}, // arbitrary custom data. Stay minimal as this will be added to the socket
    socketUrl: "http://testibot1.omnia.fi:5006",
    socketPath: "/socket.io/",
    embedded: false,
    title: "AsPa botti",
    subtitle: "Testibotti 1",
    inputTextFieldHint: "Vastaa kysymyksiin",
    profileAvatar:"robot_icon.png",
    params: {"storage": "session"} // can be set to "local"  or "session". details in storage section.
  })
</script>

</body>
</html>

This error I see on browser debug window

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<URL>'. This request has been blocked; the content must be served over HTTPS.

Nginx error log

paulii@vetbot7:/var/www/public_html/testibot1$ sudo tail -f /var/log/nginx/testibot1.fi_error.log
[sudo] password for paulii:
2021/10/18 10:04:50 [error] 3469367#3469367: *60 open() "/var/www/public_html/testibot1/omnia.fi.db" failed (2: No such file or directory), client: 89.248.173.145, server: testibot1.omnia.fi, request: "GET /omnia.fi.db HTTP/1.1", host: "testibot1.omnia.fi"
2021/10/18 10:04:50 [error] 3469367#3469367: *60 open() "/var/www/public_html/testibot1/omnia.fi.sqlite" failed (2: No such file or directory), client: 89.248.173.145, server: testibot1.omnia.fi, request: "GET /omnia.fi.sqlite HTTP/1.1", host: "testibot1.omnia.fi"
2021/10/18 10:05:26 [error] 3469367#3469367: *66 open() "/var/www/public_html/testibot1/favicon.ico" failed (2: No such file or directory), client: 91.153.58.139, server: testibot1.omnia.fi, request: "GET /favicon.ico HTTP/1.1", host: "testibot1.omnia.fi", referrer: "https://testibot1.omnia.fi/"
2021/10/18 10:05:52 [crit] 3469367#3469367: *81 SSL_do_handshake() failed (SSL: error:141CF06C:SSL routines:tls_parse_ctos_key_share:bad key share) while SSL handshaking, client: 35.203.251.54, server: 0.0.0.0:443
2021/10/18 10:05:54 [crit] 3469367#3469367: *90 SSL_do_handshake() failed (SSL: error:141CF06C:SSL routines:tls_parse_ctos_key_share:bad key share) while SSL handshaking, client: 107.178.200.215, server: 0.0.0.0:443
2021/10/18 10:07:15 [crit] 3469367#3469367: *103 SSL_do_handshake() failed (SSL: error:141CF06C:SSL routines:tls_parse_ctos_key_share:bad key share) while SSL handshaking, client: 107.178.237.2, server: 0.0.0.0:443
2021/10/18 11:31:10 [error] 3470484#3470484: *2 open() "/var/www/public_html/testibot1/5007" failed (2: No such file or directory), client: 91.153.58.139, server: testibot1.omnia.fi, request: "GET /5007 HTTP/1.1", host: "testibotti2.omnia.fi"
2021/10/18 11:31:12 [error] 3470484#3470484: *2 open() "/var/www/public_html/testibot1/5007" failed (2: No such file or directory), client: 91.153.58.139, server: testibot1.omnia.fi, request: "GET /5007 HTTP/1.1", host: "testibotti2.omnia.fi"
2021/10/18 11:31:21 [error] 3470484#3470484: *2 open() "/var/www/public_html/testibot1/5007" failed (2: No such file or directory), client: 91.153.58.139, server: testibot1.omnia.fi, request: "GET /5007 HTTP/1.1", host: "testibotti2.omnia.fi"
2021/10/18 11:32:21 [error] 3470484#3470484: *3 open() "/var/www/public_html/testibot1/favicon.ico" failed (2: No such file or directory), client: 91.153.58.139, server: testibot1.omnia.fi, request: "GET /favicon.ico HTTP/1.1", host: "testibotti2.omnia.fi", referrer: "https://testibotti2.omnia.fi/"
2

I got it working

this is needed in Ngingx reverse proxy config file

server {


   server_name testibot1.omnia.fi;
   index index.php index.html index.htm index.nginx-debian.html;
   root /var/www/public_html/testibot1;

   location / {

   proxy_pass http://testibot1.omnia.fi:444;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $remote_addr;
   proxy_set_header Host $host;

   }

   location /socket.io/ {
   proxy_pass http://testibot1.omnia.fi:5006/socket.io/;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection 'upgrade';
   proxy_set_header Host $host;
   proxy_cache_bypass $http_upgrade;
   }

and this is needed in webpage

socketUrl: “https://testibot1.omnia.fi”,

Big thanks Alexander Tarasov! Your idea lead me to the right path and after tens of tries I found right combination