T09 · Insecure Skill Coding Practices
Error
- Location
template.html:317- Finding
DOM-Based HTML Injection Through Unescaped Causal Graph Data
- Content
View full analysis
{ const div = document.createElement("div"); div.className = "node-item"; div.innerHTML = `${node.id}`; div.onclick = () => showDetail(node); document.getElementById("node-list").appendChild(div); }); ``` ```javascript const causes = links.filter(l => l.target === d.id); document.getElementById("detail-causes").innerHTML = causes.length ? causes.map(l => `${l.source} (${l.strength >= 8 ? "强" : "中"}${l.strength})`).join("") : "无直接原因"; const results = links.filter(l => l.source === d.id); document.getElementById("detail-results").innerHTML = results.length ? results.map(l => `${l.target} (${l.strength >= 8 ? "强" : "中"}${l.strength})`).join("") : "无直接结果"; ``` ### Technical Analysis The application inserts graph fields such as `node.id`, `node.color`, `l.source`, and `l.target` into HTML strings and assigns those strings to `innerHTML`. No output encoding, sanitization, or strict input validation is performed before these values reach the HTML parser. The documented workflow accepts causal graph information from users and generates an HTML visualization. If attacker-controlled graph values are interpolated into the `nodes` or `links` structures, those values can break out of their expected text or style contexts and introduce arbitrary HTML elements or event-handler attributes. For example, a node identifier containing the following value would be interpreted as markup when the node list is constructed: ```html``` This issue also affects link source and target na ...[truncated 1617 chars]
- Remediation
View remediation
= 8 ? "Strong" : "Medium"} ${l.strength})`; ``` 3. Validate all generated graph data before rendering: - Require node IDs, types, descriptions, sources, and targets to be strings. - Enforce reasonable length limits. - Validate `layer` and `strength` as bounded integers. - Require every link source and target to reference an existing node. - Restrict colors to an allowlisted format such as `^#[0-9A-Fa-f]{6}$`. 4. If rich HTML is an explicit requirement, process it with a well-maintained HTML sanitizer configured to reject scripts, event-handler attributes, dangerous URLs, and unsafe SVG content. 5. Add a restrictive Content Security Policy as defense in depth. Avoid allowing inline scripts and inline event handlers so that injected markup cannot readily execute JavaScript. 6. Add security tests using payloads in every graph field, including HTML tags, quoted attribute-breaking values, event handlers, and malicious CSS values. ]]>