Page MenuHomePhabricator

Add support for SVG data URL in background-image
Closed, DuplicatePublic

Description

I know SVG might be tricky, but you do allow loading them via URL, so there should be no difference. You cannot execute JS in background-image anyway.

This is allowed:

.street-course__cell--pedestrain {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/b0/Deptak.svg");
}

This is not allowed (should be allowed):

.street-course__cell--grass {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="%2373D216"/></svg>');
}

Event Timeline

Anomie moved this task from Unsorted to External on the css-sanitizer board.

css-sanitizer allows all URLs by default, but the caller can override this.

TemplateStyles does override it, to allow URLs based on a whitelist configured via $wgTemplateStylesAllowedUrls.

The problem with just adding data URIs in this manner is that it would allow unsafe SVGs that we'd normally block during the upload process. To be able to allow them, we'd have to extract the file from the data URI and run it through the same filters used when validating uploads to determine whether to allow it or not.

To my knowledge using SVG in background image is safe. At least in that script will not be executed in that context. So the browsers actually does the check for you. You can do weird things (like fa* tags for graphic filters), things that can be heavy for users, but not strictly unsafe. At least not to my knowledge.

In Wikimedia context that is less safe because users could open SVG directly and then the scripts would be executed. So extra screening of SVG for uploaded files is justified there.

See here:
https://security.stackexchange.com/questions/212894/is-there-a-way-to-execute-xss-in-an-html-img-tag-with-svg

And here (especially comparison on the bottom):
https://vecta.io/blog/best-way-to-embed-svg