WIP - show warning if multihost is allowed

Author: mvollmer

pkg/static/login.html

@@ -21,6 +21,14 @@
     <span id="banner-message" class="pf-v5-c-alert__title"></span>
   </div>
 
+  <div id="multihost-warning" class="pf-v5-c-alert pf-m-info pf-m-inline dialog-error" aria-label="inline danger alert" hidden="true">
+    <svg fill="currentColor" viewBox="0 0 448 512" aria-hidden="true">
+      <path d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z" />
+    </svg>
+    <p id="multihost-message" class="pf-v5-c-alert__title"></p>
+    <button id="multihost-get-me-there" class="pf-v5-c-button">Go there</button>
+  </div>
+
   <span id="badge"></span>
 
   <div class="container" id="main">

pkg/static/login.js

@@ -338,21 +338,41 @@ import "./login.scss";
         event.stopPropagation();
     }
 
-    function boot() {
-        window.onload = null;
+    function deal_with_multihost() {
+        // If we are currently logged in to some machine, but still
+        // end up on the login page, we are about to load resources
+        // from two machines into the same browser origin.
 
-        if (!environment.page.allow_multi_host) {
-            // If we are currently logged in, we do not want to allow
-            // another login to a different machine. So we redirect to
-            // the current login.
+        const cur_machine = window.localStorage.getItem("current-machine");
 
-            const cur_machine = window.localStorage.getItem("current-machine");
-            if (cur_machine == "localhost" && window.location.pathname.startsWith("/=")) {
+        // Protect against outdated cur_machine values.
+        if (cur_machine == "localhost" && !window.location.pathname.startsWith("/="))
+            return;
+        if (cur_machine && cur_machine != "localhost" && window.location.pathname.startsWith("/=" + cur_machine))
+            return;
+
+        function redirect_to_current_machine() {
+            if (cur_machine == "localhost")
                 login_reload("/");
-            } else if (cur_machine && !window.location.pathname.startsWith("/=" + cur_machine)) {
+            else
                 login_reload("/=" + cur_machine);
+        }
+
+        environment.page.allow_multi_host = true; // XXX
+
+        if (cur_machine) {
+            if (!environment.page.allow_multi_host)
+                redirect_to_current_machine();
+            else {
+                id("multihost-message").textContent = format(_("You are already connected to '$0' in this browser session. Connecting to other hosts will allow them to execute arbitrary code on each other. Please be careful."), cur_machine);
+                id("multihost-get-me-there").addEventListener("click", redirect_to_current_machine);
+                show('#multihost-warning');
             }
         }
+    }
+
+    function boot() {
+        window.onload = null;
 
         translate();
         if (window.cockpit_po && window.cockpit_po[""]) {
@@ -361,6 +381,8 @@ import "./login.scss";
                 document.documentElement.dir = window.cockpit_po[""]["language-direction"];
         }
 
+        deal_with_multihost();
+
         setup_path_globals(window.location.pathname);
 
         /* Determine if we are nested or not, and switch styles */
@@ -420,6 +442,7 @@ import "./login.scss";
                 oauth_auto_login();
             }
         } else if (logout_intent) {
+            window.localStorage.removeItem("current-machine");
             show_login(logout_reason);
         } else if (need_host()) {
             show_login();

pkg/static/login.scss

@@ -354,14 +354,14 @@ label.checkbox {
   display: none;
 }
 
-.login-pf #banner {
+.login-pf #banner, .login-pf #multihost-warning {
   margin-block: 1rem 0.5rem;
   margin-inline: 0;
   grid-area: banner;
   inline-size: 100%;
 }
 
-#banner-message {
+#banner-message, #multihost-message  {
   white-space: pre-wrap;
   max-block-size: 12em;
   overflow: auto;