How to embed SAPUI5 screen to external iframe

[minjie_lao]

There is no doubt, we can build user friendly interfaces via SAP UI5, then the application either run as stand-alone web-application or running on top of launch pad.

 

But in some of the use case, we'd like to embed the UI5 screen for providing the convenience to users.

error

Purpose

 

This blog is going to show a way to embed the SAPUI5 (free-style) screen into external web iframe.

 

Prerequisites (you need to know)

 

1. This solution only verified on SAPUI5 free-style (not verified on Fiori element)


2. This solution only verified on RAP framework, (not verified on ABAP framework)


3. This  solution doesn't consider authentication, if your UI5 application needs authentication, it's not included in this article.


4. The RAP application is deployed on SAP BTP cloud foundry.

 

Challenge

 

Due to variance of security concern, Webpage owner may not wish other website to display own web-application UI in somewhere the owner was not acknowledge.  Therefore, most of the website framework are blocking the webpage is called by different origin domain.

 

 

 

x-frame-option error

This policy is also applied to SAPUI5, thus, to overcome this security setting, following steps could help you out.

 

In local (CAP) project.

Add following javascript into your  app/<your ui5 app project>/webapp/index.html

<script>

        window["sap-ui-config"] = {

            frameOptions: 'allow',

            allowlist:[

		  "https://iframetester.com/"

            ,"<external webpage domain url #1>"

            ,"<external webpage domain url #2>"

            ,"<external webpage domain url #3>" ….. //for ex: https://www.google.com or just give "*"

		

            ],

            frameOptionsConfig: {

                blockEvents:false,

                showBlockLayer:false,

                callback: function(bSuccess) {

                    if (bSuccess) {

                        //alert("App is allowed to run!");

                        console.log("app is allowed to call");

                    } else {

                        alert("App is not allowed to run!");

                    }

                }

            }

        };

  </script>

 

 

On BTP side

 

First of all, ensure your web-application is deployed to BTP cloud foundry and running without issue.

 

Follow the steps to create a local environment variable of your web application instance

 

1. Find your application in the Subaccount> <your space>  > <your web application instance>

 

In my sample, my application instance name called: "app"

 

btp subaccount screen

 

 

2. Click User-Provided Variable

btp env. variable

adding variable

3. Add httpHeaders variable as below

 

[

  {

    "Content-Security-Policy": "frame-ancestors *"

  },

{

"X-Frame-Options":"ALLOW-FROM https://iframetester.com/ ( you can use '*' or <specific url domain URL>)"

},

  {

    "Test-Additional-Header": "1"

  }

]

 

Now you can test your UI5 interface in iframe

 

(or you can test via iframe tester  https://iframetester.com/ )

 

result

 

Conclusion:

 

1. To allow UI5 application running within other web portal does have security concern. But it could help on the use case of publishing global information.


2. The sample is not considering authorization mechanism, which need to be enhanced.


3. When whitelisting the external domain, avoid to use '*' to whitelisting every unknown domain, it puts your application into risky situation.


4. The article only solve the issue of blocking other web portal calling your UI application from the web application service layer.  If you'd like to solve the issue of CORS issue on CAP service level, please refer to the article

 

 

Reference

 

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

 

https://help.sap.com/docs/btp/sap-business-technology-platform/environment-variables