iFrames blocked all of a sudden

Hello Community,

I just inherited an Intranet project based on the Yii2 Framework.
I’m completely new to Yii and I’m trying to understand why:

“iFrames are being blocked all of a sudden?”

I get this error message in the browser console:

scheduler.production.min.js:14 Uncaught DOMException: Blocked a frame with origin “https://www.marinetraffic.com” from accessing a cross-origin frame.

The iFrames have been working correctly for the last 6 months, then suddenly are being blocked.

I’ve tried adding the following to my .htaccess, with no luck:

Header append X-FRAME-OPTIONS ALLOW-FROM https://www.marinetraffic.com/

Any suggestions?

Hi przmweb, try adding a CorsFilter: Class yii\filters\Cors

Adding the URL you wan’t to “unblock” inside the Origin parameter

Hello again Bruno. Again, thank you for responding. I’m looking into the CorsFilter option now.

The original developer did finally get back to me and he said:

The reason that the embed does not work is because they changed the way that their maps works. Now the map cannot be embedded directly using an iframe, you must use the JS script as you already tested on your html test file, if you use the iframe from the intranet you will get the same error.

eg. <iframe src="https://www.marinetraffic.com/en/ais/home/shipid:726994/zoom:10" class="shipping_link_frame" style="overflow:" scrolling="no" allowtransparency="1" width="100%" height="550" frameborder="0"></iframe> (this wont work)

The solution is not that easy or quick. As the map docs says, the embed JS must be added and also if you want to customize the map you must add an extra script with the right configuration and the vessel number. So the tracking.php file must be modified in order to generate the right script and add JS Embed file, also the user should input the vessel number instead of the map url.

But I’m wondering if the CorsFilter would fix it all. I’ll keep you posted. Thanks my friend.

1 Like

This error is not a bug. The same-origin policy is a security mechanism that ensures that window objects only have access to the informations they are authorized to get.

The window.postMessage() method provides a controlled mechanism to securely circumvent this Same-Origin Policy restriction. The window.postMessage() safely enables cross-origin communication between Window objects; e.g: between a page and an iframe embedded within it.

postMessage(message, targetOrigin)
postMessage(message, targetOrigin, [transfer])

targetOrigin - specifies what the origin of targetWindow must be for the event to be dispatched, either as the literal string “*” (indicating no preference) or as a URI.