Closed Bug 1377282 Opened 7 years ago Closed 7 years ago

Hashes in data: URIs are escaped differently from Chrome

Categories

(Core :: Networking, defect)

Product:
Core
Component:
Networking
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 826562

People

(Reporter: billm, Unassigned)

References

Details

STR:

1. Entering the following URL into the URL bar:
data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>

In Chrome, this renders a gray circle. In Firefox, it prints an error.

These URIs are used in the CSS for TodoMVC, so they affect the Speedometer benchmark. One version of the benchmark uses this CSS:

.todo-list li .toggle:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}

.todo-list li .toggle:checked:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}

In Chrome, you get a styled checkbox. In Firefox, it's just a plain old OS checkbox.

(Note that even when I escape the #, this CSS still doesn't work. I haven't figured out why yet. But at least the URL works.)
> In Firefox, it prints an error.

Right, Chrome is not following the URL spec here.  They have longstanding bugs about it...
Flags: needinfo?(mcmanus)
bz, do they show signs that they intend to fix the bugs? If its defacto not going to change - then there is something to be said for just doing webcompat and tracking them on non-strategic stuff like this.

valentin can likely change the escaping if this isn't something we want to throw down the compliance over.
Flags: needinfo?(mcmanus) → needinfo?(bzbarsky)
> bz, do they show signs that they intend to fix the bugs?

That's a question for Anne; I haven't been tracking URL spec compliance in Chrome.

> then there is something to be said for just doing webcompat and tracking them on non-strategic stuff like
> this.

Well, then at a minimum you have to figure out what their behavior actually is.  That is, is the part after '#' both considered a part of the URL _and_ considered to be a reference?  Or something else?

The last time this question came up in a standards setting, I believe they agreed to the behavior we are currently shipping.  But I could be misremembering.
Flags: needinfo?(bzbarsky) → needinfo?(annevk)
https://bugs.chromium.org/p/chromium/issues/detail?id=123004

I just pinged rbyers on IRC that it's becoming a problem.

As far as behavior goes, it seems Chrome and Safari interpret it both as data and as a place to scroll to given this test from Daniel Holbert in https://bugs.webkit.org/show_bug.cgi?id=68089:

data:application/xhtml+xml,<html xmlns='http://www.w3.org/1999/xhtml'><div style='height:3000px; width: 300px; background: red'/><div id='target' style='height: 3000px; width: 300px; background: green;'/></html>#target
Flags: needinfo?(annevk)
(In particular, note that it shows "green" but also shows a parse error dialog if you scroll upwards. Apparently they render XML up to the first error.)
Chromium bug is here: https://bugs.chromium.org/p/chromium/issues/detail?id=123004

billm: The main reason for it not being prioritized higher is that nobody has had an example of this being hit in a real-world site.  It sounds like your example is the most real we've heard of.  I see the case you're describing and can repro it at:

http://todomvc.com/examples/polymer/index.html
http://todomvc.com/examples/gwt/

and probably a few others (https://github.com/tastejs/todomvc/search?utf8=%E2%9C%93&q=%22%23bddad5%22&type=)

I'll add this data to the chromium bug and request it be re-triaged.
Looks like Chromium is going to fix this and we're doing well.
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → INVALID
See Also: → 1379271
(I think this is basically a dupe of bug 826562 -- resolving as such.)

(In reply to Bill McCloskey (:billm) from comment #0)
> In Chrome, this renders a gray circle. In Firefox, it prints an error.
> [...]
> (Note that even when I escape the #, this CSS still doesn't work. I haven't
> figured out why yet. But at least the URL works.)

FWIW, escaping the # works for me (replacing the # with %23 -- not sure if that's the same type of escaping that you're doing):
data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="%23ededed" stroke-width="3"/></svg>

That's the correct way of encoding this data URL so as not to trigger a premature fragment identifier.
Resolution: INVALID → DUPLICATE
You need to log in before you can comment on or make changes to this bug.