placeholders.dev
placeholders.dev copied to clipboard
Cherry
Check for malformed colors.
Related to my demo PR
Not sure what the result should be. Could just fall back to default foreground & background defaults, or find a way to make a readable auto-fix (IIRC TinyColor). I don't think returning an error is a good idea, though perhaps sneaking a small error text (comment?) in the SVG could work.
Bonus: if you use TinyColor or roll your own fixer code, you could expose the checker &/or fixer as its own APIs....
If you need RegEx help: RegexHQ on Github 😎 https://regexr.com 'Community Patterns" https://regex101.com Though color names will be an issue....
I'm actually already using validate-color to validate colour inputs as per https://github.com/Cherry/placeholders.dev/blob/97460d8fa6dcc423809966ff09ec0662a575b341/workers-site/index.js#L38. It works reasonably well, but it's definitely possible to get some malformed data through it if you try hard enough.
I'm honestly not sure I care too much though. If people end up creating malformed SVGs, that's kinda on them. I've fixed the possibility to exploit with XSS as per #1 so the only real problem here is a malformed SVG.
I could possibly run the generated SVGs through a validator before serving it, and then perhaps just defaulting if the SVG comes back as invalid though.
Going to close this with the addition of testing in https://github.com/Cherry/placeholders.dev/pull/26. The colour validation seems pretty solid now, but please feel free to create a PR with failing tests or let me know if you have anything that gets through it!