feat: Configure Mozilla's Eslint Plugin eslint-plugin-no-unsanitized + DOMPurify.sanitize + escapeHtml

.eslintignore

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

.eslintrc.js

@@ -1,3 +1,23 @@
+/*
+  Recommendation: Always try to refactor your code to simply avoid using unsafe browser APIs.
+    Use:
+      * Element.textContent
+      * Element.appendChild
+      * Document.createElement
+      * etc.
+    instead of:
+      * Element.innerHTML
+      * Element.outerHTML
+      * Element.insertAdjacentHTML
+      * Range.createContextualFragment
+      * etc.
+  https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html#guideline-3-use-documentcreateelement-elementsetattributevalue-elementappendchild-and-similar-to-build-dynamic-interfaces
+*/
+const ENCODE_SANITIZE_METHODS = [
+  'escapeHtml',
+  'DOMPurify.sanitize',
+];
+
 module.exports = {
   root: true,
   extends: 'airbnb-base',
@@ -10,9 +30,22 @@ module.exports = {
     sourceType: 'module',
     requireConfigFile: false,
   },
+  globals: {
+    DOMPurify: 'readonly',
+  },
+  plugins: ['no-unsanitized'],
   rules: {
     'import/extensions': ['error', { js: 'always' }], // require js file extensions in imports
     'linebreak-style': ['error', 'unix'], // enforce unix linebreaks
     'no-param-reassign': [2, { props: false }], // allow modifying properties of param
+    // Flag usage of unsafe DOM APIs to mitigate XSS
+    'no-unsanitized/method': [
+      'error',
+      { escape: { defaultDisable: true, methods: [...ENCODE_SANITIZE_METHODS] } },
+    ],
+    'no-unsanitized/property': [
+      'error',
+      { escape: { defaultDisable: true, methods: [...ENCODE_SANITIZE_METHODS] } },
+    ],
   },
 };

blocks/fragment/fragment.js

@@ -3,7 +3,7 @@
  * Include content on a page as a fragment.
  * https://www.aem.live/developer/block-collection/fragment
  */
-
+import '../../scripts/purify.min.js';
 import {
   decorateMain,
 } from '../../scripts/scripts.js';
@@ -22,7 +22,8 @@ export async function loadFragment(path) {
     const resp = await fetch(`${path}.plain.html`);
     if (resp.ok) {
       const main = document.createElement('main');
-      main.innerHTML = await resp.text();
+
+      main.innerHTML = DOMPurify.sanitize(await resp.text());
 
       // reset base path for media to fragment base
       const resetAttributeBase = (tag, attr) => {

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,9 +21,11 @@
   "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",
+    "eslint-plugin-no-unsanitized": "^4.1.0",
     "stylelint": "16.8.2",
     "stylelint-config-standard": "36.0.1"
   }

scripts/aem.js

@@ -537,7 +537,7 @@ function buildBlock(blockName, content) {
       vals.forEach((val) => {
         if (val) {
           if (typeof val === 'string') {
-            colEl.innerHTML += val;
+            colEl.textContent += val;
           } else {
             colEl.appendChild(val);
           }
@@ -564,6 +564,7 @@ async function loadBlock(block) {
       const decorationComplete = new Promise((resolve) => {
         (async () => {
           try {
+            // eslint-disable-next-line no-unsanitized/method
             const mod = await import(
               `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js`
             );

scripts/scripts.js

@@ -14,6 +14,27 @@ import {
   sampleRUM,
 } from './aem.js';
 
+/**
+ * Minimal escaping of HTML special characters
+ *
+ * NOTICE: Mitigates a big class of XSS attacks, but not all of them.
+ * Always try to refactor your code to simply avoid using unsafe browser APIs.
+ *
+ * example where it would not help, because the attribute has a Javascript context:
+ *  const userInput = 'alert(document.cookie)';
+ *  container.innerHTML = `<img src="x" onerror="${escapeHtml(userInput)}"/>`;
+ * @param {string} unsafe
+ * @returns {string}
+ */
+export function escapeHtml(unsafe) {
+  return unsafe
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll('\'', '&#x27;');
+}
+
 /**
  * Builds hero block and prepends to main in a new section.
  * @param {Element} main The container element