chore: Configure Mozilla's Eslint Plugin eslint-plugin-no-unsanitized

.eslintrc.js

@@ -1,3 +1,31 @@
+/*
+  Recommendation: If you've reached this point, before bringing a sanitiser/encoding library into
+    your project, 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
+
+  There is a difference between encoding and sanitizing.
+  Depending on the context, a different one might be needed.
+
+  Sanitizers will not fully protect you when reflecting user input into the DOM.
+  They will mitigate XSS, but will not protect against Content Spoofing, DOM Clobbering, etc.
+*/
+const ENCODE_SANITIZE_METHODS = [
+  // define project specific encoding/sanitization methods when using unsafe APIs to mitigate XSS
+  // example below for https://github.com/cure53/DOMPurify
+  // 'DOMPurify.sanitize',
+];
+
 module.exports = {
   root: true,
   extends: 'airbnb-base',
@@ -10,9 +38,19 @@ module.exports = {
     sourceType: 'module',
     requireConfigFile: false,
   },
+  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: { methods: [...ENCODE_SANITIZE_METHODS] } },
+    ],
+    'no-unsanitized/property': [
+      'error',
+      { escape: { methods: [...ENCODE_SANITIZE_METHODS] } },
+    ],
   },
 };

blocks/fragment/fragment.js

@@ -22,6 +22,8 @@ export async function loadFragment(path) {
     const resp = await fetch(`${path}.plain.html`);
     if (resp.ok) {
       const main = document.createElement('main');
+
+      // eslint-disable-next-line no-unsanitized/property
       main.innerHTML = await resp.text();
 
       // reset base path for media to fragment base

package.json

@@ -23,6 +23,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`
             );