Closed AlekseySolovey3T closed 5 months ago
Oha, well spotted, thanks - we might change the regex to this, likely that woulf fix the issue, no?
export const CUSTOM_ELEMENT = seal(/^[a-z][_a-z\d]*(-_[a-z\d]+)+$/i);
Oha, well spotted, thanks - we might change the regex to this, likely that woulf fix the issue, no?
export const CUSTOM_ELEMENT = seal(/^[a-z][_a-z\d]*(-_[a-z\d]+)+$/i);
Ignoring the hexadecimal values, the standard suggests the potential use of a
-z
, -
, .
, 0
-9
and _
as valid symbols
It should also follow this structure:
[a-z] (PCENChar)* '-' (PCENChar)*
where PCENChar
is "-" | "." | [0-9] | "_" | [a-z]
in any combination
If we split these rules into groups, we have: (a-z) (PCENChar) (-) (PCENChar) or, in Regex:
([a-z])([-._a-z\d]*)(\-)([-._a-z\d]*)
Play around with regex rules here: https://regex101.com/r/zSEBkx/1
MDN also specifies that it
must start with a lowercase letter
Not sure if you want to be strict about the use of /.../i
export const CUSTOM_ELEMENT = seal(/^([a-z])([-._a-z\d]*)(\-)([-._a-z\d]*)$/i);
Thanks, the proposed RegEx however is vulnerable to ReDos :slightly_smiling_face:
This one should achieve mostly the same and be safe(r) and also match your example well:
/^[a-z][.\w]*(-[.\w]+)+$/i
Wdyt?
Background & Context
When sanitizing a string (in
DOMPurify.sanitize
) with a custom element, it doesn't allow underscores (_
) in_isBasicCustomElement
method. Currently accepted Regex:/^[a-z][a-z\d]*(-[a-z\d]+)+$/i
Bug
Input
with
CUSTOM_ELEMENT_HANDLING
'stagNameCheck
in options set to(tagName) => RegExp(/^customtag-/).exec(tagName)
Given output of
_isBasicCustomElement
null
Expected output of
_isBasicCustomElement
["customtag-my-custom-element_v1"]
Feature
stringMatch(tagName, CUSTOM_ELEMENT)
doesn't pick up_
in tags. The Regex should be extended to include underscores.Docs on a valid custom element name
MDN: