Stack Overflow
Stack Overflow

Questions tagged [data-uri]

A data URI is a URL whose scheme part is 'data:' and which directly represents a resource, rather than the location of a resource.

The following is an example of a data URI:

data:text/html;base64,PCFkb2N0eXBlIGh0bWw+CjxodG1sPgogIDxoZWFkPg
ogICAgPG1ldGEgY2hhcnNldD11dGYtOD4KICAgIDx0aXRsZT5UaGVyZSBpcyBuby
BzcG9vbi48L3RpdGxlPgogICAgPHN0eWxlPgogICAgICBodG1sIHsgYmFja2dyb3
VuZDogI2ZhNTsgaGVpZ2h0OiAxMDAlIH0KICAgICAgcCB7IGNvbG9yOiAjNWFmOy
B0ZXh0LWFsaWduOiBjZW50ZXI7IG1hcmdpbjogNmVtOyBmb250LXNpemU6IDJlbS
B9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPjxhIGhyZW
Y9aHR0cDovL3N0YWNrb3ZlcmZsb3cuY29tL3RhZ3MvZGF0YS11cmkvaW5mbz5CYW
NrPC9hPjwvcD4KICA8L2JvZHk+CjwvaHRtbD4K

That data URI contains a HTML document. If pasted into the address bar of a compliant browser, the document it contains will be displayed without the need to request any external resources.

Data URIs can be used in the href or src attributes of <a> and <img> elements, etc., eliminating the need for additional HTTP requests.

592 questions
11
votes
3 answers

How to detect Microsoft Chromium Edge (chredge , edgium) in Javascript

'Edge 75' will be (is?) the first Chromium Based Edge browser. How can I check if this browser is Edge on Chrome ? (What I really want to know is if the browser fully supports data-uri's - https://caniuse.com/#feat=datauri - so feature detection…
commonpike
  • 10,499
  • 4
  • 65
  • 58
11
votes
1 answer

Anchor with data URI and download attribute not working in iOS/Safari

I've built a simple web app which creates an image from a canvas element using canvas.toDataURL(). I then create an anchor tag using the data URI, containing a download attribute. Something like this:
Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
11
votes
3 answers

Saving Data URI as Image?

On a node server I would like to save uploaded datauri data as an image. To do this I've tried decoding the content of this…
micah
  • 7,596
  • 10
  • 49
  • 90
11
votes
1 answer

how to convert data URI to file in Ruby

How do I convert a data URI that comes from the result of the FileReader API into an image file that can be saved in the file system in Ruby? What I'm currently trying to do is using base64 decode to convert the data_uri string which looks like…
user225269
  • 10,743
  • 69
  • 174
  • 251
11
votes
1 answer

Using a data: encoded SVG as a CSS filter

Maybe someone can point an error in my test, but it seems that if I want to use a SVG filter in CSS encoding it as data: uri to avoid using an additional file, it fails if the data isn't encoded as base64. I've tested with Firefox Aurora, other…
AlfonsoML
  • 12,634
  • 2
  • 46
  • 53
10
votes
5 answers

How can I convert image binary from API call to data URI in Javascript?

The Google API I'm using is transmitting images only as binary data. I have absolutly no idea how to put this into a data URI to display it, thanks for any help! The call I'm talking about is this API call. As you can see, it says: The server…
Luke
  • 8,235
  • 3
  • 22
  • 36
10
votes
1 answer

Data URI used to export to CSV/Excel (no server-side request) : browser support/limitations?

Following the questions: Javascript or Flash export to CSV/Excel Is it possible to use any HTML5 fanciness to export local storage to Excel? and as suggested, I'm thinking about generating a CSV file content in the client and then use a Data URI…
Marc Polizzi
  • 9,275
  • 3
  • 36
  • 61
10
votes
2 answers

Unescaped '#' characters in a data URI body deprecated; How to find in project?

I'm getting this warning from Chrome in my Angular 2+ application. Ok, so how am I supposed to go about finding where this issue is occurring in my project with so many data URIs? Wait for it to fail, I suppose? Yikes. [Deprecation] Using unescaped…
BBaysinger
  • 6,614
  • 13
  • 63
  • 132
10
votes
1 answer

How to break lines in URLs in stylesheet

I have a stylesheet with really long lines (data urls). Is there anyway I can break those lines into smaller lines? Example of long line: background-image: url(data: image/png;base64, really long string);
Poul Bak
  • 10,450
  • 5
  • 32
  • 57
10
votes
1 answer

Html5 video track data uri

I want to set However, I get Cross-origin text track load denied by Cross-Origin Resource Sharing policy. The…
colder
  • 644
  • 7
  • 12
10
votes
1 answer

Are unquoted data URIs valid in CSS?

#something { background: url(data:image/png;base64,ABCDEF); } This snippet works in all browsers which support data URIs (obviously with something else than ABCDEF). Also, it's valid according to the CSS 2.1 spec: ...optional single quote (')…
MM.
  • 2,653
  • 4
  • 26
  • 36
10
votes
2 answers

Are data URIs on s XSS exploitable?

After reading this article I don't have a clear answer: http://palizine.plynt.com/issues/2010Oct/bypass-xss-filters/ Will browsers interpret text/html data URI payload in src as an document where