Sideway
output.to from Sideway

KnowledgeBase



Data URL


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 ;base64an 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:

not support

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:

not support

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:

not support

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:

not support

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:

not support

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:

not support

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:

not support


©sideway

ID: 180300002 Last Updated: 2018/3/2 Revision: 0 Ref:

IMAGE

Home (5)

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (336)

Reference (66)

Computer

Hardware (149)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (618)new

CSS (SC)

ASP.NET (SC)

HTML

Knowledge Base

Common Color (SC)

Html Entity (Unicode) (SC)

Html 401 Special (SC)

OS (388)new

MS Windows

Windows10 (SC)

.NET Framework (SC)

DeskTop (7)

Knowledge

Mathematics

Formulas (8)

Number Theory (206)

Algebra (20)

Trigonometry (18)

Geometry (18)

Calculus (67)

Complex Analysis (21)

Engineering

Tables (8)

Mechanical

Mechanics (1)

Rigid Bodies

Statics (92)

Dynamics (37)

Fluid (5)

Fluid Kinematics (5)

Control

Process Control (1)

Acoustics (19)

FiniteElement (2)

Biology (1)

Geography (1)


Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 10 Feb 2019