{"id":2167,"date":"2018-02-13T15:35:09","date_gmt":"2018-02-13T06:35:09","guid":{"rendered":"https:\/\/www.codedojo.com\/?p=2167"},"modified":"2018-06-22T10:51:12","modified_gmt":"2018-06-22T01:51:12","slug":"how-to-get-your-unity-llapi-websocket-webgl-app-to-run-under-https-with-autossl-stunnel","status":"publish","type":"post","link":"https:\/\/www.codedojo.com\/?p=2167","title":{"rendered":"How to get your Unity LLAPI\/WebSocket WebGL app to run under https with AutoSSL & stunnel"},"content":{"rendered":"

<continuing my “blog about whatever random issue I last dealt with in the hopes that some poor soul with the same issue will google it one day” series><\/em><\/p>\n

\"\"<\/a><\/p>\n

The problem<\/h2>\n

So you made your new Unity webGL game using the LLAPI and it works fine from a http:\/\/ address.\u00a0 But when you try with https, even with a valid https cert being installed, you get this error:<\/p>\n

\"\"<\/a><\/p>\n

“Uncaught SecurityError: Failed to construct ‘WebSocket’: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.”<\/strong><\/p>\n

This is your browser saying “Look, the website is https, but don’t let that fool you; it’s using a normal old web socket to send data under the hood which isn’t encrypted, so don’t trust this thing with your credit card numbers”.<\/p>\n

Unity (at the time of this writing) has no internal support for what we really need to be using:\u00a0 a Secure Web Socket.\u00a0 So where http has https, ws has wss.\u00a0 So how do we connect securely if our unity-based server binary can’t serve wss directly?<\/p>\n

A little background info about CPanel & AutoSSL<\/h2>\n

Note: I’m using CentOS 7 on a dedicated server with WHM\/CPanel<\/em><\/p>\n

Setting up your website for proper SSL so it can have that wonderful green padlock used to be a painful and sometimes expensive ordeal.<\/p>\n

But no longer!\u00a0 Enter the magic of CPanel’s AutoSSL.\u00a0 (I think it’s using Let’s Encrypt under the hood as a plugin?)\u00a0 Behind the scenes, it will handle domain validation and setup everything for you.\u00a0 While it does need to renew your cert every three months, it’s free and automatic.\u00a0 Add four new domains?\u00a0 They will all get valid certs within a day or so, it’s great.<\/p>\n

We can use this same cert to make your websockets secure as long as they are hosted at the same domain.<\/p>\n

Setting up stunnel<\/h2>\n

This is an open source utility that is likely already included on your linux server box, if it isn’t, go install it with yum or something.<\/p>\n

It allows you to convert any socket into a secure socket.\u00a0 For example, if you have a telnet port at 1000, you could setup stunnel to listen at 1001 securely and relay all information back to 1000.<\/p>\n

The telnet connection has no idea what’s happening and sees no difference, but as long as the outside user can only access 1001, plain text information isn’t sent along the wire and one or both sides can be sure of the identity of who’s connecting.<\/p>\n

Depending on the stunnel settings, it might be setup like https where the client doesn’t have to have any certain keys (what we want here), or it could be like a ssh where the client DOES need a whitelisted key.<\/p>\n

A way to test a SSL port is to use OpenSSL from the command line on the host server via ssh.\u00a0 For example (keep in mind 443 is the standard https port your website is probably using):<\/p>\n

<at ssh prompt> openssl s_client -connect localhost:443\r\n\r\n<info snipped>\r\nsubject=\/OU=Domain Control Validated\/OU=PositiveSSL\/CN=host.toolfish.com\r\nissuer=\/C=US\/ST=TX\/L=Houston\/O=cPanel, Inc.\/CN=cPanel, Inc. Certification Authority\r\n---\r\nNo client certificate CA names sent\r\nPeer signing digest: SHA512\r\nServer Temp Key: ECDH, P-256, 256 bits\r\n---\r\nSSL handshake has read 4946 bytes and written 415 bytes\r\n---\r\nNew, TLSv1\/SSLv3, Cipher is ECDHE-RSA-AES256-GCM-SHA384\r\nServer public key is 2048 bit\r\nSecure Renegotiation IS supported\r\nCompression: NONE\r\nExpansion: NONE\r\nNo ALPN negotiated\r\nSSL-Session:\r\n Protocol : TLSv1.2\r\n<info snipped>\r\nStart Time: 1518495864\r\n Timeout : 300 (sec)\r\n Verify return code: 0 (ok)<\/pre>\n
Hitting enter after that will probably cause the website to an html error message because we didn’t send a valid request. That’s ok, it shows your website’s existing SSL stuff is working so we can move on.<\/p>\n
So first edit your \/etc\/stunnel\/stunnel.conf to something like this:<\/p>\n
pid = \/etc\/stunnel\/stunnel.pid\r\n\r\n#we won't screw with changing this because we don't want to relocate\/change permissions on our files right now\r\n#setuid = nobody\r\n#setgid = nobody\r\n\r\nsslVersion = all\r\noptions = NO_SSLv2\r\n\r\n#for testing purposes.. these should be removed later:\r\noutput = \/etc\/stunnel\/log.txt\r\nforeground = yes\r\ndebug = 7\r\n\r\n[websitename1]\r\naccept = 29000\r\nconnect = 80\r\ncert = \/var\/cpanel\/ssl\/apache_tls\/oversi.io\/combined\r\n\r\n[websitename2]\r\naccept = 30000\r\nconnect = 20000\r\ncert = \/var\/cpanel\/ssl\/apache_tls\/oversi.io\/combined<\/pre>\n
Next, still from the ssh prompt, run stunnel by typing stunnel<\/strong>.<\/p>\n
Because we have foreground=yes set above it will run it in the shell, showing us all output directly, instead of in the background like it normally would. (Ctrl-C to cause stunnel to stop and quit)<\/p>\n
Look for any issues or errors it reports.\u00a0 The .conf file I listed aboveshows how to set it up for two or more tunnels at once, you likely only need one of those settings.<\/p>\n
The “websitename1” part doesn’t matter or have to match anything.<\/p>\n
The SSL cert is the most important setting.\u00a0 You need to give it your private & public & CA info in\u00a0 the same file.<\/p>\n
Now, initially, you might try to setup your keys using the files in ~\/ssl\/keys and ~\/ssl\/certs but they seem to not have everything all in one nice file including the CA certs.\u00a0 I figured out ‘bundled’ ones already exist in a cpanel directory so I linked straight to them there.\u00a0 (replace oversi.io with your website name)<\/p>\n
If stuff worked, you should be able to test your SSL’ed port with OpenSSL again.\u00a0 In the example above under “websitename1” I told it to listen at\u00a029000 and send to port 80, for no good reason.<\/p>\n
So to test from a remote computer we can do:<\/p>\n
 (you did open those ports in your firewall so outside people can connect, right?) <\/em><\/p>\n
C:\\Users\\Seth>openssl s_client -connect oversi.io:29000\r\nLoading 'screen' into random state - done\r\nCONNECTED(00000270)\r\ndepth=2 \/C=GB\/ST=Greater Manchester\/L=Salford\/O=COMODO CA Limited\/CN=COMODO RSA Certification Authority\r\nverify error:num=20:unable to get local issuer certificate\r\nverify return:0\r\n---\r\nCertificate chain\r\n 0 s:\/CN=oversi.io\r\n i:\/C=US\/ST=TX\/L=Houston\/O=cPanel, Inc.\/CN=cPanel, Inc. Certification Authority\r\n 1 s:\/C=US\/ST=TX\/L=Houston\/O=cPanel, Inc.\/CN=cPanel, Inc. Certification Authority\r\n i:\/C=GB\/ST=Greater Manchester\/L=Salford\/O=COMODO CA Limited\/CN=COMODO RSA Certification Authority\r\n 2 s:\/C=GB\/ST=Greater Manchester\/L=Salford\/O=COMODO CA Limited\/CN=COMODO RSA Certification Authority\r\n i:\/C=SE\/O=AddTrust AB\/OU=AddTrust External TTP Network\/CN=AddTrust External CA Root\r\n---\r\nServer certificate\r\n-----BEGIN CERTIFICATE-----\r\n<snipped>\r\n-----END CERTIFICATE-----\r\nsubject=\/CN=oversi.io\r\nissuer=\/C=US\/ST=TX\/L=Houston\/O=cPanel, Inc.\/CN=cPanel, Inc. Certification Authority\r\n---\r\nNo client certificate CA names sent\r\n---\r\nSSL handshake has read 5129 bytes and written 453 bytes\r\n---\r\nNew, TLSv1\/SSLv3, Cipher is DHE-RSA-AES256-SHA\r\nServer public key is 2048 bit\r\nSecure Renegotiation IS supported\r\nCompression: NONE\r\nExpansion: NONE\r\nSSL-Session:\r\n Protocol : TLSv1\r\n<snipped>\r\n Key-Arg : None\r\n Start Time: 1518497616\r\n Timeout : 300 (sec)\r\n Verify return code: 20 (unable to get local issuer certificate)\r\nread:errno=10093<\/pre>\n
Despite the errno=11093 and return code 20 errors, it’s working and properly sending our CA info (“cPanel, Inc. Certification Authority”).<\/p>\n
Or, easier, let’s just use the browser instead for this one since we’re connecting to port 80 if it works in this case:<\/p>\n
https:\/\/oversi.io:29000<\/p>\n
\"\"<\/a><\/p>\n
It worked, see the green padlock?\u00a0 Oh, ignore the error the website is sending, I assume that’s apache freaking out because the URL request is different from what it’s expecting (http vs https or the port difference?) so it can’t match up the virtual domain.<\/p>\n
From here, you should probably remove the debug options in the .conf (including the foreground=yes) and set it up to run automatically.\u00a0 I just placed “stunnel” in my\u00a0\/etc\/rc.d\/rc.local file. (this gets run at boot)<\/p>\n
Actually connecting using the Unity LLAPI<\/h2>\n
Congratulations, everything is setup on the server and you’re sure your web socket port is listening and ready to go.<\/p>\n
While your server binary doesn’t need to change anything, your webgl client does.<\/p>\n
You now need to connect to WSS instead of WS.\u00a0 Example:<\/p>\n
try\r\n {\r\n   _connectionID = NetworkTransport.Connect(_hostID, \"wss:\/\/oversi.io\", portNum, 0, out error);\r\n }\r\n catch (System.Exception ex)\r\n {\r\n   Debug.Log(\"RTNetworkClient.Connect> \" + ex.Message);\r\n }<\/pre>\n
That’s pretty much it.\u00a0 If someone doesn’t care about https and decides to play over http, it still works fine. (internally the websocket code will still connect via wss)<\/p>\n
https:\/\/www.codedojo.com\/wp-content\/uploads\/2018\/02\/oversi.mp4<\/a><\/video><\/div>\n
If you want to see it in action, check out my webgl llapi multiplayer test project https:\/\/www.oversi.io<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<continuing my “blog about whatever random issue I last dealt with in the hopes that some poor soul with the same issue will google it one day” series> The problem So you made your new Unity webGL game using the LLAPI and it works fine from a http:\/\/ address.\u00a0 But when you try with https, […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,21],"tags":[],"class_list":["post-2167","post","type-post","status-publish","format-standard","hentry","category-tech-tips","category-unity"],"_links":{"self":[{"href":"https:\/\/www.codedojo.com\/index.php?rest_route=\/wp\/v2\/posts\/2167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedojo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedojo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedojo.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedojo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2167"}],"version-history":[{"count":11,"href":"https:\/\/www.codedojo.com\/index.php?rest_route=\/wp\/v2\/posts\/2167\/revisions"}],"predecessor-version":[{"id":2228,"href":"https:\/\/www.codedojo.com\/index.php?rest_route=\/wp\/v2\/posts\/2167\/revisions\/2228"}],"wp:attachment":[{"href":"https:\/\/www.codedojo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedojo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedojo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}