Check for malformed colors.

[tomByrer]

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....

[Cherry]

I'm actually already using validate-color to validate colour inputs as per

placeholders.dev/workers-site/index.js

Line 38 in 97460d8

function sanitizeColor(input){

. 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.

[Cherry]

Going to close this with the addition of testing in #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!