T09 · Insecure Skill Coding Practices
Error
- Location
- index.js:566
- Finding
- Arbitrary JavaScript Execution in Generated HTML Reports<![CDATA[ ## Vulnerability Details **File Location**: `index.js:133`, `index.js:268-269`, and `index.js:566-621` **Vulnerability Type**: Stored cross-site scripting and unsafe HTML generation **Risk Level**: High ### Vulnerable Code ```javascript ${imageFiles.map((file, index) => `<li><span class="highlight">${path.basename(file)}</span> - 第${index + 1}张设计稿</li>` ).join('\n')} ``` ```javascript <meta name="viewport" content="width=${dimensions.width}, height=${dimensions.height}"> <title>${title}</title> ``` ```javascript const pages = ${JSON.stringify(sections, null, 2)}; ``` ```javascript pages.forEach((page, index) => { const pageEl = document.createElement('div'); pageEl.className = 'page'; pageEl.id = `page-${index}`; // 使用绝对路径加载图片 const imagePath = page.image ? `${window.location.pathname.replace(/[^/]*$/, '')}${page.image}` : ''; const imageHtml = imagePath ? `<img src="${imagePath}" alt="${page.title}" onerror="this.parentElement.innerHTML='<div class=\'image-placeholder\' style=\'width:100%;height:800px;background:#e0e0e0;display:flex;align-items:center;justify-content:center;color:#999;font-size:24px;border-radius:8px;\'>图片加载失败</div>'" />` : `<div class="image-placeholder">图片位置: ${page.title}</div>`; pageEl.innerHTML = ` <div class="page-content"> <div class="text-section"> <h1>${page.title}</h1> ${page.tags ? page.tags.map(tag => `<span class="tag">${tag}</span>`).join('') : ''} ${page.content} </div> <div class="image-section"> ${imageHtml} </div> </div> `; container.appendChild(pageEl); }); ``` ### Technical Analysis The report generator embeds multiple untrusted values into HTML, HTML attributes, CSS, and an executable inline JavaScript block without context-appropriate encoding or sanitization. These values include: - The report `title` - Cu ...[truncated 3811 chars]
- Remediation
- <![CDATA[ ## Remediation Suggestions 1. **Safely serialize data embedded in HTML** Do not insert raw `JSON.stringify()` output into an executable script block. At minimum, encode HTML-sensitive characters: ```javascript function serializeForInlineScript(value) { return JSON.stringify(value) .replace(/</g, '\\u003C') .replace(/>/g, '\\u003E') .replace(/&/g, '\\u0026') .replace(/\u2028/g, '\\u2028') .replace(/\u2029/g, '\\u2029'); } ``` A safer design is to place encoded JSON in a non-executable `<script type="application/json">` element or a separate JSON resource and parse it explicitly. 2. **Avoid `innerHTML` for ordinary text** Construct the report with DOM APIs and assign untrusted text through `textContent`: ```javascript const heading = document.createElement('h1'); heading.textContent = page.title; ``` Create image elements with `document.createElement('img')` and assign `src` and `alt` properties instead of constructing an HTML attribute string. 3. **Sanitize intentionally supported HTML** If `sections[].content` must support HTML, sanitize it with a maintained allowlist-based HTML sanitizer. Permit only the tags and attributes required for report formatting. Remove: - `<script>` elements - Event-handler attributes such as `onclick` and `onerror` - `javascript:` URLs - Dangerous SVG and MathML content - Embedded frames and active objects - Unapproved external resource URLs If arbitrary HTML is not essential, treat section content as plain text or accept a structured content model instead. 4. **Escape server-generated HTML** Apply HTML text encoding to the report title and generated filename list. Use separate encoders for HTML text, HTML attributes, URLs, CSS values, and JavaScript data. 5. **Validate image names and paths** Require image references to be basenames present in the scanned input set. Reject quotes, control characters, path s ...[truncated 911 chars]