From e1f8232bc90c77e5746f6f8356613962021cc862 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 7 Oct 2022 14:34:27 +0200
Subject: [PATCH] Block user interaction when fallback error shows

When this error is shown, something has gone very wrong. It shows when
a bug in the JavaScript causes an uncaught error. In these scenarios we
dont want the user to be able to interact with the GUI or the remote
session, since we can't guarantee that things work.
---
 app/error-handler.js | 10 ++++++++++
 app/styles/base.css  |  4 ++++
 2 files changed, 14 insertions(+)

diff --git a/app/error-handler.js b/app/error-handler.js
index e9ce68e..a68fe92 100644
--- a/app/error-handler.js
+++ b/app/error-handler.js
@@ -50,6 +50,16 @@ function handleError(event, err) {
 
         document.getElementById('noVNC_fallback_error')
             .classList.add("noVNC_open");
+
+        // Remove focus from the currently focused element in order to
+        // prevent keyboard interaction from continuing
+        document.activeElement.blur();
+
+        // Don't let any element be focusable when showing the error
+        let keyboardFocusable = 'a[href], button, input, textarea, select, details, [tabindex]';
+        document.querySelectorAll(keyboardFocusable).forEach((elem) => {
+            elem.setAttribute("tabindex", "-1");
+        });
     } catch (exc) {
         document.write("noVNC encountered an error.");
     }
diff --git a/app/styles/base.css b/app/styles/base.css
index b7840c5..59fd47b 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -287,6 +287,10 @@ select:active {
 #noVNC_fallback_error {
   z-index: 1000;
   visibility: hidden;
+  /* Put a white background in front of everything but the error,
+     and don't let mouse events pass through */
+  background: rgba(0, 0, 0, 0.8);
+  pointer-events: all;
 }
 #noVNC_fallback_error.noVNC_open {
   visibility: visible;