feat: Trusted Types with DOMPurify

.eslintignore

@@ -1 +1,2 @@
-helix-importer-ui
+helix-importer-ui
+scripts/purify.min.js

.eslintrc.js

@@ -4,6 +4,10 @@ module.exports = {
   env: {
     browser: true,
   },
+  globals: {
+    DOMPurify: 'readonly',
+    trustedTypes: 'readonly',
+  },
   parser: '@babel/eslint-parser',
   parserOptions: {
     allowImportExportEverywhere: true,

head.html

@@ -1,4 +1,10 @@
+<!-- Content Security Policies should ideally be moved as a header for better security -->
+<meta
+  http-equiv="Content-Security-Policy"
+  content="require-trusted-types-for 'script'; trusted-types default aempolicy dompurify"
+>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
+<script type="text/javascript" src="scripts/purify.min.js"></script>
 <script src="/scripts/aem.js" type="module"></script>
 <script src="/scripts/scripts.js" type="module"></script>
 <link rel="stylesheet" href="/styles/styles.css"/>

package.json

@@ -4,6 +4,7 @@
   "version": "1.3.0",
   "description": "Starter project for Adobe Helix",
   "scripts": {
+    "postinstall": "cp node_modules/dompurify/dist/purify.min.js scripts/purify.min.js",
     "lint:js": "eslint .",
     "lint:css": "stylelint blocks/**/*.css styles/*.css",
     "lint": "npm run lint:js && npm run lint:css"
@@ -20,6 +21,7 @@
   "homepage": "https://github.com/adobe/aem-boilerplate#readme",
   "devDependencies": {
     "@babel/eslint-parser": "7.25.1",
+    "dompurify": "3.1.7",
     "eslint": "8.57.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-plugin-import": "2.29.1",

scripts/scripts.js

@@ -113,6 +113,68 @@ async function loadLazy(doc) {
   loadFonts();
 }
 
+/**
+ * Check if the browser supports Trusted Types (currently Google Chrome only)
+ * https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API
+ * Polyfill can be added from: https://github.com/w3c/trusted-types#polyfill
+ * @returns {boolean}
+ */
+function browserSupportsTrustedTypes() {
+  try {
+    return window.trustedTypes && trustedTypes.createPolicy;
+  } catch (e) {
+    return false;
+  }
+}
+
+const TRUSTED_SCRIPT_ORIGINS = [
+  window.location.origin,
+  // add more trusted origins here
+];
+
+/* eslint-disable no-unused-vars, import/no-mutable-exports */
+/* Default Trusted Types policy applies for all Javascript code on the page,
+ * including libraries loaded
+*/
+let defaultPolicy = {
+  createHTML: (s, type, sink) => DOMPurify.sanitize(s),
+  createScriptURL: (s, type, sink) => {
+    if (!s) return undefined;
+    const canonical = s.startsWith('//') ? `https:${s}` : s;
+
+    try {
+      if (TRUSTED_SCRIPT_ORIGINS.includes(new URL(canonical).origin)) {
+        return s;
+      }
+    } catch (e) {
+      // no-op
+    }
+
+    // eslint-disable-next-line no-console
+    console.warn(`Blocked script from ${s} by default policy`);
+    return undefined; // reject
+  },
+  createScript: (s, type, sink) => {
+    // disallow inline scripts.
+    // eslint-disable-next-line no-console
+    console.warn('Blocked inline script by default policy');
+    return undefined;
+  },
+};
+
+/* Define your custom Trusted Types policy here */
+export let aemPolicy = {
+  createHTML: (s, type, sink) => undefined,
+  createScriptURL: (s, type, sink) => undefined,
+  createScript: (s, type, sink) => undefined,
+};
+
+if (browserSupportsTrustedTypes()) {
+  defaultPolicy = trustedTypes.createPolicy('default', defaultPolicy);
+  aemPolicy = trustedTypes.createPolicy('aempolicy', aemPolicy);
+}
+/* eslint-enable no-unused-vars, import/no-mutable-exports */
+
 /**
  * Loads everything that happens a lot later,
  * without impacting the user experience.