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




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.

 Hello @Rob Poels, Were you able to overcome this problem? If so, please post it and let others know what your solution was.


Give it now, thank you.


Att.,


Galter.

Galter wrote:

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.

 Hello @Rob Poels, Were you able to overcome this problem? If so, please post it and let others know what your solution was.


Give it now, thank you.


Att.,


Galter.

Hi Galter,

unfortunately, I wasn't able to fix it in OutSystemsUIWeb
In the end I rewrote my application in SilkUI to get it solved.

Regards,
Rob

 

Hello Rob, good morning.
I found a solution for my case.
The solution was applied at https://www.aamparaautismo.org.br/
What did I do? I applied a deal on the JS exception that the javascript was generating. For this, it was necessary to clone the OutSystemsUIWeb project and Edit the WebBlock DeviceDetection, see information below:


var deviceDetection = function() {

    /* $0 - Variable Declaration */

    var deviceDetect;

    var userValues;

    var device;

    var os;

    var browser;

    var orientation;

    var height;

    var width;

    var isPreviewInDevices;    

    

    try {

        // Chech if is Preview In Devices

        if(window.top.document.querySelector(".marvel-device") !== null) {

            isPreviewInDevices = true;

        }

    }

    catch(err) {

      isPreviewInDevices = true;

    }       

    /* $1 - Device Detection Object declaration */

    deviceDetectionObj = function() {