Encoding svg dataurl #3418

FreddyA · 2023-10-02T07:52:38Z

The encoding for svgs when using loader dataurl does not validate using validator.w3org.
Error: "Bad value for attribute src on element img: Illegal character in scheme data: < is not allowed."

I.e. the characters < and > are not encoded in the data url.
The solution should be to encode < and >.
Another solution would be to have the option to use base64-encoding for svgs

hyrious · 2023-10-02T08:21:44Z

Well that's bacause <> are actually effective in browsers. You may read the initial issue #1843 to see how it was landed.

FreddyA · 2023-10-02T08:37:19Z

Ok, it is effective but not not a legal character according to w3c. I understand how it saves some data not to encode, but since it does not validate, is there a way around this?

evanw · 2023-10-03T02:59:30Z

Since you haven't provided any information about how to reproduce this, I'm going to make something up:

<!doctype html>
<img src="data:image/svg+xml,&lt;svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'&gt;&lt;rect width='100' height='100' fill='red'/&gt;&lt;/svg&gt;">

That should show up as a red square. That appears to work fine in Chrome, Safari, and Firefox. Which specific browsers does this HTML not work in for you (including the version information)? Alternatively, please provide enough information to reproduce an incorrect rendering given a test case of yours (along with a specific browser).

If you need base64 encoding because some additional tooling you're using needs data URLs to be in base64 form, then you can explicitly use the base64 loader yourself: https://esbuild.github.io/content-types/#base64.

FreddyA · 2023-10-03T08:53:06Z

The problem is that the characters < and > are not encoded and that is not valid in the src-element.
If I take the image from your example
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="red"/></svg>
that would be encoded by esbuild when using the loader dataurl to
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="red"/></svg>

To validate that: paste the following into the validator; https://validator.w3.org/nu/#textarea:

<!doctype html>
<html lang="en">
<head><title>svg</title></head>
<body>
<img src="data:image/svg+xml,<svg width=&quot;100&quot; height=&quot;100&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><rect width=&quot;100&quot; height=&quot;100&quot; fill=&quot;red&quot;/></svg>" alt="">
</body>
</html>

as I see it, < and > are supported unencoded by all modern browsers, but it is still not legal html.
< and > are not encoded at all, and the rest is html-encoded. When the whole svg should be urlencoded.
https://html.spec.whatwg.org/#refsRFC2397

Attribute values in [RFC2045] are allowed to be either represented as
tokens or as quoted strings. However, within a "data" URL, the
"quoted-string" representation would be awkward, since the quote mark
is itself not a valid urlchar. For this reason, parameter values
should use the URL Escaped encoding instead of quoted string if the
parameter values contain any "tspecial".

evanw · 2023-10-03T15:04:55Z

<!doctype html>
<html lang="en">
<head><title>svg</title></head>
<body>
<img src="data:image/svg+xml,<svg width=&quot;100&quot; height=&quot;100&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><rect width=&quot;100&quot; height=&quot;100&quot; fill=&quot;red&quot;/></svg>" alt="">
</body>
</html>

I'm confused. How did you even get this HTML in the first place? All the HTML templating languages I've used automatically escape < and > in HTML attributes for you so that this can't happen.

Regardless, you didn't respond to my previous post:

Which specific browsers does this HTML not work in for you (including the version information)? Alternatively, please provide enough information to reproduce an incorrect rendering given a test case of yours (along with a specific browser).

evanw · 2023-10-17T01:20:29Z

I'm closing this issue due to lack of a follow-up response. AFAIK the data URLs that esbuild generates work fine in all known browsers. It is not esbuild's job to pre-escape the characters in its data URLs for all possible contexts that they might be used in. Instead, you should be properly escaping data for the relevant context when building HTML using string concatenation.

raplemie · 2023-10-19T14:00:03Z

<!doctype html>
<img src="data:image/svg+xml,&lt;svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'&gt;&lt;rect width='100' height='100' fill='red'/&gt;&lt;/svg&gt;">

This is not what esbuild will encode though, esbuild will not encode the < and > as it is done in this example, nor would it convert double quotes to single quotes if they are present in the .svg file that it pulls out, so while this may work, it is not what esbuild would output.

Is it expected that the content of an '.svg' files that is targeted should already be encoded correctly ?

As an example, esbuild will encode # and %, but not the other invalid characters for URI. (Mainly for svg import, <, >, "...)
see

esbuild/internal/helpers/dataurl.go

Lines 49 to 50 in 4e11b50

    
           if c == '\t' || c == '\n' || c == '\r' || c == '#' || i >= trailingStart || 
        
           	(c == '%' && i+2 < n && isHex(text[i+1]) && isHex(text[i+2])) {

evanw · 2023-10-19T16:40:51Z

Is it expected that the content of an '.svg' files that is targeted should already be encoded correctly ?

The only escaping that the dataurl loader does is the escaping necessary for a browser to be able to interpret it correctly. It is not esbuild's job to pre-escape the characters in its data URLs for all possible contexts that they might be used in. In particular, esbuild's dataurl loader doesn't do any special additional escaping for embedding data URLs into HTML element attributes (or for embedding into CSS, or for embedding into JSON, or for embedding into YAML, etc.).

If you have a specific example of a browser that esbuild's data URLs doesn't work with, then please post that information here (the browser name, version, operating system, and any other information necessary to reproduce the problem). Without a demonstration that esbuild's dataurl loader behaves incorrectly in a browser, I consider esbuild's dataurl loader to be behaving correctly.

raplemie · 2023-10-19T16:46:34Z

For a browser to be able to interpret it correctly.

Ok, if that's the goal and not to follow the standard defined for data urls then I guess there is no issue.

evanw added the unactionable label Oct 11, 2023

evanw closed this as not planned Won't fix, can't repro, duplicate, stale Oct 17, 2023

ImVeryLost mentioned this issue Oct 19, 2023

Menu item types for IModelApp.uiAdmin.showContextMenu should allow React.ReactNode icon types iTwin/appui#521

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Encoding svg dataurl #3418

Encoding svg dataurl #3418

FreddyA commented Oct 2, 2023

hyrious commented Oct 2, 2023 •

edited

FreddyA commented Oct 2, 2023

evanw commented Oct 3, 2023

FreddyA commented Oct 3, 2023

evanw commented Oct 3, 2023

evanw commented Oct 17, 2023

raplemie commented Oct 19, 2023 •

edited

evanw commented Oct 19, 2023

raplemie commented Oct 19, 2023

Encoding svg dataurl #3418

Encoding svg dataurl #3418

Comments

FreddyA commented Oct 2, 2023

hyrious commented Oct 2, 2023 • edited

FreddyA commented Oct 2, 2023

evanw commented Oct 3, 2023

FreddyA commented Oct 3, 2023

evanw commented Oct 3, 2023

evanw commented Oct 17, 2023

raplemie commented Oct 19, 2023 • edited

evanw commented Oct 19, 2023

raplemie commented Oct 19, 2023

hyrious commented Oct 2, 2023 •

edited

raplemie commented Oct 19, 2023 •

edited