Draft for Information Only
Content
HTML Data URL Syntax of a Data URL Example of Data URLs The Simplest Data URL A Simple Escape-Encoded Data URL A base64-Encoded Text/Plain Data URL A base64-Encoded Text/HTML Data URL with HTML Elements A Simple Text/HTML Data URL with HTML Elements A Simple Text/HTML Data URL with <img> Element A Simple Text/HTML Data URL with Script
HTML Data URL
In general sense, a data url is an internet standards track protocol for embedding a small file inline as the source or data of a element in a document internally. Although Data URL is supported by most
modern user agent. the supporting of Data URL is still limited due to
various reasons.
Syntax of a Data URL
data:[<mediatype>][;base64],<data>
data: the prefix of a data URL
<mediatype> a MIME type string. The default value is 'text/plain; charset=US-ASCII if omitted
;base64 an optional base64 token with a ';' seperator for non-textual data.
, a comma data seperator
<data> the embed data
Example of Data URLs
The Simplest Data URL
The simplest data URL is an empty data URL with default values.
HTML Document Input: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
</head>
<body>
<div style="border:1px solid black">
<img src="/" alt="image" />
<img src="data:," alt="image" />
</div>
</body>
</html>
HTML Web Page Embedded Output:
A Simple Escape-Encoded Data URL
A simple data URL with default value can be used to embed escaped plain text.
HTML Document Input: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
</head>
<body>
<iframe src="data:,Hello%2C%20World!" height="40" width="130"><p>not support</p></iframe>
</body>
</html>
HTML Web Page Embedded Output:
A base64-Encoded Text/Plain Data URL
A base64-encoded data URL with default value can be used to embed base64-encoded plain text.
HTML Document Input: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
</head>
<body>
<iframe src="data:text/plain;base64,PHRhYmxlIHN0eWxlPSJib3JkZXI6MXB4IHNvbGlkIGJsYWNrIj48dHI+PHRkIHN0eWxlPSJi
b3JkZXI6MXB4IHNvbGlkIGJsYWNrIj4xPC90ZD48dGQgc3R5bGU9ImJvcmRlcjoxcHggc29s
aWQgYmxhY2siPjI8L3RkPjwvdHI+PC90YWJsZT4g" height="90" width="500" ><p>not support</p></iframe>
</body>
</html>
HTML Web Page Embedded Output:
A base64-Encoded Text/HTML Data URL with HTML Elements
A base64-encoded data URL with text/html media type can be used to embed base64-encoded html elements.
HTML Document Input: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
</head>
<body>
<iframe src="data:text/html;base64,PHRhYmxlIHN0eWxlPSJib3JkZXI6MXB4IHNvbGlkIGJsYWNrIj48dHI+PHRkIHN0eWxlPSJi
b3JkZXI6MXB4IHNvbGlkIGJsYWNrIj4xPC90ZD48dGQgc3R5bGU9ImJvcmRlcjoxcHggc29s
aWQgYmxhY2siPjI8L3RkPjwvdHI+PC90YWJsZT4g" height="90" width="500" ><p>not support</p></iframe>
</body>
</html>
HTML Web Page Embedded Output:
A Simple Text/HTML Data URL with HTML Elements
A simple data URL with text/html media type can be used to embed escaped html elements.
HTML Document Input: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
</head>
<body>
<iframe src="data:text/html,%3Ctable%20style=%22border:1px%20solid%20black%22%3E%3Ctr%3E%3Ctd%20style=%22border:1px%20solid%20black%22%3E1%3C/td%3E%3Ctd%20style=%22border:1px%20solid%20black%22%3E2%3C/td%3E%3C/tr%3E%3C/table%3E%20" height="90" width="500" ><p>not support</p></iframe>
</body>
</html>
HTML Web Page Embedded Output:
A Simple Text/HTML Data URL with <img> Element
A base64-encoded data URL with image/png/html media type can be used to embed base64-encoded png image.
HTML Document Input: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
</head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAQCAYAAAA1Qw7OAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAuElEQVR42mL89u33fwYgEOL6BKIY3n3jA9MAAcQCEywu52SAsUGSAAHEAmMgA5AYQACxMKCB6npWMA0QQEzI5iMDgABi4GB4+x+Eq8u//Qc5BIYBAgguwcl0EkUSIIAYQBxpietgSWG2O3BJgABiABEgDkiCl+El3FiAAGKAaYVJwjBAADEgW4gsCRBADOiugUkABBATuvNhoQAQQAzY/AASAwggFpAKZJ/3dn4H6wIIIEZcwQ4QYAAtgqwnDHb3DwAAAABJRU5ErkJggg==" alt="image" />
</body>
</html>
HTML Web Page Embedded Output:
A Simple Text/HTML Data URL with Script
A simple data URL with text/html media type can be used to embed escaped html elements.
HTML Document Input: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
</head>
<body>
<iframe src="data:text/html,<script>document.write(1+2);</script> " height="90" width="500" ><p>not support</p></iframe>
</body>
</html>
HTML Web Page Embedded Output:
©sideway
ID: 180300002 Last Updated: 3/2/2018 Revision: 0 Ref:
References
Locale ID, , http://msdn.microsoft.com/en-us/goglobal/bb964664.aspx