T09 · Insecure Skill Coding Practices
Warning
- Location
assets/pixel-lego.html:630- Finding
Unvalidated Canvas Dimensions Allow Client-Side Resource Exhaustion
- Content
View full analysis
$(id).addEventListener('input', () => { const w = parseInt($('widthNum').value); $('widthRange').value = w; if (lockedRatio && sourceImage) { const h = Math.round(w / aspectRatio); $('heightNum').value = h; $('heightRange').value = h; clampHeight(); } generate(); })); ['heightRange', 'heightNum'].forEach(id => $(id).addEventListener('input', () => { const h = parseInt($('heightNum').value); $('heightRange').value = h; if (lockedRatio && sourceImage) { const w = Math.round(h * aspectRatio); $('widthNum').value = w; $('widthRange').value = w; } generate(); })); function generate() { if (!sourceImage) return; const w = parseInt($('widthNum').value); const h = parseInt($('heightNum').value); const precision = getPrecision(); // Create offscreen canvas to sample pixels const oc = document.createElement('canvas'); oc.width = w; oc.height = h; const ctx = oc.getContext('2d'); ctx.drawImage(sourceImage, 0, 0, w, h); const imgData = ctx.getImageData(0, 0, w, h); // Build grid: for each pixel, find nearest LEGO color const grid = []; const colorCount = new Map(); for (let y = 0; y < h; y++) { const row = []; for (let x = 0; x < w; x++) { const idx = (y * w + x) * 4; const rgb = { r: imgData.data[idx], g: imgData.data[idx + 1], b: imgData.data[idx + 2] }; const ci = nearestLego(rgb); row.push(ci); colorCount.set(ci, (colorCount.get(ci) || 0) + 1); } grid.push(row); } ``` ### Technical Analysis The interface documents and declares a valid dimension range of 10–200 studs, but the number-input values are parsed and passed to `generate()` ...[truncated 2159 chars]- Remediation
View remediation