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.

2 files changed, 14 insertions, 0 deletions

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;