Merge pull request #66 from deflect-ca/hotfix/favicon-find-function

Fixed bugs in sha-inv page on favicon
deflect-ca · Nov 6, 2024 · f026065 · f026065
2 parents 4115911 + a0277b1
commit f026065
Showing 1 changed file with 23 additions and 3 deletions.
diff --git a/internal/sha-inverse-challenge.html b/internal/sha-inverse-challenge.html
@@ -169,6 +169,27 @@
             return selectedMessage;
         }
 
+        function getFavicon(imgElement) {
+            // Build the base URL in a backward-compatible way
+            var origin = window.location.protocol + "//" + window.location.host;
+            var faviconUrl = origin + '/favicon.ico';
+            var fallbackSvg = imgElement.src;
+            var testImage = new Image();
+
+            testImage.src = faviconUrl
+
+            // Set favicon if it loads successfully
+            testImage.addEventListener('load', function() {
+                imgElement.src = faviconUrl;
+            });
+
+            // Fallback to SVG if favicon fails to load
+            testImage.addEventListener('error', function() {
+                console.log('Favicon not found, falling back to SVG');
+                imgElement.src = fallbackSvg;
+            });
+        }
+
         function setDomainName() {
             document.getElementsByClassName("website-title")[0].textContent =
                 window.location.hostname;
@@ -182,8 +203,7 @@
         }
 
         function setFavicon() {
-            document.getElementsByClassName("website-favicon")[0].src =
-                window.location.origin + '/favicon.ico';
+            getFavicon(document.getElementsByClassName("website-favicon")[0])
         }
     </script>
     <style>
@@ -287,7 +307,7 @@
             <h1 class="js-alert">Please turn on JavaScript and reload the page.</h1>
         </noscript>
         <div class="website">
-          <img class="website-favicon" src="https://deflect.ca/favicon.ico" onerror="this.style.display='none'"/>
+          <img class="website-favicon" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20stroke%3D%22%23333%22%20stroke-width%3D%221.5%22%20fill%3D%22%23cce5ff%22%2F%3E%3Cpath%20d%3D%22M12%202c3%202%205%205.5%205%2010s-2%208-5%2010c-3-2-5-5.5-5-10s2-8%205-10Z%22%20stroke%3D%22%23333%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M2%2012h20M12%202v20%22%20stroke%3D%22%23333%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E" onerror="this.style.display='none'"/>
           <span class="website-title"></span>
         </div>
         <div class="loader">