Blocked a frame with origin “http://localhost:8084” from accessing a cross-origin frame

Question

I\'m trying to print a pdf generated by jspdf and loaded on iframe, but I\'m getting that error message:

\"DOMException: Blocked a frame with origin \"http://localho

Answer 1

DOMException: Blocked a frame with origin "http://localhost:8084" from accessing a cross-origin frame."

This message is valid because when you load iframe with the pdf you set the src attribute with a datauristring, not a blob.

A simple solution is based on:

• create a blob from pdf (i.e.: pdf.output('blob')..)
• convert the blob to URL (i.e.: URL.createObjectURL(blobPDF))

The policy is violated using your approach because the protocols (http/data) are different:

• one is http://localhost:8084
• the iframe is: data:application/pdf

Another mistake is:

document.getElementById('pdf-box')

You must use the id and not the name, so change it to:

document.getElementById('pdf-prueba')

The following changed code works in Chrome:

function open(){
  var pdf = new jsPDF('p', 'mm', [55, 5]);

  var blobPDF = pdf.output('blob');

  var blobUrl = URL.createObjectURL(blobPDF);

  $('#pdf-prueba').attr("src", blobUrl).load(function(e){
    document.getElementById('pdf-prueba').contentWindow.print();
  });
}

<iframe id="pdf-prueba" name="pdf-box"></iframe>