The first character on data attributes values becomes underscore when it is a number.
html markup generated
block configurations

CommentFileSizeAuthor
#7 after_xss.png108.61 KBrakesh.regar
#7 after_number_value.png99.64 KBrakesh.regar
#7 before_xss.png77.61 KBrakesh.regar
#7 before_number_value.png98.43 KBrakesh.regar
Screenshot 2025-09-04 at 12.21.25 PM.png19.27 KBmjgruta
Screenshot 2025-09-04 at 12.18.31 PM.png4.02 KBmjgruta

Issue fork block_class-3544750

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mjgruta created an issue. See original summary.

kul.pratap’s picture

kul.pratap commented
Assigned: Unassigned » kul.pratap

kul.pratap opened merge request !63

kul.pratap’s picture

kul.pratap commented
Assigned: kul.pratap » Unassigned
Status: Active » Needs review

Replaced Html::cleanCssIdentifier() with Html::escape() to prevent numeric data-* attribute values from being prefixed with underscores.

Please review.

renatog’s picture

renatog commented
Issue tags: +Needs manual testing
kul.pratap’s picture

kul.pratap commented

Previously code uses: 

$attribute_value = Html::cleanCssIdentifier($attribute_value);

This method is designed to sanitize CSS identifiers (e.g., class names, IDs).
It ensures they are valid by replacing leading numbers and stripping disallowed characters. However, this is too strict when applied to

HTML attribute values (such as `data)', because:

Valid `data-` attribute values may begin with digits (e.g., `550`).

Sanitization with cleanCssIdentifier() incorrectly rewrites these values (`550 → _550`).

$attribute_value = Html::escape($attribute_value);
    Context-appropriate sanitization:
  • `Html::escape()` encodes special HTML characters (`<`, `>`, `"`, `'`, `&`).
  • This prevents injection into the DOM or breaking out of the attribute context.
  • Preserves valid values:
  • Digits, letters, and safe symbols remain unchanged (`550` stays `550`).
    Security Conclusion
  • `Html::cleanCssIdentifier()` is only necessary when generating CSS identifiers.
  • For attribute values in HTML, `Html::escape()` provides the correct level of protection against XSS.
  • Therefore, this change maintains security while restoring correct behavior for numeric and other valid attribute values.
rakesh.regar’s picture

rakesh.regar
Primary language Hindi
Location India 🇮🇳
commented
StatusFileSize
new before_number_value.png98.43 KB
new before_xss.png77.61 KB
new after_number_value.png99.64 KB
new after_xss.png108.61 KB

I have done the testing for this MR and changes are working as expected.

dydave made their first commit to this issue’s fork.

  • dydave committed 60a02d81 on 4.0.x authored by kul.pratap 
    Issue #3544750 by kul.pratap, renatog, dydave: Prevent data Attributes...
dydave’s picture

dydave commented
Status: Needs review » Fixed

Thanks a lot Kul (@kul.pratap) for the great explanation above at #6!
Super nice Security conclusion!

Great job on the merge request as well! 👍
Additionally, I found: https://drupal.stackexchange.com/a/207036

It does make sense to support various types of data other than CSS classes or IDs identifiers.

Since your comments and details made quite a lot of sense, I went ahead and merged the changes above at #9. 🥳

This might need adding tests, but maybe it should be the object of a different ticket.

Marking issue as Fixed for now.

Thanks again everyone!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.