Opened 8 years ago

Closed 4 years ago

Last modified 3 years ago

#1616 closed defect (bug) (maybelater)

Remote CSS: Allow data URIs in CSS properties

Reported by: ryelle's profile ryelle Owned by:
Milestone: Priority: normal
Component: WordCamp Site & Plugins Keywords: has-patch


I'm using the Remote CSS feature for WordCamp Boston. I'd like to use SVGs for background images, encoded directly into the CSS file using data-uris. Unfortunately, the sanitization for URLs in the jetpack-tweaks sees this value as a URL, and strips data:, thinking it's a bad protocol. You can see it's broken on, the white rectangle should be our logo.

I've attached a patch which just adds data as a valid protocol, but I'm not sure if there are any reasons we might not allow that (security comes to mind, but if we allow any http url...?).

Attachments (1)

data-uri.diff (602 bytes) - added by ryelle 8 years ago.

Download all attachments as: .zip

Change History (13)

8 years ago

#1 @Otto42
8 years ago

I hesitate to allow svg as data uris, because svg can contain script code. Am I paranoid, or correct?

Version 0, edited 8 years ago by Otto42 (next)

#2 @ryelle
8 years ago

SVGs used as images, like css background-images, should have javascript disabled by browsers. mdn outright says this for Gecko, while this presentation makes the claim that svgs as images "should not execute JavaScript"... however I can't find any definitive guide saying that each browser definitely does or not.

FWIW, I've tried adding JS to an SVG image and it's not executing.

Note that svg with malicious script on a different domain has the domain problem. Data uri, not so much.

I hadn't thought of that, so it's worth making sure.

#3 @iandunn
8 years ago

  • Owner set to iandunn
  • Status changed from new to accepted

My understanding is that SVGs can't execute JavaScript in the context of a background image, because they're not a DOM element. IIRC, I didn't intend to prevent data-uris in r2085, but I'll double check before merging this.

#wp24251 has a lot of related information and discussion.

#4 @iandunn
8 years ago

I haven't found anything definitive yet either.

I suspect that all modern browser engines will treat background-image SVGs the same way Gecko does, but there are so many esoteric SVG exploits1 that it's really hard to be confident in anything. Even if JavaScript is disabled, there may still be XML attacks, etc.

I think we need some more research before this can be committed.

In the mean time, it looks like you're hosting the SVGs on an external domain, so that the cross-domain policy offers some protection. Ideally we want all resources hosted on for longevity, but hosting them externally sounds like a good compromise until this is sorted out.

[1] - For example, check out section 3.3 of Crouching Tiger -- Hidden Payload, where data: URIs are used in inline SVGs to nest malicious SVGs via the feImage tag.

This ticket was mentioned in Slack in #core-customize by jorbin. View the logs.

8 years ago

#6 @iandunn
7 years ago

In 4598:

WordCamp Remote CSS: Add unit test for data: protocol in URLs

See #1616

#7 @melchoyce
7 years ago

How's this coming along? Would love to be able to more easily use SVGs :)

#8 @iandunn
7 years ago

  • Owner iandunn deleted
  • Status changed from accepted to assigned

This ticket was mentioned in Slack in #meta-wordcamp by ryelle. View the logs.

5 years ago

#10 @iandunn
5 years ago

It doesn't seem like we have any new information to give us confidence that it's safe to use them in this way. If someone can provide some, though, then we can definitely consider it.

Give how fundamentally broken SVGs are from a security perspective, I think the bar for what would give me confidence is fairly high. e.g., an example of a major project like Drupal doing it, or an authoritative security researcher like Mario Heiderich saying that it's safe.

This ticket was mentioned in Slack in #meta-wordcamp by coreymckrill. View the logs.

4 years ago

#12 @ryelle
4 years ago

  • Resolution set to maybelater
  • Status changed from assigned to closed

We don't have plans to enable data: URIs in our CSS, so closing this ticket for now. We can follow along with the discussion in core, and revisit if/when SVGs are allowed uploads. For now, WordCamps have been using a workaround of hosting SVGs on an external server, and loading those SVGs using regular URLs.

Note: See TracTickets for help on using tickets.