How to use CORS to access an iframe

Question

When a user prints, my server generate a PDF, and I do this to show the print dialog for the PDF.

$('<iframe type="application/pdf"></iframe>').attr('src', url).load(function() {     var iframe = this;     setTimeout(function() { //Chrome PDF viewer shows "Loading..." forever otherwise         iframe.contentWindow.print();         $(iframe).remove(); //gc     }, 50); }).appendTo('body'); 

But now I am hosting the PDFs on S3. I get

Uncaught SecurityError: Blocked a frame with origin "https://localhost" from accessing a frame with origin "https://my-bucket.s3.amazonaws.com". Protocols, domains, and ports must match. 

I presume I need to add CORS headers.

I have

Access-Control-Allow-Methods: GET, HEAD Access-Control-Allow-Origin: * 

What am I missing?

Answer 1

Paul - CORS does not apply when attempting to programmatically access content from a cross-origin iframe. If you want to access content from an iframe on a different domain, you will need to make use of the Web Messaging API (window.postMessage & the onmessage event) to communicate between your page and the iframe.