ApostropheCMS: Color field validation bypass allows stored XSS via HTML appended after rgb()/hsl() prefix

Summary

The color field accepts any string that begins with a valid rgb() / hsl() color, because TinyColor.isValid does not anchor its match at the end of the string. An authenticated user with edit rights can store arbitrary HTML after a valid color prefix. When the stored value is rendered , the payload executes, resulting in stored XSS.

Details

Server-side validation of the color field relies on TinyColor:

const { TinyColor } = require('@ctrl/tinycolor');
if (!new TinyColor(value).isValid) throw self.apos.error('invalid');

TinyColor's rgb/hsl matchers are not anchored at the end of the string, while hex matchers are. Tested with @ctrl/tinycolor

Input	isValid
rgb(1,2,3)<img src=x onerror=alert(1)>	true
rgb(1,2,3)</textarea><script>alert(1)</script>	true
hsl(0,100%,50%);--x:1}</style><script>alert(1)</script>	true
#ff0000<img src=x onerror=alert(1)>	false

The value is saved to MongoDB unchanged (not normalized to hex8).

Relation to GHSA-97v6-998m-fp4g

GHSA-97v6 addressed CSS custom property injection escaping a <style> context. The root cause (validation that accepts trailing content after a valid color) still exists in <= 4.32.2, so [FILL IN: either "the style-tag sink remains exploitable via </style>" OR "a separate HTML sink at X is exploitable"]. Fixing the validation (requiring the full string to be a color, or storing only TinyColor's normalized output) would close both.

Impact

Any user with edit permission can plant persistent JavaScript that runs in the browser of visitors and administrators viewing the affected page, enabling session hijacking and actions as an admin.

Suggested fix

Reject values unless the entire string is a valid color, e.g. normalize on save:

const c = new TinyColor(value);
if (!c.isValid) throw self.apos.error('invalid');
value = c.toHex8String(); // store only normalized output