In new chrome versions I got this error:

Window is not allowed to navigate Top-frame navigations to data URLs

The image looks like that (contains data in the url): data:image/png;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBYRXhpZgAA...

I really need to open it in a new tab. The iFrame solution isn't relevant

In new chrome versions I got this error:

Window is not allowed to navigate Top-frame navigations to data URLs

The image looks like that (contains data in the url): data:image/png;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBYRXhpZgAA...

I really need to open it in a new tab. The iFrame solution isn't relevant

• javascript
• html
• google-chrome

• a relevant link from Mozilla corporation describing the ways Data URLs will not work. blog.mozilla.org/security/2017/11/27/… – user1451111 Commented Aug 29, 2018 at 12:17

3 Answers 3

You can use this function to open any base 64 data URI in a new tab:

function openBase64InNewTab (data, mimeType) {
    var byteCharacters = atob(data);
    var byteNumbers = new Array(byteCharacters.length);
    for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    var byteArray = new Uint8Array(byteNumbers);
    var file = new Blob([byteArray], { type: mimeType + ';base64' });
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
}

In your case with the image, you'd use it like this:

openBase64InNewTab('YOUR_BASE64_DATA', 'image/png');

A javascript solution:

var newTab = window.open();
newTab.document.body.innerHTML = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" width="100px" height="100px">';

There's a lot of ways that you can change the way window.open() behaves, check out the documentation. It also shouldn't be hard to create some css/html that will mimic the way Chrome displays images in new tabs. The ability to load data: URLs was removed for security reasons, so you're out of luck if you're looking for a way to do that.

url adress bar is limited for chars. You can only show "data:image/png;base64,.." string on page Or..

save it with a tag with attribute like download="iLiveCats.jpg"

Your code will be like this: <a href="data:image/png;base64,..." download="abrakadabra_iLoveCats.jpg">download id</a>