We are experiencing an issue on a domain that calls a web viewer server component on the same domain:8443 (so a different port) for users to view an uploaded file before placing an order for printing.
We're occasionally getting DOMException: Blocked a frame with origin \https://posterprintshop.com\ from accessing a cross-origin frame. error (when customers report it). Strangely, it only happens in about 3 out of 10 users, only in Chrome on Windows, and not every user.
Our developer claims to have followed the advice from @MarcoBonelli in this article:
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
to use window.postMessage for communication, but the issue still occurs, and we know we're losing countless business from regular users who leave the site thinking their file won't upload because this error is buried in the console, and few customers tell us about it. The fact it doesn't occur for everyone in Chrome makes it difficult to pinpoint and solve.
Issue happens when uploading a file in Chrome at https://posterprintshop.com/order-wizard
What is our developer missing?
Here is the description of what is happening on the page, with the code being used provided by our developer, you can see in the bottom code he's attempted to implement the postMessage solutions suggested in other articles, yet still this is not working:
A customer starts on our 'order-wizard' page at https://posterprintshop.com/order-wizard where they choose a file to upload. After successful upload, this triggers the load of our /webv/ page where the web viewer is supposed to load the uploaded image and display it in an iframe from the PDFTRon server. This is where the problem rears its head - for most users, all is fine, but for 50% of Chrome users, we get the cross-domain error.
- webv page code includes div element with ID "viewer" where WebViewer/PDFTron performs the display of uploaded image.
HTML Snippets:
<div id="viewer" class="viewer" style="background: url( <?php echo get_stylesheet_directory_uri() . '/images/pattern.jpg'; ?> ) repeat;"></div>
JS Snippets:
var viewerElement = document.getElementById( 'viewer' );
- Under the div element with ID "viewer", WebViewer/PDFTron injecting an iframe with ID "webviewer-1" and it will show the uploaded image.
Snippets:
<iframe id="webviewer-1" src=https://posterprintshop.com/wp-content/themes/hello-child/WebViewer/lib/./ui/index.html#d=https%3A%2F%2Fposterprintshop.com%2Fwp-content%2Fthemes%2Fhello-child%2Fpdftest.pdf&preloadWorker=pdf&a=1&css=https%3A%2F%2Fposterprintshop.com%2Fwp-content%2Fthemes%2Fhello-child%2Fcss%2Fwebviewer.css&filepicker=0&pdfnet=0&enableRedaction=0&enableMeasurement=0&pageHistory=1&notesInLeftPanel=0&useDownloader=0&selectAnnotationOnCreation=0&id=1 title="webviewer" frameborder="0" width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
JS Snippets:
WebViewer( {
path: '<?php echo get_stylesheet_directory_uri() .'/' ?>WebViewer/lib',
licenseKey: '<License Key>',
initialDoc: '<?php echo get_stylesheet_directory_uri() .'/' ?>pdftest.pdf',
documentType: 'pdf',
useDownloader: false,
mobileRedirect: false,
// fullAPI: true,
css: '<?php echo get_stylesheet_directory_uri() .'/' ?>css/webviewer.css',
}, viewerElement )
.then( async ( instance ) => {
console.log( '==> [pdf.php] Instance object ', instance );
const iframeDoc = instance.iframeWindow.document;
const iframe = document.getElementById( 'webviewer-1' ).contentWindow;
iframe.postMessage( 'iframeTriggerJS', 'https://posterprintshop.com' );
window.addEventListener( 'message', function( event ) {
console.log( '==> [pdf.php] Listener triggering from JS' );
console.log( '==> [pdf.php] Event object ', event );
const origin = event.origin;
if ( origin === 'https://posterprintshop.com' ) {
console.log( '==> [pdf.php] Listening...' );
console.log( '==> [pdf.php] Event Data object ', event.data );
}
} );
} );
- I have added below snippets in WebV page Snippets:
<script>
$ = jQuery.noConflict();
$( function( $ ) {
window.addEventListener( 'message', function( event ) {
console.log( '==> [pdf.php] Listener triggering from WEBV' );
console.log( '==> [pdf.php] Event object ', event );
const origin = event.origin;
if ( origin.startsWith( 'https://posterprintshop.com' ) ) {
console.log( '==> [pdf.php] Listening...' );
console.log( '==> [pdf.php] Event Data object ', event.data );
}
} );
} );
</script>
- Also, added below snippets in JS Snippets:
const iframe = document.getElementById( 'webviewer-1' ).contentWindow;
iframe.postMessage( 'iframeTriggerJS', 'https://posterprintshop.com' );
window.addEventListener( 'message', function( event ) {
console.log( '==> [pdf.php] Listener triggering from JS' );
console.log( '==> [pdf.php] Event object ', event );
const origin = event.origin;
if ( origin === 'https://posterprintshop.com' ) {
console.log( '==> [pdf.php] Listening...' );
console.log( '==> [pdf.php] Event Data object ', event.data );
}
} );
Hoping someone can analyze this chain of events to point us in the direction of what we're missing?
