Getting blocked a frame with origin issue

[dhavaldeveloper]

Hi I am getting CORS issue while calling printJs(URL).

structure is as below,

Main Application url is http:localhost:5000. App renders iframe app which is at http:localhost:5000/data-center/index.html (iframe sandbox attribute is like sandbox="allow-scripts allow-popups allow-modals allow-forms allowdownloads allow-same-origin")

PrintJS package, using 1.0 version and it makes call to printJS(URL) from internal iframe. //print URL is like, blob:http:localhost:5000/[guid value]

Error produce at below code in printjs . print.js:

try{
        iframeElement.focus();  // iframeElement = iframe#printJS { src: blob:http://localhost:5000/123456789-33333-56789-23343', src: '', name: '', sandbox: DOMTockenList(0..)
        ...

            // other browsers           
        iframeElement.contentWindow.print();  // CORS error created at here contentWindow .  

    } catch(error){ params.onError(error);} 
    finally { 
        (o,_function.cleanup)(params); 
      } 
    }

Error: Uncaught DOMException: Blocked a frame with origin "http://localhost:5000" frame accessing a cross-origin frame. at performPrint (webpack-internal:///./node_modules/print-js/dist/print.js:898:35) at HTMLIframeElement.iframeElement.onload (webpack-internal:///./node_modules/print-js/dist/print.js:852:11) ..

It works when, I remove, "sandbox" attribute but I can not removed. Can you please advise if any changes on printjs or possible solution on this issue ?

[AlexandrosG]

Were you able to find a solution to this issue?

I just noticed this on my application and I am lost on how to fix this.

[Libikk]

I think this issue appeared with one of the recent chrome update to CORS

[AlexandrosG]

@Libikk I'm not sure how recent this is. There's been posts about this as far back as July. So the issue has been around for a while. I guess PrintJS is unusable for now.

[AlexandrosG]

I have using PrintJS inside an Angular app. In Angular 9, there's no issue but in 12, the issue appeared.

So I am thinking this might be related the newer version of Angular CLI?

[sanchito59]

@AlexandrosG Having this same issue with Angular CLI 11.1.2; any updates or fixes you've found?

EDIT: 12/20/2021

I may have tentatively solved this in my case by adding this value in my web.config file our server-side code uses:

<add name="frame-src 'self' data: blob:;"/>

Not 100% sure why this solved the error from the issue, but in my case I had both an error related to my frame-src content security policy as well as the error mentioned above by the original poster. Solving the content security policy by allowing the frame-src to handle the blob download seemed to fix this one as well.

[mpaz-phs]

@sanchito59 , can you describe your fix in the web.config file. i am also using this with IIS. what tag are you adding the config to?

[d-miles]

@mpaz-phs Quite late, but he was adding a CSP header:

    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Content-Security-Policy" value="frame-src 'self' data: blob:;"/>
        </customHeaders>
      </httpProtocol>
    </system.webServer>