feat(client): Add trusted types support (#3360)

With this change, Karma tests can be run with an enforced Trusted Types policy.

This change consists of using safer APIs (appendChild and textContent instead of innerHTML), as well as creating a policy for client/karma.js which a test's Trusted Types CSP policy can then explicitly allow. This policy is used internally where karma does potentially dangerous operations like loading scripts.

More info about the proposed Trusted Types standard at https://github.com/WICG/trusted-types

Author: rictic

client/karma.js

@@ -14,6 +14,33 @@ function Karma (socket, iframe, opener, navigator, location) {
   var resultsBufferLimit = 50
   var resultsBuffer = []
 
+  // This is a no-op if not running with a Trusted Types CSP policy, and
+  // lets tests declare that they trust the way that karma creates and handles
+  // URLs.
+  //
+  // More info about the proposed Trusted Types standard at
+  // https://github.com/WICG/trusted-types
+  var policy = {
+    createURL: function (s) {
+      return s
+    },
+    createScriptURL: function (s) {
+      return s
+    }
+  }
+  var trustedTypes = window.trustedTypes || window.TrustedTypes
+  if (trustedTypes) {
+    policy = trustedTypes.createPolicy('karma', policy)
+    if (!policy.createURL) {
+      // Install createURL for newer browsers. Only browsers that implement an
+      //     old version of the spec require createURL.
+      //     Should be safe to delete all reference to createURL by
+      //     February 2020.
+      // https://github.com/WICG/trusted-types/pull/204
+      policy.createURL = function (s) { return s }
+    }
+  }
+
   // This variable will be set to "true" whenever the socket lost connection and was able to
   // reconnect to the Karma server. This will be passed to the Karma server then, so that
   // Karma can differentiate between a socket client reconnect and a full browser reconnect.
@@ -80,7 +107,7 @@ function Karma (socket, iframe, opener, navigator, location) {
             if (ele.tagName && ele.tagName.toLowerCase() === 'script') {
               var tmp = ele
               ele = document.createElement('script')
-              ele.src = tmp.src
+              ele.src = policy.createScriptURL(tmp.src)
               ele.crossOrigin = tmp.crossOrigin
             }
             ele.onload = function () {
@@ -95,7 +122,7 @@ function Karma (socket, iframe, opener, navigator, location) {
       }
     // run in iframe
     } else {
-      iframe.src = url
+      iframe.src = policy.createURL(url)
     }
   }
 

client/updater.js

@@ -5,13 +5,20 @@ function StatusUpdater (socket, titleElement, bannerElement, browsersElement) {
     if (!browsersElement) {
       return
     }
-    var items = []
     var status
+
+    // clear browsersElement
+    while (browsersElement.firstChild) {
+      browsersElement.removeChild(browsersElement.firstChild)
+    }
+
     for (var i = 0; i < browsers.length; i++) {
       status = browsers[i].isConnected ? 'idle' : 'executing'
-      items.push('<li class="' + status + '">' + browsers[i].name + ' is ' + status + '</li>')
+      var li = document.createElement('li')
+      li.setAttribute('class', status)
+      li.textContent = browsers[i].name + ' is ' + status
+      browsersElement.appendChild(li)
     }
-    browsersElement.innerHTML = items.join('\n')
   }
 
   function updateBanner (status) {
@@ -20,7 +27,7 @@ function StatusUpdater (socket, titleElement, bannerElement, browsersElement) {
         return
       }
       var paramStatus = param ? status.replace('$', param) : status
-      titleElement.innerHTML = 'Karma v' + VERSION + ' - ' + paramStatus
+      titleElement.textContent = 'Karma v' + VERSION + ' - ' + paramStatus
       bannerElement.className = status === 'connected' ? 'online' : 'offline'
     }
   }