Base64 Url issue on chrome and Edge

November 19, 2021

I want to open images on click of anchor tag. I am using below code which is working fine in Firefox but not working on Chrome and Edge Error in Console ""Not allowed to navigate top frame to data URL: ". I have tried adding ==,= at the end of base64 string but it did not worked. Thanks in advance.

           <a href="data:image/png;base64, '.$b64image.'"  target="_blank">View</a>

I Have tried

         <a href="data:image/png;base64, '.$b64image.'=="  target="_blank">View</a>
         <a href="data:image/png;base64, '.$b64image.'="  target="_blank">View</a>

>Solution :

This is a chrome security restriction. You can bypass it in the following way.

function debugBase64(base64URL){
    var win = window.open();
    win.document.write('<iframe src="' + base64URL  + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
}

Call this function on click of the link using an event listener.

Source