MEDIUM: No input validation on canvas dimensions — zero/negative values cause rendering issues #6

New issue

Closed

opened 2026-05-09 05:11:01 +00:00 by Mark · 0 comments

Mark commented

2026-05-09 05:11:01 +00:00

Owner

Severity: MEDIUM

Location

tokengenerator.html, lines 205-208:

const width = parseInt(widthInput.value, 10) || 256;
const height = parseInt(heightInput.value, 10) || 256;
canvas.width = width;
canvas.height = height;

Description

The width and height inputs accept any numeric value without validation. While the || 256 fallback handles NaN/0 for the constant, the canvas still gets set to 0 width/height if someone types a 0 (because 0 || 256 evaluates to 256 in the variable, but wait — actually parseInt(0,10) returns 0 which is falsy, so it falls back to 256. However, Canvas specification accepts only positive integers. Invalid values like negative numbers pass through to canvas.width and can cause rendering artifacts or browser warnings.

Additionally:

Non-integer values like 1.5 silently truncate to integer.
There is no minimum/maximum size enforcement.
Extremely large values (e.g., 100000) could freeze or crash the browser tab.

Recommended Fix

Clamp values using Math.min(Math.max(value, 50), 4096) (or similar reasonable bounds).
Validate that the result is a positive integer before setting canvas dimensions.
Add HTML5 min and max attributes to the input elements.

Impact

Poor UX and potential browser instability with extreme values.

## Severity: MEDIUM ## Location `tokengenerator.html`, lines 205-208: ```javascript const width = parseInt(widthInput.value, 10) || 256; const height = parseInt(heightInput.value, 10) || 256; canvas.width = width; canvas.height = height; ``` ## Description The width and height inputs accept any numeric value without validation. While the `|| 256` fallback handles NaN/0 for the constant, the canvas still gets set to 0 width/height if someone types a 0 (because `0 || 256` evaluates to 256 in the variable, but wait — actually `parseInt(0,10)` returns 0 which is falsy, so it falls back to 256. However, Canvas specification accepts only positive integers. Invalid values like negative numbers pass through to `canvas.width` and can cause rendering artifacts or browser warnings. Additionally: - Non-integer values like `1.5` silently truncate to integer. - There is no minimum/maximum size enforcement. - Extremely large values (e.g., 100000) could freeze or crash the browser tab. ### Recommended Fix - Clamp values using `Math.min(Math.max(value, 50), 4096)` (or similar reasonable bounds). - Validate that the result is a positive integer before setting canvas dimensions. - Add HTML5 `min` and `max` attributes to the input elements. ### Impact Poor UX and potential browser instability with extreme values.