fix: use DOM API for badges to prevent href attribute XSS

Replace innerHTML badge construction with createElement/setAttribute
to address VADE security review feedback. escapeHtml() is insufficient
for href attributes because the browser decodes HTML entities during
innerHTML parsing, allowing attribute boundary breakout. Using
setAttribute bypasses HTML parsing entirely.

All four locale files updated (en, ja, ko, zh-cn).

Signed-off-by: Sebastien Tardif <sebtardif@ncf.ca>

Author: SebTardif

src/pages/trust/ja/threatmodel.astro

@@ -755,7 +755,21 @@ for (const b of trustBoundaries) {
       document.getElementById('detailId').textContent = threat.id + ' \u2022 ' + threat.tactic;
       document.getElementById('detailTitle').textContent = threat.name;
       var rc = getRiskColor(threat.risk);
-      document.getElementById('detailBadges').innerHTML = '<span class="detail-badge" style="background:' + rc + '12;color:' + rc + '">' + escapeHtml(threat.risk) + ' ' + escapeHtml(detailLabels.riskSuffix) + '</span><a href="https://atlas.mitre.org/techniques/' + escapeHtml(threat.atlas) + '" target="_blank" class="detail-badge atlas-link" style="background:rgba(255,90,54,0.08)">' + escapeHtml(threat.atlas) + '</a>';
+      var badgesDiv = document.getElementById('detailBadges');
+      badgesDiv.innerHTML = '';
+      var riskSpan = document.createElement('span');
+      riskSpan.className = 'detail-badge';
+      riskSpan.style.background = rc + '12';
+      riskSpan.style.color = rc;
+      riskSpan.textContent = threat.risk + ' ' + detailLabels.riskSuffix;
+      badgesDiv.appendChild(riskSpan);
+      var atlasLink = document.createElement('a');
+      atlasLink.className = 'detail-badge atlas-link';
+      atlasLink.style.background = 'rgba(255,90,54,0.08)';
+      atlasLink.setAttribute('href', 'https://atlas.mitre.org/techniques/' + threat.atlas);
+      atlasLink.setAttribute('target', '_blank');
+      atlasLink.textContent = threat.atlas;
+      badgesDiv.appendChild(atlasLink);
       document.getElementById('detailBody').innerHTML = '<div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.description) + '</div><div class="detail-value">' + escapeHtml(threat.description) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.attackVector) + '</div><div class="detail-value">' + escapeHtml(threat.attackVector) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.affected) + '</div><div class="detail-value">' + escapeHtml(threat.affected) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.mitigations) + '</div><div class="detail-value">' + escapeHtml(threat.mitigations) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.residualRisk) + '</div><div class="detail-value">' + escapeHtml(threat.residualRisk) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.recommendations) + '</div><div class="detail-value">' + escapeHtml(threat.recommendations) + '</div></div>';
       document.getElementById('detailOverlay').classList.add('active');
       document.querySelectorAll('.threat-card').forEach(function(c) { c.classList.remove('selected'); });

src/pages/trust/ko/threatmodel.astro

@@ -755,7 +755,21 @@ for (const b of trustBoundaries) {
       document.getElementById('detailId').textContent = threat.id + ' \u2022 ' + threat.tactic;
       document.getElementById('detailTitle').textContent = threat.name;
       var rc = getRiskColor(threat.risk);
-      document.getElementById('detailBadges').innerHTML = '<span class="detail-badge" style="background:' + rc + '12;color:' + rc + '">' + escapeHtml(threat.risk) + ' ' + escapeHtml(detailLabels.riskSuffix) + '</span><a href="https://atlas.mitre.org/techniques/' + escapeHtml(threat.atlas) + '" target="_blank" class="detail-badge atlas-link" style="background:rgba(255,90,54,0.08)">' + escapeHtml(threat.atlas) + '</a>';
+      var badgesDiv = document.getElementById('detailBadges');
+      badgesDiv.innerHTML = '';
+      var riskSpan = document.createElement('span');
+      riskSpan.className = 'detail-badge';
+      riskSpan.style.background = rc + '12';
+      riskSpan.style.color = rc;
+      riskSpan.textContent = threat.risk + ' ' + detailLabels.riskSuffix;
+      badgesDiv.appendChild(riskSpan);
+      var atlasLink = document.createElement('a');
+      atlasLink.className = 'detail-badge atlas-link';
+      atlasLink.style.background = 'rgba(255,90,54,0.08)';
+      atlasLink.setAttribute('href', 'https://atlas.mitre.org/techniques/' + threat.atlas);
+      atlasLink.setAttribute('target', '_blank');
+      atlasLink.textContent = threat.atlas;
+      badgesDiv.appendChild(atlasLink);
       document.getElementById('detailBody').innerHTML = '<div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.description) + '</div><div class="detail-value">' + escapeHtml(threat.description) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.attackVector) + '</div><div class="detail-value">' + escapeHtml(threat.attackVector) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.affected) + '</div><div class="detail-value">' + escapeHtml(threat.affected) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.mitigations) + '</div><div class="detail-value">' + escapeHtml(threat.mitigations) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.residualRisk) + '</div><div class="detail-value">' + escapeHtml(threat.residualRisk) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.recommendations) + '</div><div class="detail-value">' + escapeHtml(threat.recommendations) + '</div></div>';
       document.getElementById('detailOverlay').classList.add('active');
       document.querySelectorAll('.threat-card').forEach(function(c) { c.classList.remove('selected'); });

src/pages/trust/threatmodel.astro

@@ -754,7 +754,21 @@ for (const b of trustBoundaries) {
       document.getElementById('detailId').textContent = threat.id + ' \u2022 ' + threat.tactic;
       document.getElementById('detailTitle').textContent = threat.name;
       var rc = getRiskColor(threat.risk);
-      document.getElementById('detailBadges').innerHTML = '<span class="detail-badge" style="background:' + rc + '12;color:' + rc + '">' + escapeHtml(threat.risk) + ' Risk</span><a href="https://atlas.mitre.org/techniques/' + escapeHtml(threat.atlas) + '" target="_blank" class="detail-badge atlas-link" style="background:rgba(255,90,54,0.08)">' + escapeHtml(threat.atlas) + '</a>';
+      var badgesDiv = document.getElementById('detailBadges');
+      badgesDiv.innerHTML = '';
+      var riskSpan = document.createElement('span');
+      riskSpan.className = 'detail-badge';
+      riskSpan.style.background = rc + '12';
+      riskSpan.style.color = rc;
+      riskSpan.textContent = threat.risk + ' Risk';
+      badgesDiv.appendChild(riskSpan);
+      var atlasLink = document.createElement('a');
+      atlasLink.className = 'detail-badge atlas-link';
+      atlasLink.style.background = 'rgba(255,90,54,0.08)';
+      atlasLink.setAttribute('href', 'https://atlas.mitre.org/techniques/' + threat.atlas);
+      atlasLink.setAttribute('target', '_blank');
+      atlasLink.textContent = threat.atlas;
+      badgesDiv.appendChild(atlasLink);
       document.getElementById('detailBody').innerHTML = '<div class="detail-section"><div class="detail-label">Description</div><div class="detail-value">' + escapeHtml(threat.description) + '</div></div><div class="detail-section"><div class="detail-label">Attack Vector</div><div class="detail-value">' + escapeHtml(threat.attackVector) + '</div></div><div class="detail-section"><div class="detail-label">Affected Components</div><div class="detail-value">' + escapeHtml(threat.affected) + '</div></div><div class="detail-section"><div class="detail-label">Current Mitigations</div><div class="detail-value">' + escapeHtml(threat.mitigations) + '</div></div><div class="detail-section"><div class="detail-label">Residual Risk</div><div class="detail-value">' + escapeHtml(threat.residualRisk) + '</div></div><div class="detail-section"><div class="detail-label">Recommendations</div><div class="detail-value">' + escapeHtml(threat.recommendations) + '</div></div>';
       document.getElementById('detailOverlay').classList.add('active');
       document.querySelectorAll('.threat-card').forEach(function(c) { c.classList.remove('selected'); });

src/pages/trust/zh-cn/threatmodel.astro

@@ -755,7 +755,21 @@ for (const b of trustBoundaries) {
       document.getElementById('detailId').textContent = threat.id + ' \u2022 ' + threat.tactic;
       document.getElementById('detailTitle').textContent = threat.name;
       var rc = getRiskColor(threat.risk);
-      document.getElementById('detailBadges').innerHTML = '<span class="detail-badge" style="background:' + rc + '12;color:' + rc + '">' + escapeHtml(threat.risk) + ' ' + escapeHtml(detailLabels.riskSuffix) + '</span><a href="https://atlas.mitre.org/techniques/' + escapeHtml(threat.atlas) + '" target="_blank" class="detail-badge atlas-link" style="background:rgba(255,90,54,0.08)">' + escapeHtml(threat.atlas) + '</a>';
+      var badgesDiv = document.getElementById('detailBadges');
+      badgesDiv.innerHTML = '';
+      var riskSpan = document.createElement('span');
+      riskSpan.className = 'detail-badge';
+      riskSpan.style.background = rc + '12';
+      riskSpan.style.color = rc;
+      riskSpan.textContent = threat.risk + ' ' + detailLabels.riskSuffix;
+      badgesDiv.appendChild(riskSpan);
+      var atlasLink = document.createElement('a');
+      atlasLink.className = 'detail-badge atlas-link';
+      atlasLink.style.background = 'rgba(255,90,54,0.08)';
+      atlasLink.setAttribute('href', 'https://atlas.mitre.org/techniques/' + threat.atlas);
+      atlasLink.setAttribute('target', '_blank');
+      atlasLink.textContent = threat.atlas;
+      badgesDiv.appendChild(atlasLink);
       document.getElementById('detailBody').innerHTML = '<div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.description) + '</div><div class="detail-value">' + escapeHtml(threat.description) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.attackVector) + '</div><div class="detail-value">' + escapeHtml(threat.attackVector) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.affected) + '</div><div class="detail-value">' + escapeHtml(threat.affected) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.mitigations) + '</div><div class="detail-value">' + escapeHtml(threat.mitigations) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.residualRisk) + '</div><div class="detail-value">' + escapeHtml(threat.residualRisk) + '</div></div><div class="detail-section"><div class="detail-label">' + escapeHtml(detailLabels.recommendations) + '</div><div class="detail-value">' + escapeHtml(threat.recommendations) + '</div></div>';
       document.getElementById('detailOverlay').classList.add('active');
       document.querySelectorAll('.threat-card').forEach(function(c) { c.classList.remove('selected'); });