Bug 184542

Summary: CSS variables (custom properties) bug & a potential crash
Product: WebKit Reporter: Roman Komarov <kizmarh>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Major CC: emilio, jonlee, justin_michaud, koivisto, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 11   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on: 190039    
Bug Blocks:    
Attachments:
Description Flags
Crash page none

Description Roman Komarov 2018-04-12 09:03:14 PDT
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.
Comment 1 Roman Komarov 2018-04-12 09:12:12 PDT
Found the minimal CSS that causes the crash:

    *{--:var(---,var(--))}
Comment 2 Alexey Proskuryakov 2018-04-12 09:52:58 PDT
Looks like infinite recursion. Not sure if the crash and the bug are closely enough related to track in one issue.
Comment 3 Radar WebKit Bug Importer 2018-04-12 09:53:21 PDT
<rdar://problem/39384155>
Comment 4 Roman Komarov 2018-04-12 10:12:50 PDT
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.
Comment 5 Roman Komarov 2018-10-03 07:14:23 PDT
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?