Hi all,

I have developed a web application (OutSystems11, using OutSystemsUIWeb) which has to be embedded in an iframe.
One of the pages contains a gallery, which should have following behaviour:
- desktop: 4 items per line
- tablet: 2 items per line
- phone: 1 item per line

When opening the page directly, the behaviour is as stated before.
When the page is embedded in an iframe (which is running on another webserver/domain) however, the page layout is completely messed up. 

The inspector shows following error:
Uncaught DOMException: Blocked a frame with origin "https://<xxx>.outsystemsenterprise.com" from accessing a cross-origin frame.
    at new deviceDetection (https://<xxx>.outsystemsenterprise.com/<yyy>/Blocks/OutSystemsUIWeb/Private/DeviceDetection.js?40885:51:19)

The script error occurs in the deviceDetection function used in OutSystemsUIWeb (bold text is where the error occurs):
// Chech if is Preview In Devices
if(window.top.document.querySelector(".marvel-device") !== null) {
    isPreviewInDevices = true;
}

As a result, my page is no longer responsive when embedded in an iframe.
Already tried configuring Content Security Policy, without result yet.

Hope someone has a clue how to fix this issue


Regards,

Rob.

Rob Poels wrote:

Hi all,

I have developed a web application (OutSystems11, using OutSystemsUIWeb) which has to be embedded in an iframe.
One of the pages contains a gallery, which should have following behaviour:
- desktop: 4 items per line
- tablet: 2 items per line
- phone: 1 item per line

When opening the page directly, the behaviour is as stated before.
When the page is embedded in an iframe (which is running on another webserver/domain) however, the page layout is completely messed up. 

The inspector shows following error:
Uncaught DOMException: Blocked a frame with origin "https://<xxx>.outsystemsenterprise.com" from accessing a cross-origin frame.
    at new deviceDetection (https://<xxx>.outsystemsenterprise.com/<yyy>/Blocks/OutSystemsUIWeb/Private/DeviceDetection.js?40885:51:19)

The script error occurs in the deviceDetection function used in OutSystemsUIWeb (bold text is where the error occurs):
// Chech if is Preview In Devices
if(window.top.document.querySelector(".marvel-device") !== null) {
    isPreviewInDevices = true;
}

As a result, my page is no longer responsive when embedded in an iframe.
Already tried configuring Content Security Policy, without result yet.

Hope someone has a clue how to fix this issue


Regards,

Rob.

As I did something similar to this long back there is an option in the browser to make this thing working just after the URL to unblock this issue.

somewhere I have made a pointer



Regards,

Pankaj Pant