Example ws doesn't work on https

[ralyodio]

Uncaught DOMException: The operation is insecure.

I get this in firefox when running the example code:

$ MOJO_LISTEN=http://*:5000 morbo index.pl             

use Mojolicious::Lite -signatures;

# Render template "index.html.ep" from the DATA section
get '/' => sub ($c) {
  $c->render(template => 'index');
};

# WebSocket service used by the template to extract the title from a web site
websocket '/title' => sub ($c) {
  $c->on(message => sub ($c, $msg) {
    my $title = $c->ua->get($msg)->result->dom->at('title')->text;
    $c->send($title);
  });
};

app->start;
__DATA__

@@ index.html.ep
% my $url = url_for 'title';
<script>
  const ws = new WebSocket('<%= $url->to_abs %>');
  ws.onmessage = function (event) { document.body.innerHTML += event.data };
  ws.onopen    = function (event) { ws.send('https://mojolicious.org') };
</script>

I'm using an nginx proxy infront of mojo but web socket should be wss i think

[ralyodio]

This fixed it: $ MOJO_LISTEN=http://*:5000 MOJO_REVERSE_PROXY=1 morbo index.pl

[hollie]

I've been running into this issue too while running a Mojolicious app behind a Caddy reverse proxy. This proxy sets the header X-Forwarded-Proto: https and I did not understand why Mojolicious was not picking up that information to translate the websocket URL to a secure wss instead of a plain ws.

The suggestion of @ralyodio in this ticket pointed me to the final solution.

The Mojolicious documentation explains that you have to set {hypnotoad => {proxy => 1}};. With that setting configured my application is fully reachable behind the Caddy proxy.

I also verified that this setting does in fact ensure that the X-Forwarded-Proto header is processed. When I approach the Mojolicious app without the proxy then the websocket URL is regular 'ws' as expected.

[ralyodio]

Is this also an issue on mojojs? I'm switching from Perl to node version and haven't tested it yet

[kraih]

Nothing here is an issue, this is a feature you need to enable, and it's documented clearly for both, Mojolicious and mojo.js.

[hollie]

Yes I agree there is no issue. I just wanted to share my experience for others who are searching for Mojolicious + Caddy + websocket secure.

After I found out I needed to set the parameter as is specified in the documentation all is working as expected for me.

[jberger]

There are several ways to enable reverse proxy mode, including command line switches for all the servers except hypnotoad, the hypnotoad config parameter, and the environment variable MOJO_REVERSE_PROXY=1 (or MOJO_TRUSTED_PROXIES if you want to get into more detail for more specialized cases). See more at https://docs.mojolicious.org/Mojolicious/Guides/Cookbook#Reverse-proxy

The situation is similar in mojojs: https://mojojs.org/docs/Cookbook.md#reverse-proxy