Search code examples
hyperlinkdata-urimicrosoft-edge

Data URI link <a href="data: doesn't work in Microsoft Edge


This simple code works perfectly everywhere except Microsoft Edge:

<a href="data:text/plain;charset=utf-8,Test">link</a>

[JSFiddle]

In Microsoft Edge I'm getting "That's odd...Microsoft can't find this page" error:

enter image description here

Examples from Mozilla documentation also do not working with the same result.

Here's the output from Edge console:

This error occurs when opening a new edge window, on new tabs it inputs data:text/plain;charset=utf-8,Test as search query into the default search engine.

It seems like Microsoft Edge has no definition for data:

Does anyone know a solution to this?


Update: unfortunately, it seems that there's no way to use data URI in links in IE/Edge. I've created related question about detecting data URI support in links: Detect data URI in links support with Modernizr


Solution

  • As of 2020, the new Microsoft Edge built on Chromium supports navigating to data URIs in the address bar like the other Chromium-based browsers. Neither IE nor Microsoft Edge Legacy support this feature; MSDN claims that this is for security reasons.

    The only solution for older Microsoft browsers is to link, using a scheme that is supported such as file:// or http://, to some resource that contains the content.

    Interestingly enough, the oldest versions of IE (I'm talking older than 6) supported a precursor to data URIs in the about: URI scheme, though only HTML was supported this way. Those URIs no longer work today and simply redirect to "Navigation canceled" (previously "Action canceled") or, in the case of the new Microsoft Edge, are treated as invalid edge:// URIs.