Skip to Content
Technical Articles
Author's profile photo Minjie Lao

How to embed SAPUI5 screen to external iframe

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.





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.




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

        window["sap-ui-config"] = {
            frameOptions: 'allow',
            ,"<external webpage domain url #1>"
            ,"<external webpage domain url #2>"
            ,"<external webpage domain url #3>" ….. //for ex: or just give "*"
            frameOptionsConfig: {
                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!");



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



  1. Click User-Provided Variable


btp env. variable


adding variable

  1. Add httpHeaders variable as below


    "Content-Security-Policy": "frame-ancestors *"
"X-Frame-Options":"ALLOW-FROM ( 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 )







  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






Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Yogananda Muthaiah
      Yogananda Muthaiah

      Good to know .. Informative Minjie Lao !