How to configure Nginx to proxy websocket and enable SSL?

Hello everyone,

I have configured my app to communicate via websocket (ws) protocol with app server.
I want to host the app over https. However, I'm getting the following error:

The page at 'https://verify.flexibilitaetsmarkt.de/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://80.158.47.134:7546/'.
This request has been blocked; this endpoint must be available over WSS.

I could somehow fix the above error using proxy websocket as follows:


server {

# server_mame verify.flexibilitaetsmarkt.de

root /home/ubuntu/alf_poc/app;
index index.html index.htm index.nginx-debian.html;

listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/verify.flexibilitaetsmarkt.de/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/verify.flexibilitaetsmarkt.de/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

location / {
proxy_http_version 1.1;
proxy_pass http://ws-backend;

proxy_set_header Host $host;
proxy_set_header Connection "upgrade";
proxy_set_header Upgrade $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}
}

upstream ws-backend {
# enable sticky session based on IP
ip_hash;

server 80.158.47.134:7546;
}


I'm getting the following error:
from browser:
WebSocket interface is active. Open WS connection to access RPC.

from browser console:
Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-4Su6mBWzEIFnH4pAGMOuaeBrstwJN4Z3pq/s1Kn4/KQ='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

any help to fix the issue?
many thanks