webrepl: Allow the page to run from the device (over HTTP).

The device will respond to a non-WS request with a simple page that loads
websocket_content.js from a static host (http or https). However, even
if the resources are https, the page is still http and therefore allows
requesting to a WS (not WSS) websocket on the device.

Updated the warning about HTTPS and the default-ws-URL logic.

Signed-off-by: Jim Mussared <[email protected]>

Author: jimmo

.gitignore

@@ -1 +1 @@
-# empty file
+webrepl_content.js

LICENSE

@@ -2,6 +2,7 @@ The MIT License (MIT)
 
 Copyright (c) 2016 Damien P. George
 Copyright (c) 2016 Paul Sokolovsky
+Copyright (c) 2022 Jim Mussared
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

make_html_js.py

@@ -0,0 +1,16 @@
+#!/usr/bin/env python3
+
+# This script transforms webrepl.html into a javascript string wrapped in
+# document.write, which allows the device to serve a very simple page
+# containing
+# <base href="https://url-to-static-host/"></base>
+# <script src="webrepl_content.js"></script>
+
+import datetime
+
+with open("webrepl.html", "r") as f_in:
+    with open("webrepl_content.js", "w") as f_out:
+        f_out.write("// {}\n".format(datetime.datetime.now().isoformat()))
+        f_out.write("document.write(\"")
+        f_out.write(f_in.read().replace("\"", "\\\"").replace("\n", "\\n"))
+        f_out.write("\");")

webrepl.html

@@ -10,7 +10,7 @@
 
 <div style="display:inline-block; vertical-align:top;">
 <form>
-<input type="text" name="webrepl_url" id="url" value="ws://192.168.4.1:8266/" />
+<input type="text" name="webrepl_url" id="url" value="" />
 <input type="submit" id="button" value="Connect" onclick="button_click(); return false;" />
 </form>
 <div id="term">

webrepl.js

@@ -16,9 +16,11 @@ function calculate_size(win) {
 (function() {
     window.onload = function() {
       var url = window.location.hash.substring(1);
-      if (url) {
-        document.getElementById('url').value = 'ws://' + url;
+      if (!url) {
+          // pre-populate the url based on the host that served this page.
+          url = document.location.host;
       }
+      document.getElementById('url').value = 'ws://' + url;
       var size = calculate_size(self);
       term = new Terminal({
         cols: size[0],
@@ -41,9 +43,8 @@ function show_https_warning() {
         var warningDiv = document.createElement('div');
         warningDiv.style.cssText = 'background:#f99;padding:5px;margin-bottom:10px;line-height:1.5em;text-align:center';
         warningDiv.innerHTML = [
-            'At this time, the WebREPL client cannot be accessed over HTTPS connections.',
-            'Use a HTTP connection, eg. <a href="http://micropython.org/webrepl/">http://micropython.org/webrepl/</a>.',
-            'Alternatively, download the files from <a href="https://github.com/micropython/webrepl">GitHub</a> and run them locally.'
+            'The WebREPL client cannot be accessed over HTTPS connections.',
+            'Load the WebREPL client from the device instead.'
         ].join('<br>');
         document.body.insertBefore(warningDiv, document.body.childNodes[0]);
         term.resize(term.cols, term.rows - 7);
@@ -71,7 +72,12 @@ function update_file_status(s) {
 }
 
 function connect(url) {
-    window.location.hash = url.substring(5);
+    var hostport = url.substring(5);
+    if (hostport === document.location.host) {
+        hostport = '';
+    }
+
+    window.location.hash = hostport;
     ws = new WebSocket(url);
     ws.binaryType = 'arraybuffer';
     ws.onopen = function() {