How to access websocket in https?

Question

The below configurations were done to connect ws over SSL.

Apache 2.4 server used

In httpd.conf

<VirtualHost *:8060>
RewriteEngine On
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteRule ^/BizMessenger/(.*)    ws://xxx:8070/BizMessenger/$1 [P,L]
ProxyPass /BizMessenger  ws://xxx:8070/BizMessenger/hello/chat
</VirtualHost>

Error: The below error arises in browser during the request action.

biz.js.xhtml?ln=js:49 Mixed Content: The page at 'https://xxx/main' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://xxx:8060/BizMessenger/hello/chat'. This request has been blocked; this endpoint must be available over WSS.send_message @ biz.js.xhtml?ln=js:49 biz.js.xhtml?ln=js:49 Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS. at send_message (https://xxx/javax.faces.resource/biz.js.xhtml?ln=js:49:17)
at init (https://xxx/javax.faces.resource/biz.js.xhtml?ln=js:44:5)
at autochatlogin (https://xxx/javax.faces.resource/svmchat.js.xhtml?ln=js:85:1)
at HTMLButtonElement.onclick (https://xxx/main:1201:283)

Chrome throws a shield in the address bar to load unsafe scripts

Answer 1

Below configuration were done in httpd-ssl.conf under

 RewriteEngine On
 RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC,OR]
 RewriteCond %{HTTP:CONNECTION} ^Upgrade$ [NC]
 # the description of below code
 #RewriteRule webcontext  ws://prpxy server ip:port(redirecting port in vhost)
 RewriteRule ^/BizMessenger/(.*)    ws://192.168.18.31:8060/BizMessenger/$1 [P,L]

V_host.conf file

<VirtualHost *:8060>
RewriteEngine On
RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC,OR]
RewriteCond %{HTTP:CONNECTION} ^Upgrade$ [NC]
# the description of below code
#RewriteRule webcontext  ws://appserver ip:port
RewriteRule ^/BizMessenger/(.*)    ws://192.168.18.50:8070/BizMessenger/$1 [P,L]
</VirtualHost>

websocket connection request: For ssl : wss://192.168.18.31/BizMessenger/hello/chat