Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML: scheme data validation error #475

Closed
jmooring opened this issue Apr 3, 2022 · 4 comments
Closed

HTML: scheme data validation error #475

jmooring opened this issue Apr 3, 2022 · 4 comments

Comments

@jmooring
Copy link
Contributor

jmooring commented Apr 3, 2022

We have an SVG element:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="90" font-size="90">A</text></svg>

This is encoded into a link element's href attribute using the data URI scheme:

<link rel="icon" href="data:image/svg&#43;xml,%3csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3e%3ctext%20y=%2290%22%20font-size=%2290%22%3eA%3c/text%3e%3c/svg%3e">

When minified, %20 is replaced by spaces:

<link rel=icon href="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Ctext y=%2290%22 font-size=%2290%22%3EA%3C/text%3E%3C/svg%3E">

The resulting page does not validate on https://validator.w3.org/:

Illegal character in scheme data: space is not allowed
@jmooring jmooring mentioned this issue Apr 3, 2022
Closed
@tdewolff
Copy link
Owner

tdewolff commented Apr 4, 2022

The specification isn't 100% clear on which characters are allowed and which not, see e.g. #180 (comment). Browsers seem to differ in their implementation, and so do data URI generators. Actually, the following HTML file shows up fine in Firefox and Chrome:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
    <img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Ctext y=%2290%22 font-size=%2290%22%3EA%3C/text%3E%3C/svg%3E">
</body>
</html>

I'll ask in the original issue at Hugo which browser is causing the issue.

@jmooring
Copy link
Contributor Author

jmooring commented Apr 4, 2022

https://datatracker.ietf.org/doc/html/rfc2396#section-2.4

Data must be escaped if it does not have a representation using an unreserved character

The space character does not have a representation using an unreserved character.

@tdewolff
Copy link
Owner

tdewolff commented Apr 5, 2022

Well, the following are not allowed in any URL/URI: non-printables, space, <, >, #, %, ". Additionally, the following are unwise (and disallowed only by IE11): \, [, ], ```, {, }, |, ^. Another fact is that the specification never mentions that a space may be represented as a + in any URL/URI (which we were doing), so I've changed that as well to %20. See:

@tdewolff
Copy link
Owner

tdewolff commented Apr 8, 2022

This has been fixed and released in v.2.11.0!

@tdewolff tdewolff closed this as completed Apr 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jmooring @tdewolff