Hi My Main Application url is http:localhost:4000. It internally render iframe app which is http:localhost:4000/contentApp/index.html (with sandbox parameter as sandbox="allow-scripts allow-popups allow-modals allow-forms allowdownloads allow-same-origin") and its in React application.
PrintJS package, using 1.0 version and it makes call to printJS(URL)
//URL, blob:http:localhost:4000/[guid value]
It gets an error at below piece of code within printjs library.
print.js:
try{
iframeElement.focus(); // iframeElement = iframe#printJS { src: blob:http://localhost:4000/a33334343-33434-343434-343434adf', src: '', name: '', sandbox: DOMTockenList(0..)
...
// other browsers
iframeElement.contentWindow.print(); // throw CORS error at here.
} catch(error){ params.onError(error);}
finally {
(o,_function.cleanup)(params);
}
}
above, iframeElement.contentWindow.print() getting an error out with below error CORS:
Uncaught DOMException: Blocked a frame with origin "http://localhost:4000" 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)
..
When I remove sandbox then it worked. However, I can not remove sandbox as its structure of application.
Is there any way to fix this CORS issue. Like adding some parameter in "iframe sandbox attribute" OR any option at 'printjs' to fix this issue ? Appreciate for the help.
PrintJS, internally call iframeElement.contentWindow.print(); , I don't have control to do postMessage as its printJS package part. Though, I have control over localhost:4000/contentApp , sandbox attribute.
(Also, it looks like issue created at, "http://localhost:4000" != "BLOB:http://localhost:4000/GUIDvalue" , (which looks weird as, both are pointing to same origin".)
