fix: resolve XSS vulnerabilities in sponsor management templates

Replace innerHTML with DOM APIs (createElement/textContent) in three
templates to prevent XSS via benefit names or search input:
- sponsorship_list.html: live-search empty state
- sponsorship_detail.html: benefit search dropdown
- composer.html: addBenefit() dynamic DOM construction

Also fix contract status string mismatch (awaiting_signature →
awaiting signature) in sponsorship_detail.html.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: JacobCoffee

apps/sponsors/templates/sponsors/manage/composer.html

@@ -789,19 +789,43 @@ <h2>Customize Benefits</h2>
         div.setAttribute('data-package', 'true');
         div.style.background = '#e8f4fd';
     }
-    var tooltip = description ? '<span title="' + description.replace(/"/g, '&quot;') + '" style="cursor:help;color:#999;font-size:12px;margin-left:4px;">?</span>' : '';
-    var actionHtml;
+    var infoDiv = document.createElement('div');
+    infoDiv.className = 'benefit-info';
+    var nameSpan = document.createElement('span');
+    nameSpan.className = 'benefit-name';
+    nameSpan.textContent = name;
+    infoDiv.appendChild(nameSpan);
+    if (description) {
+        var tooltipSpan = document.createElement('span');
+        tooltipSpan.title = description;
+        tooltipSpan.style.cssText = 'cursor:help;color:#999;font-size:12px;margin-left:4px;';
+        tooltipSpan.textContent = '?';
+        infoDiv.appendChild(tooltipSpan);
+    }
+    if (value) {
+        var valueSpan = document.createElement('span');
+        valueSpan.className = 'benefit-value';
+        valueSpan.textContent = '$' + value.toLocaleString();
+        infoDiv.appendChild(valueSpan);
+    }
+    div.appendChild(infoDiv);
+    var actionDiv = document.createElement('div');
+    actionDiv.className = 'benefit-action';
     if (isPackage) {
-        actionHtml = '<span style="font-size:10px;color:#3776ab;font-weight:600;padding:2px 6px;background:#d0e4f5;border-radius:3px;" title="Included in package">Pkg</span>';
+        var pkgSpan = document.createElement('span');
+        pkgSpan.style.cssText = 'font-size:10px;color:#3776ab;font-weight:600;padding:2px 6px;background:#d0e4f5;border-radius:3px;';
+        pkgSpan.title = 'Included in package';
+        pkgSpan.textContent = 'Pkg';
+        actionDiv.appendChild(pkgSpan);
     } else {
-        actionHtml = '<button type="button" class="remove-btn" onclick="removeBenefit(' + id + ', ' + value + ');">x</button>';
-    }
-    div.innerHTML = '<div class="benefit-info">' +
-        '<span class="benefit-name">' + name + '</span>' +
-        tooltip +
-        (value ? '<span class="benefit-value">$' + value.toLocaleString() + '</span>' : '') +
-        '</div>' +
-        '<div class="benefit-action">' + actionHtml + '</div>';
+        var removeBtn = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.className = 'remove-btn';
+        removeBtn.textContent = 'x';
+        removeBtn.addEventListener('click', function() { removeBenefit(id, value); });
+        actionDiv.appendChild(removeBtn);
+    }
+    div.appendChild(actionDiv);
     sel.appendChild(div);
 
     currentTotal += value;

apps/sponsors/templates/sponsors/manage/sponsorship_detail.html

@@ -179,7 +179,7 @@ <h3 style="display:flex;justify-content:space-between;align-items:center;">Spons
         <div class="sp-field">
             <div class="sp-label">Contract</div>
             <div class="sp-value">
-                <span class="tag {% if contract.status == 'draft' %}tag-gray{% elif contract.status == 'awaiting_signature' %}tag-gold{% elif contract.status == 'executed' %}tag-green{% else %}tag-red{% endif %}">
+                <span class="tag {% if contract.status == 'draft' %}tag-gray{% elif contract.status == 'awaiting signature' %}tag-gold{% elif contract.status == 'executed' %}tag-green{% else %}tag-red{% endif %}">
                     {{ contract.get_status_display }}
                 </span>
             </div>
@@ -459,23 +459,18 @@ <h2>Benefits <span class="badge">{{ benefits|length }}</span></h2>
             }
 
             function renderDropdown(filter) {
-                var html = '';
+                dropdown.textContent = '';
                 var q = (filter || '').toLowerCase();
                 var count = 0;
                 options.forEach(function(opt) {
                     if (q && opt.text.toLowerCase().indexOf(q) === -1) return;
                     var highlighted = opt.value === select.value;
-                    html += '<div class="bs-opt' + (highlighted ? ' bs-sel' : '') + '" data-val="' + opt.value + '"'
-                         + ' style="padding:7px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid #f5f5f5;'
-                         + (highlighted ? 'background:#e8f0fe;font-weight:600;' : '')
-                         + '">' + opt.text + '</div>';
-                    count++;
-                });
-                if (!count) html = '<div style="padding:10px 12px;font-size:13px;color:#999;">No matching benefits</div>';
-                dropdown.innerHTML = html;
-                dropdown.style.display = 'block';
-
-                dropdown.querySelectorAll('.bs-opt').forEach(function(el) {
+                    var el = document.createElement('div');
+                    el.className = 'bs-opt' + (highlighted ? ' bs-sel' : '');
+                    el.setAttribute('data-val', opt.value);
+                    el.style.cssText = 'padding:7px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid #f5f5f5;'
+                        + (highlighted ? 'background:#e8f0fe;font-weight:600;' : '');
+                    el.textContent = opt.text;
                     el.addEventListener('mousedown', function(e) {
                         e.preventDefault();
                         select.value = el.dataset.val;
@@ -488,7 +483,16 @@ <h2>Benefits <span class="badge">{{ benefits|length }}</span></h2>
                     el.addEventListener('mouseleave', function() {
                         el.style.background = el.classList.contains('bs-sel') ? '#e8f0fe' : '';
                     });
+                    dropdown.appendChild(el);
+                    count++;
                 });
+                if (!count) {
+                    var empty = document.createElement('div');
+                    empty.style.cssText = 'padding:10px 12px;font-size:13px;color:#999;';
+                    empty.textContent = 'No matching benefits';
+                    dropdown.appendChild(empty);
+                }
+                dropdown.style.display = 'block';
             }
 
             input.addEventListener('focus', function() { renderDropdown(input.value); });

apps/sponsors/templates/sponsors/manage/sponsorship_list.html

@@ -201,10 +201,14 @@
                 if (!emptyRow) {
                     emptyRow = document.createElement('tr');
                     emptyRow.id = 'live-search-empty';
-                    emptyRow.innerHTML = '<td colspan="9" style="text-align:center;padding:20px;color:#999;">No sponsorships match &ldquo;' + q.replace(/</g, '&lt;') + '&rdquo;</td>';
+                    var td = document.createElement('td');
+                    td.setAttribute('colspan', '9');
+                    td.style.cssText = 'text-align:center;padding:20px;color:#999;';
+                    td.textContent = 'No sponsorships match \u201C' + q + '\u201D';
+                    emptyRow.appendChild(td);
                     rows[0].parentNode.appendChild(emptyRow);
                 } else {
-                    emptyRow.innerHTML = '<td colspan="9" style="text-align:center;padding:20px;color:#999;">No sponsorships match &ldquo;' + q.replace(/</g, '&lt;') + '&rdquo;</td>';
+                    emptyRow.firstChild.textContent = 'No sponsorships match \u201C' + q + '\u201D';
                     emptyRow.style.display = '';
                 }
             } else if (emptyRow) {