CSS variables (custom properties) bug & a potential crash

• Component: CSS
• Status: NEW ---

[Roman Komarov]

Created attachment 337803 [details]
Crash page

Steps to reproduce:

Go to https://codepen.io/kizu/pen/MVRRMq (I have managed to reproduce both the bug and the crash both on desktop and mobile safari)

In every other browser (including Chrome) the header should have a lime background, but in Safari it gets the pink one.

Its also possible to cause this page to crash when creating circularity (uncomment the commented line in the above example, or go to https://codepen.io/kizu/pen/OvGYXx, or open an attached page), which is probably related to the above bug as every other browser handle this without crashing (and properly displaying pink background as --foo becomes invalid).

Due to crash being caused by really short CSS string which is possible to pass just as a style attribute to an HTML element, I think it could be really dangerous.

[Roman Komarov]

Found the minimal CSS that causes the crash:

    *{--:var(---,var(--))}

[Alexey Proskuryakov]

Looks like infinite recursion. Not sure if the crash and the bug are closely enough related to track in one issue.

[Radar WebKit Bug Importer]

<rdar://problem/39384155>

[Roman Komarov]

Yes, not sure if they related, but seem to be in both cases related to the variable's fallback, but feel free to split into a new one anyway.

[Roman Komarov]

Any news about this?

I find that having a case where 22-characters if CSS cause a crash to be rather dangerous, as it could be possible to use it as an attack, by inserting it somewhere where you have an access to CSS/HTML, and via it basically disabling the browsing experience for anyone using Safari.

Also, a question: is it something that would be safe to write about in social networks, so people would know that this is possible and could potentially protect themselves by stripping CSS variables from any user-generated fields, and also as an interesting anecdote about the circularity in CSS?

[Tyler Wilcock]

I can't reproduce this in Safari Version 14.0 (15610.1.28.1.9, 15610).  I get a lime green background, and no crash from the Codepen nor the minimal CSS you've provided.  Can you confirm whether or not this is still an issue?

[Ahmad Saleem]

I am not able to reproduce any crash with test case in Safari 15.6.1 and Safari Technology Preview 151 but I don't get "Lime" background but light reddish / pinkish background and it is same as other browsers (Chrome Canary 106 and Firefox Nightly 105).

Please mark this bug accordingly. Thanks!