Base64 Image open in new tab: Window is not allowed to navigate Top-frame navigations to data URLs

Question

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

Answer 1

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.

Answer 2

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');