desy-html 16.0.4 → 17.0.1

package/src/js/aria/tree.js

@@ -1,3 +1,5 @@
+import { escapeHtml, safeHref } from './utils.js';
+
 export function Tree(aria) {
   /*
 *   This content is licensed according to the W3C Software License at
@@ -49,7 +51,7 @@ export function Tree(aria) {
       if (paramsRaw) {
         this.params = JSON.parse(paramsRaw);
         this.describedBy = this.params.describedBy ?? "";
-        if (this.params.fieldset.describedBy)
+        if (this.params.fieldset?.describedBy)
           this.describedBy = this.params.fieldset.describedBy;
         this.hasFieldset = this.params.fieldset ?? false;
       }
@@ -95,6 +97,32 @@ export function Tree(aria) {
     }
   };
 
+  // Serializes dynamic attributes with a strict allow-list: only well-formed data-*/aria-*
+  // names or exactly {title, role, id, class}. The [a-z0-9-] pattern rejects keys with spaces,
+  // '=', quotes, '<', '>' or '/', closing the "data-x onmouseover=..." bypass. Both the name
+  // and the value are escaped.
+  function safeAttrs(obj) {
+    var out = '';
+    var dataAria = /^(data|aria)-[a-z0-9-]+$/;
+    var exact = { title: true, role: true, id: true, class: true };
+    for (var a in obj || {}) {
+      var key = String(a).toLowerCase();
+      if (!dataAria.test(key) && exact[key] !== true) continue;
+      out += ' ' + escapeHtml(a) + '="' + escapeHtml(obj[a]) + '"';
+    }
+    return out;
+  }
+
+  // Returns the consumer's intentional HTML (node.html) or, otherwise, the escaped text.
+  function htmlOrText(node) {
+    return node.html ? node.html : escapeHtml(node.text || '');
+  }
+
+  // Suffix ' escaped-class' to concatenate after fixed classes, or '' if none.
+  function optClasses(cls) {
+    return cls ? ' ' + escapeHtml(cls) : '';
+  }
+
   function checkboxItem(item, id, name, type, params, describedBy, hasFieldset) {
     name = name || item.name || '';
     var hasHint = item.hint && (item.hint.text || item.hint.html);
@@ -105,7 +133,7 @@ export function Tree(aria) {
     // Wrapper
     var html = '<div' +
       ((params.hasDividers ? ' class="border-t border-b border-neutral-base -mb-px' : '') +
-        (item.classes ? ' ' + item.classes : '') + '"').replace('""', '') +
+        optClasses(item.classes) + '"').replace('""', '') +
       '>' +
       '<div class="relative flex items-start py-xs">';
 
@@ -120,13 +148,13 @@ export function Tree(aria) {
         ((item.isIndeterminate && item.indeterminateChecked)
           ? ' c-checkboxes__indeterminate-active'
           : '') + '"' +
-        ' id="' + id + '-input"' +
-        ' name="' + name + '"' +
+        ' id="' + escapeHtml(id) + '-input"' +
+        ' name="' + escapeHtml(name) + '"' +
         (type === 'checkbox' ? ' type="checkbox" role="checkbox"' : ' type="radio"') +
-        ' value="' + (item.value || '') + '"' +
+        ' value="' + escapeHtml(item.value || '') + '"' +
         (item.checked ? ' checked' : '') +
         (item.disabled ? ' disabled' : '') +
-        (itemDescribed ? ' aria-describedby="' + itemDescribed + '"' : '') +
+        (itemDescribed ? ' aria-describedby="' + escapeHtml(itemDescribed) + '"' : '') +
         (params.errorMessage ? ' aria-invalid="true"' : '');
 
       if (item.isIndeterminate || item.indeterminateChecked) {
@@ -136,62 +164,58 @@ export function Tree(aria) {
           '"';
       }
       html += '>' +
-        '</div>' +            // cierre flex items-center
+        '</div>' +            // closes flex items-center
         '<div class="flex-1 pt-0.5 leading-5">';
 
       // Label
       var lblCls = (item.label && item.label.classes)
         ? item.label.classes
         : 'block relative -top-xs -left-8 pl-8 py-xs';
-      html += '<label for="' + id + '-input" class="' + lblCls + '">';
-      html += item.html ? item.html : (item.text || '');
+      html += '<label for="' + escapeHtml(id) + '-input" class="' + escapeHtml(lblCls) + '">';
+      html += htmlOrText(item);
       html += '</label>';
 
       // Hint
       if (hasHint) {
-        html += '<div id="' + itemHintId + '"' +
-          (item.hint.classes ? ' class="' + item.hint.classes + '"' : '') +
+        html += '<div id="' + escapeHtml(itemHintId) + '"' +
+          (item.hint.classes ? ' class="' + escapeHtml(item.hint.classes) + '"' : '') +
           '>';
-        html += item.hint.html || item.hint.text;
+        html += htmlOrText(item.hint);
         html += '</div>';
       }
-      html += '</div>';  // cierre flex-1
+      html += '</div>';  // closes flex-1
     }
 
     // Navigation branch
     if (type === 'navigation') {
       if (item.href) {
         html += '<a' +
-          (id ? ' id="' + id + '-link"' : '') +
-          ' href="' + item.href + '"' +
+          (id ? ' id="' + escapeHtml(id) + '-link"' : '') +
+          ' href="' + escapeHtml(safeHref(item.href)) + '"' +
           ' class="block px-xs focus:bg-warning-base focus:outline-hidden ' +
           'focus:shadow-outline-focus focus:text-black' +
-          (item.classes ? ' ' + item.classes : '') +
+          optClasses(item.classes) +
           (!item.disabled ? ' hover:text-primary-base hover:underline'
             : ' no-underline pointer-events-none') + '"' +
-          (item.title ? ' title="' + item.title + '"' : '') +
+          (item.title ? ' title="' + escapeHtml(item.title) + '"' : '') +
           (item.active ? ' aria-current="page"' : '') +
           (item.disabled ? ' aria-disabled="true" tabindex="-1"' : '') +
-          (item.target ? ' target="' + item.target + '"' : '') +
+          (item.target ? ' target="' + escapeHtml(item.target) + '"' : '') +
           '>';
         html += item.active
-          ? '<strong class="font-bold">' +
-          (item.html || item.text) +
-          '</strong>'
-          : (item.html || item.text);
+          ? '<strong class="font-bold">' + htmlOrText(item) + '</strong>'
+          : htmlOrText(item);
         html += '</a>';
       } else {
         html += '<span' +
-          (id ? ' id="' + id + '-link"' : '') +
+          (id ? ' id="' + escapeHtml(id) + '-link"' : '') +
           ' class="block px-xs' +
-          (item.classes ? ' ' + item.classes : '') + '"' +
-          (item.title ? ' title="' + item.title + '"' : '') +
+          optClasses(item.classes) + '"' +
+          (item.title ? ' title="' + escapeHtml(item.title) + '"' : '') +
           '>';
         html += item.active
-          ? '<strong class="font-bold">' +
-          (item.html || item.text) +
-          '</strong>'
-          : (item.html || item.text);
+          ? '<strong class="font-bold">' + htmlOrText(item) + '</strong>'
+          : htmlOrText(item);
         html += '</span>';
       }
     }
@@ -209,10 +233,8 @@ export function Tree(aria) {
           '<div class="flex items-center relative ' +
           'focus:bg-warning-base focus:outline-hidden ' +
           'focus:shadow-outline-focus focus:text-black text-left' +
-          (itemNode.classes ? ' ' + itemNode.classes : '') + '"';
-        for (var a in itemNode.attributes || {}) {
-          html += ' ' + a + '="' + itemNode.attributes[a] + '"';
-        }
+          optClasses(itemNode.classes) + '"';
+        html += safeAttrs(itemNode.attributes);
         html += '>' +
           '<span class="c-tree__icon absolute top-3 -left-4 flex items-center ' +
           'w-4 h-2.5 text-primary-base font-bold ' +
@@ -238,10 +260,8 @@ export function Tree(aria) {
 
     if (itemNode.sub && itemNode.sub.items) {
       html += '<ul role="group" class="c-tree__itemgroup' +
-        (itemNode.sub.classes ? ' ' + itemNode.sub.classes : '') + '"';
-      for (var b in itemNode.sub.attributes || {}) {
-        html += ' ' + b + '="' + itemNode.sub.attributes[b] + '"';
-      }
+        optClasses(itemNode.sub.classes) + '"';
+      html += safeAttrs(itemNode.sub.attributes);
       html += '>';
 
       if (!lazyRendering || onlySub) {
@@ -259,7 +279,7 @@ export function Tree(aria) {
             : '';
 
           html += '<li class="' + clsBase + '" ' +
-            'id="' + subId + '" ' +
+            'id="' + escapeHtml(subId) + '" ' +
             'role="treeitem" ' +
             'data-module="c-tree__item"' +
             expanded +
@@ -279,10 +299,10 @@ export function Tree(aria) {
             );
           } else {
             html += '<div class="block' +
-              (subitem.classes ? ' ' + subitem.classes : '') +
+              optClasses(subitem.classes) +
               (subitem.active ? ' font-bold' : '') +
               '"' +
-              (subitem.title ? ' title="' + subitem.title + '"' : '') +
+              (subitem.title ? ' title="' + escapeHtml(subitem.title) + '"' : '') +
               (subitem.active ? ' aria-current="page"' : '') +
               '>';
             if (subitem.active) {