diff --git a/src/web/App.js b/src/web/App.js index 0c2bb2ea..c1d1c018 100755 --- a/src/web/App.js +++ b/src/web/App.js @@ -82,6 +82,9 @@ App.prototype.loaded = function() { // Clear the loading message interval clearInterval(window.loadingMsgsInt); + // Remove the loading error handler + window.removeEventListener("error", window.loadingErrorHandler); + document.dispatchEvent(this.manager.apploaded); }; diff --git a/src/web/html/index.html b/src/web/html/index.html index 41b74c72..5575999a 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -42,7 +42,7 @@ } // Define loading messages - const loadingMsgs = [ + var loadingMsgs = [ "Proving P = NP...", "Computing 6 x 9...", "Mining bitcoin...", @@ -66,18 +66,18 @@ // Shuffle array using Durstenfeld algorithm for (let i = loadingMsgs.length - 1; i > 0; --i) { - const j = Math.floor(Math.random() * (i + 1)); - const temp = loadingMsgs[i]; + var j = Math.floor(Math.random() * (i + 1)); + var temp = loadingMsgs[i]; loadingMsgs[i] = loadingMsgs[j]; loadingMsgs[j] = temp; } // Show next loading message and move it to the end of the array function changeLoadingMsg() { - const msg = loadingMsgs.shift(); + var msg = loadingMsgs.shift(); loadingMsgs.push(msg); try { - const el = document.getElementById("preloader-msg"); + var el = document.getElementById("preloader-msg"); if (!el.classList.contains("loading")) el.classList.add("loading"); // Causes CSS transition on first message el.innerHTML = msg; @@ -86,6 +86,46 @@ changeLoadingMsg(); window.loadingMsgsInt = setInterval(changeLoadingMsg, (Math.random() * 2000) + 1500); + + // If any errors are thrown during loading, handle them here + function loadingErrorHandler(e) { + function escapeHtml(str) { + var HTML_CHARS = { + "&": "&", + "<": "<", + ">": ">", + '"': """, + "'": "'", // ' not recommended because it's not in the HTML spec + "/": "/", // forward slash is included as it helps end an HTML entity + "`": "`" + }; + + return str.replace(/[&<>"'/`]/g, function (match) { + return HTML_CHARS[match]; + }); + } + + var msg = e.message + + (e.filename ? "\nFilename: " + e.filename : "") + + (e.lineno ? "\nLine: " + e.lineno : "") + + (e.colno ? "\nColumn: " + e.colno : "") + + (e.error ? "\nError: " + e.error : "") + + "\nUser-Agent: " + navigator.userAgent + + "\nCyberChef version: <%= htmlWebpackPlugin.options.version %>"; + + clearInterval(window.loadingMsgsInt); + document.getElementById("preloader").remove(); + document.getElementById("preloader-msg").remove(); + document.getElementById("preloader-error").innerHTML = + "CyberChef encountered an error while loading.

" + + "The following browser versions are supported:" + + "" + + "Your user agent is:
" + escapeHtml(navigator.userAgent) + "

" + + "If your browser is supported, please " + + "raise an issue including the following details:

" + + "
" + escapeHtml(msg) + "
"; + }; + window.addEventListener("error", loadingErrorHandler); <% if (htmlWebpackPlugin.options.inline) { %> @@ -100,6 +140,7 @@
+
Edit diff --git a/src/web/index.js b/src/web/index.js index e956335c..6444f064 100755 --- a/src/web/index.js +++ b/src/web/index.js @@ -64,3 +64,4 @@ window.compileMessage = COMPILE_MSG; window.CanvasComponents = CanvasComponents; document.addEventListener("DOMContentLoaded", main, false); + diff --git a/src/web/stylesheets/preloader.css b/src/web/stylesheets/preloader.css index 0f3b070d..702d04a6 100644 --- a/src/web/stylesheets/preloader.css +++ b/src/web/stylesheets/preloader.css @@ -74,6 +74,14 @@ transition: all 0.1s ease-in; } +.loading-error { + display: block; + position: relative; + width: 600px; + left: calc(50% - 300px); + top: 10%; +} + /* Loaded */ .loaded .loading-msg {