This technique allows normally separate elements such as images and style sheets to be fetched in a single Hypertext Transfer Protocol (HTTP) request, which may be more efficient than multiple HTTP requests,[1] and used by several browser extensions to package images as well as other multimedia content in a single HTML file for page saving.
An HTML fragment embedding a base64 encoded PNG picture of a small red dot: In this example, the lines are broken for formatting purposes.
A favicon can also be made with utf8 encoding and SVG data which has to appear in the 'head' section of the HTML: A Cascading Style Sheets (CSS) rule that includes a background image: In this example, the \ +
A JavaScript statement that opens an embedded subwindow, as for a footnote link: A Scalable Vector Graphic image containing an embedded JPEG image encoded in Base64: The data URI can be utilized to construct attack pages that attempt to obtain usernames and passwords from unsuspecting web users.
It can also be used to get around cross-site scripting (XSS) restrictions, embedding the attack payload fully inside the address bar, and hosted via URL shortening services rather than needing a full website that is controlled by a third party.