feat: support running with TrustedTypes enforced

karma.conf.js

@@ -123,6 +123,19 @@ module.exports = config => {
  cfg = addSauceTests(cfg, sauceConfig);
  cfg = chooseTestSuite(cfg, env.MOCHA_TEST);
 
+ // It would be very difficult to meaningfully apply trusted types to
+ // a requirejs environment, and would require changes to requirejs if so.
+ if (env.MOCHA_TEST !== 'requirejs') {
+ cfg.customHeaders = cfg.customHeaders || [];
+ // Test with native trusted types (in browsers that support them).
+ // https://w3c.github.io/webappsec-trusted-types/dist/spec/#introduction
+ cfg.customHeaders.push({
+ match: '.*',
+ name: 'Content-Security-Policy',
+ value: "require-trusted-types-for 'script';"
+ });
+ }
+
  // include sourcemap
  cfg = {
  ...cfg,

lib/browser/highlight-tags.js

@@ -25,6 +25,22 @@ function highlight(js) {
  );
 }
 
+let highlightPolicy = {
+ createHTML: function(html) {
+ // The highlight function escapes its input.
+ return highlight(html);
+ }
+};
+if (
+ typeof window !== 'undefined' &&
+ typeof window.trustedTypes !== 'undefined'
+) {
+ highlightPolicy = window.trustedTypes.createPolicy(
+ 'mocha-highlight-tags',
+ highlightPolicy
+ );
+}
+
 /**
  * Highlight the contents of tag `name`.
  *
@@ -34,6 +50,6 @@ function highlight(js) {
 module.exports = function highlightTags(name) {
  var code = document.getElementById('mocha').getElementsByTagName(name);
  for (var i = 0, len = code.length; i < len; ++i) {
- code[i].innerHTML = highlight(code[i].innerHTML);
+ code[i].innerHTML = highlightPolicy.createHTML(code[i].innerHTML);
  }
 };

lib/reporters/html.js

@@ -313,6 +313,24 @@ function error(msg) {
  document.body.appendChild(fragment('<div id="mocha-error">%s</div>', msg));
 }
 
+let policy = {
+ createHTML: function(html) {
+ /**
+ * Note that this policy lets html through unchanged. This is potentially
+ * a security vulnerability if untrusted data is set to innerHTML, as it
+ * allows arbitrary code execution.
+ *
+ * Ideally this code would be refactored to not use .innerHTML, and this
+ * policy deleted, or this policy could return the html after it has been
+ * processed by a secure sanitization system like dompurify
+ */
+ return html;
+ }
+};
+if (typeof window !== 'undefined' && window.trustedTypes != null) {
+ policy = window.trustedTypes.createPolicy('mocha-html-reporter', policy);
+}
+
 /**
  * Return a DOM fragment from `html`.
  *
@@ -323,15 +341,17 @@ function fragment(html) {
  var div = document.createElement('div');
  var i = 1;
 
- div.innerHTML = html.replace(/%([se])/g, function(_, type) {
- switch (type) {
- case 's':
- return String(args[i++]);
- case 'e':
- return escape(args[i++]);
- // no default
- }
- });
+ div.innerHTML = policy.createHTML(
+ html.replace(/%([se])/g, function(_, type) {
+ switch (type) {
+ case 's':
+ return String(args[i++]);
+ case 'e':
+ return escape(args[i++]);
+ // no default
+ }
+ })
+ );
 
  return div.firstChild;
 }

rollup.config.js

@@ -3,6 +3,7 @@ import nodeResolve from '@rollup/plugin-node-resolve';
 import json from '@rollup/plugin-json';
 import builtins from 'rollup-plugin-node-builtins';
 import globals from 'rollup-plugin-node-globals';
+import * as fs from 'fs';
 
 import {babel} from '@rollup/plugin-babel';
 
@@ -11,6 +12,36 @@ import visualizer from 'rollup-plugin-visualizer';
 
 import pickFromPackageJson from './scripts/pick-from-package-json';
 
+/**
+ * A temporary plugin workaround for a globalThis polyfill.
+ *
+ * Older versions of regenerator-runtime use Function("return this")() to get
+ * the global `this` value when running in strict mode. This is not compatible
+ * with some content security policies, including trusted-types, which we
+ * test with in browsers that support it.
+ *
+ * Fortunately, all browsers that support trusted-types also support the global
+ * variable named `globalThis` for accessing the global `this` value. So
+ * whenever we would run `Function("return this")()` we can instead first look
+ * whether `globalThis` is defined, and if so, just use that.
+ *
+ * The latest version of regenerator-runtime does rely on calling Function
+ * to get globalThis, so we only need this plugin until the updated version
+ * has percolated through our dependency tree. We can try to remove it on
+ * 2021-01-01. This behavior is tested, so we can just remove the plugin
+ * from our array and try `npm test`. If the tests pass, this can be removed.
+ */
+const applyTemporaryCspPatchPlugin = {
+ writeBundle(options) {
+ let contents = fs.readFileSync(options.file, {encoding: 'utf8'});
+ contents = contents.replace(
+ /Function\("return this"\)\(\)/g,
+ `(typeof globalThis !== 'undefined' ? globalThis : Function("return this")())`
+ );
+ fs.writeFileSync(options.file, contents, {encoding: 'utf8'});
+ }
+};
+
 const config = {
  input: './browser-entry.js',
  output: {
@@ -47,7 +78,8 @@ const config = {
  ]
  ],
  babelHelpers: 'bundled'
- })
+ }),
+ applyTemporaryCspPatchPlugin
  ],
  onwarn: (warning, warn) => {
  if (warning.code === 'CIRCULAR_DEPENDENCY') return;