Page MenuHomePhabricator

CSSMin should not convert urls for filters
Closed, DeclinedPublic

Description

Consider the HTML

<svg>
<filter id="sepia">
 <feColorMatrix type="matrix"
     values="0.393 0.769 0.189 0 0
         0.349 0.686 0.168 0 0
         0.272 0.534 0.131 0 0
         0   0   0   1 0"/>
</filter>
<svg>

and css

.foo { filter: url(#sepia); }

ResourceLoader will convert the above into a relative URL.

We should at the very least blacklist url parsing of the value of the filter css property.

Event Timeline

Krinkle renamed this task from CssJanus should not convert urls for filters to CSSMin should not convert urls for filters.Dec 22 2016, 10:46 PM
Krinkle triaged this task as Low priority.

It converts it to a relative url because CSSMin assumes all resources referenced in a stylesheet are stored on disk, and per CSS syntax rules, urls are resolved relative to where the stylesheet is stored. As such, since we combine stylesheets and serve them from elsewhere, CSSMin remaps the urls back to relative to where the file was found.

This works as expected for background images, fonts etc.. Filters are also allowed to reference SVG files, so excluding all filters would break things. The thing is that filters appear to allow be allowed to reference SVG elements on the current web page.

Adding an exemption in remapping logic for hash urls with no host or path component should resolve this.

Triaging as Low priority bug because in general we advocate for stylesheets to be re-usable and loadable on-demand onto any host page. As such, there shouldn't be a dependency between the page HTML and the stylesheet (e.g. you'd have to ensure some SVG filter is preloaded onto the page by non-ResourceLoader means).

I'd recommend to instead load this filter by file reference. If it should block page rendering above the fold, you can also let @embed it.

Volker_E lowered the priority of this task from Low to Lowest.Feb 8 2017, 7:22 PM