Question

85

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

rated 0 times [ 86] [ 1] / answers: 1 / hits: 29794 / 7 Years ago, tue, february 7, 2017, 12:00:00

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://localhost:8084 from accessing a cross-origin frame.

this is my code:

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





function open(){

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

    var data = pdf.output('datauristring');

    $('#pdf-box').attr(src, data).load(function(){

        document.getElementById('pdf-box').contentWindow.print();

    });

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aman

Add To Favorites

Follow

Total Points: 341

Total Questions: 92

Total Answers: 92

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

answered 7 Years ago eanskylerg · Accepted Answer

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>