Sometimes, it is necessary to hide Websocket WCS port behind proxy server, for example, for security reasons. A reverse proxy setup based on nginx and correcponding WCS setup examples are described below.
Reverse proxy setup with basic authentication for Websocket
1. Enable basic authentication by login and password in nginx settings
auth_basic "Restricted Area"; auth_basic_user_file /etc/nginx/.htpasswd;
2. Configure nginx to listen HTTPS (WebRTC publishing and playback work only through secure connection in the most browsers)
server { listen 443 ssl; ssl_certificate /etc/pki/tls/yourdomain/yourdomain.crt; ssl_certificate_key /etc/pki/tls/yourdomain/yourdomain.key; server_name wcs.yourdomain.com; server_tokens off; client_max_body_size 500m; proxy_read_timeout 10m; root /usr/share/nginx/html; ...
3. Configure proxy to WCS Websocket port (suppose nginx to be installed on the same server as WCS)
location /wss { if ($http_connection !~* "upgrade") { return 403; } if ($http_upgrade !~* "websocket") { return 403; } proxy_set_header Host $host; proxy_pass https://localhost:8443; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_read_timeout 86400; }
4. Restart nginx
5. Use the following Websocket URL to connect from browser
wss://login:password@wcs.yourdomain.com:443/wss
Reverse proxy setup with passing authentication token in cookies
Authentication parameters passing in URL is deprecated. However, browsers still does not support a ways to pass a custom headers (including Authorization header) when establishing Websocket connection. In this case, passing authentication token in cookies with cookie checking on nginx side may be alternative.
Client code
A client should set a cookie with authentication token before establishing websocket connection:
setCookie("AUTH", token, {secure: true, 'max-age': 3600}); Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) { ... });
A sample code to set or change cookies in browser
function setCookie(name, value, options = {}) { options = { path: '/', ...options }; if (options.expires instanceof Date) { options.expires = options.expires.toUTCString(); } let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value); for (let optionKey in options) { updatedCookie += "; " + optionKey; let optionValue = options[optionKey]; if (optionValue !== true) { updatedCookie += "=" + optionValue; } } document.cookie = updatedCookie; }
Cookie may be cleaned when websocket session is closed or failed
Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) { ... }).on(SESSION_STATUS.DISCONNECTED, function () { setCookie("AUTH", "", {'max-age': -1}); ... }).on(SESSION_STATUS.FAILED, function () { setCookie("AUTH", "", {'max-age': -1}); ... });
nginx configuration
1. Create a folder to store authentication tokens
mkdir -p /var/lib/nginx/tokens
and set nginx running user as owner
chown -R nginx /var/lib/nginx/token
2. Add tocken checking to nginx configuration file
location /wss { if (!-f /var/lib/nginx/tokens/$cookie_AUTH) { return 403; } proxy_set_header Host $host; proxy_pass https://localhost:8443; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_read_timeout 86400; }
3. Restart nginx
Usage
Before connecting some client, authentication token file should be created
touch /var/lib/nginx/tokens/ABCDEF1234565789 chown nginx /var/lib/nginx/tokens/ABCDEF1234565789
and the file name should be passed to the client to set it to cookie. A possible way to pass the token are out of the scope.
Known issues
For better security, Origin
header must be checked, and cookie should be applied from allowed domains only.
How to pass a real client IP address to WCS through the reverse proxy
If proxy is configured as described above, all the client sessions at WCS point will have IP address 127.0.0.1. This breaks debugging the stream publishing and playing problems because real connection source can not be identified, therefore, this does not allow to collect debug logs by client IP address. To workaround this issue, the parameter is added since build 5.2.743 which allows to pass real client IP address to WCS via HTTP header
ws.map_custom_headers=true ws.ip_forward_header=X-Real-IP
By default, proxy server should pass a real client IP address in X-Real-IP header.
Let's explore nginx and WCS configuration example to pass real client IP address.
nginx configuration
1. Add X-Client-IP header creation to Websocket proxy setup
location /wss { proxy_set_header Host $host; proxy_set_header X-Client-IP $remote_addr:$remote_port; proxy_pass https://localhost:8443; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_read_timeout 86400; }
2. Restart nginx
WCS configuration
1. Add the following parameters to flashphoner.properties file
ws.map_custom_headers=true ws.ip_forward_header=X-Client-IP
2. Restart WCS
Then, sessionId on WCS side will contain a real client IP address. Also, the header added by proxy server will be passed to backend server in REST hook /connect:
{ "nodeId" : "nziJYH0eu3D08Iu25sXbmwaCgSUuQyGL@192.168.130.39", "appKey" : "defaultApp", "sessionId" : "/192.168.23.83:65520/127.0.0.1:8443-8ef8fa79-a726-44d3-a20a-fe27b94bc51f", "useWsTunnel" : false, "useWsTunnelPacketization2" : false, "msePacketizationVersion" : 2, "useBase64BinaryEncoding" : false, "mediaProviders" : [ "WebRTC", "MSE", "WSPlayer" ], "clientVersion" : "0.5.28", "clientOSVersion" : "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36", "clientBrowserVersion" : "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36", "keepAlive" : false, "origin" : "https://wcs.yourdomain.com", "X-Client-IP" : "192.168.23.83:65520" }