Secure SPA script loading with strict CSP

src/Exceptionless.Web/ClientApp.angular/.eslintrc.json

@@ -12,7 +12,17 @@
         "moment": "readonly",
         "require": "readonly"
     },
-    "overrides": [],
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": ["grunt/**/*.test.js"],
+            "parserOptions": {
+                "ecmaVersion": 2021
+            }
+        }
+    ],
     "parserOptions": {
         "ecmaVersion": 2015
     },

src/Exceptionless.Web/ClientApp.angular/app/app.tpl.html

@@ -25,9 +25,7 @@
             <a href="https://github.com/exceptionless/Exceptionless/releases" target="_blank" title="Version"
                 >{{appVm.apiVersionNumber}}</a
             >&nbsp;
-            <a href="javascript:void(0);" ui-scroll="app" class="m-l-sm text-muted"
-                ><i class="fa fa-long-arrow-up"></i
-            ></a>
+            <a href="#app" ui-scroll="app" class="m-l-sm text-muted"><i class="fa fa-long-arrow-up"></i></a>
         </span>
         <span class="visible-xs">
             &copy; 2025 <a href="https://exceptionless.com" target="_blank">Exceptionless</a>

src/Exceptionless.Web/ClientApp.angular/components/object-dump/object-dump-directive.js

@@ -1,9 +1,89 @@
 (function () {
     "use strict";
 
-    // NOTE: We had a ton of existing handlebars code that would of been time consuming to convert to angular.
-    // We will convert this when porting to angular 2.0.
-    angular.module("exceptionless.object-dump").directive("objectDump", function (handlebarsService) {
+    angular.module("exceptionless.object-dump").directive("objectDump", function () {
+        function isArray(value) {
+            return Object.prototype.toString.call(value) === "[object Array]" || value instanceof Array;
+        }
+
+        function isObject(value) {
+            return (typeof value === "object" || value instanceof Object) && value !== null && !isArray(value);
+        }
+
+        function isEmpty(value) {
+            return (isArray(value) || isObject(value)) && Object.keys(value).length === 0;
+        }
+
+        function formatValue(value) {
+            if (typeof value === "boolean" || value instanceof Boolean) {
+                return value ? "True\r\n" : "False\r\n";
+            }
+
+            if (value === null) {
+                return "(Null)\r\n";
+            }
+
+            return String(value) + "\r\n";
+        }
+
+        function renderArray(value, depth) {
+            var list = document.createElement("ul");
+
+            value.forEach(function (item) {
+                var listItem = document.createElement("li");
+                listItem.appendChild(renderValue(item, depth + 1));
+                list.appendChild(listItem);
+            });
+
+            return list;
+        }
+
+        function renderObject(value, depth) {
+            var table = document.createElement("table");
+            table.className = "table table-striped table-bordered table-key-value b-t object-dump";
+            if (depth === 0) {
+                table.classList.add("table-fixed");
+            }
+
+            Object.keys(value).forEach(function (key) {
+                var row = document.createElement("tr");
+                var heading = document.createElement("th");
+                var cell = document.createElement("td");
+
+                heading.textContent = key;
+                cell.appendChild(renderValue(value[key], depth + 1));
+                row.appendChild(heading);
+                row.appendChild(cell);
+                table.appendChild(row);
+            });
+
+            return table;
+        }
+
+        function renderValue(value, depth) {
+            if (isEmpty(value)) {
+                return document.createTextNode("(Empty)\r\n");
+            }
+
+            if (isArray(value)) {
+                return renderArray(value, depth);
+            }
+
+            if (isObject(value)) {
+                return renderObject(value, depth);
+            }
+
+            return document.createTextNode(formatValue(value));
+        }
+
+        function replaceContent(element, content) {
+            while (element.firstChild) {
+                element.removeChild(element.firstChild);
+            }
+
+            element.appendChild(content);
+        }
+
         return {
             restrict: "E",
             scope: {
@@ -17,17 +97,24 @@
 
                 try {
                     var content = scope.content;
-                    var template = handlebarsService.getTemplate(scope.templateKey);
+                    var usePreformattedText = scope.templateKey === "pre";
 
                     if (typeof content === "string" || content instanceof String) {
                         try {
                             content = JSON.parse(scope.content);
                         } catch (ex) {
-                            template = handlebarsService.getTemplate("pre");
+                            usePreformattedText = true;
                         }
                     }
 
-                    element.html(template(content));
+                    var renderedContent = renderValue(content, 0);
+                    if (usePreformattedText && !isEmpty(content)) {
+                        var pre = document.createElement("pre");
+                        pre.appendChild(renderedContent);
+                        renderedContent = pre;
+                    }
+
+                    replaceContent(element[0], renderedContent);
                 } catch (ex) {
                     element.text(scope.content);
                 }

src/Exceptionless.Web/ClientApp.angular/components/object-dump/object-dump-directive.less

@@ -6,3 +6,8 @@
     list-style: none;
     margin-bottom: 8px;
 }
+
+.object-dump .object-dump > tbody > tr > th:first-child {
+    min-width: 90px;
+    width: 90px;
+}

src/Exceptionless.Web/ClientApp.angular/components/ui-scroll/ui-scroll-directive.js

@@ -6,6 +6,7 @@
             restrict: "AC",
             link: function (scope, el, attr) {
                 el.on("click", function (e) {
+                    e.preventDefault();
                     $location.hash(attr.uiScroll);
                     $anchorScroll();
                 });