html2canvas "Not allowed to navigate top frame to data URL" on Chrome

Question

On http://snippet.christopherkade.com I let my user download code snippets, I use html2canvas to render and save the console displayed on the screen. This works just fine on Firefox, but Chrome displays this error:

Not allowed to navigate top frame to data URL

When I do the following:

// Opens a window with the console to be copied or downloaded
html2canvas(document.getElementsByClassName('console'), {      
  onrendered: function(canvas) {
    var img = canvas.toDataURL()
    window.open(img);
  }
});

Note that Chrome displays a blank page with the error in my console.

The only information I have found is here. But it only explains why Google has made this decision and I was not able to see a solution.

https://stackoverflow.com/questions/45493234/jspdf-not-allowed-to-navigate-top-frame-to-data-url — Josh Lee, Nov 19 '17 at 15:06

score 1 · Answer 1 · answered Nov 19 '17 at 15:14

You can use a blob: URL instead of a data: URL.

b.onclick=async()=>{
  let blob = await new Promise(resolve=>c.toBlob(resolve));
  let url = URL.createObjectURL(blob);
  // Won't work here, because
  // "the request was made in a sandboxed frame whose 'allow-popups' permission is not set."
  window.open(url);
  let a = document.createElement('a');
  a.href = url;
  a.download = '';
  a.click();
};

<canvas id=c></canvas>
<button id=b>save</button>

html2canvas "Not allowed to navigate top frame to data URL" on Chrome

1 Answers1