Frame Options

Frame Options

The frame-options configuration of SAPUI5 is a client-side feature that is used to prevent security vulnerabilities like clickjacking, that is, situations where a user could be misled to use the targeted application unintentionally.
Note

SAPUI5's frame-options configuration is not the same as the X-Frame-Options HTTP response header.

SAPUI5's frame-options is a front-end JavaScript feature that supports all browsers in the UI5 compatibility list. When set to "deny" or "trusted", it places an invisible block layer over the page, preventing user interaction by disabling event propagation, e.g. for mouse and keyboard events. However, the page content remains visible.

In contrast, the X-Frame-Options header is a back-end feature sent via HTTP response headers. It prevents the page from loading at the browser level if framing is not allowed. Although it supports DENY and SAMEORIGIN, it lacks comprehensive support for ALLOW-FROM, which is now deprecated in most browsers. This header must be set by the back end and may not be fully supported by all browsers.

Additionally, the more recent Content-Security-Policy (CSP) header, also sent by the back end, includes the frame-ancestors directive, which provides better control over trusted sites and should be preferred over X-Frame-Options for embedding restrictions.

SAPUI5 provides the following configuration options for frame-options to specify whether the target application is allowed to be used if it's embedded in a separate frame:

Mode

Default

Description

"allow"

X

Allows interaction with the application regardless of the origin of the parent frame.

"deny"

Denies interaction with the application.

"trusted"

Allows interaction only if the application is embedded from trusted origins according to the same-origin policy and from origins allowed by the allowlist service.

With frame-options-config the following additional configuration options can be set:

Parameter

Type

Default

Description

callback

function(bSuccess)

Function that is called with the success state.

Note

The function can be synchronously called from the SAPUI5 bootstrap script. The DOM (document.body) may not be accessible.

timeout

number

10000

After the delay, the page remains blocked and the provided callback is invoked (milliseconds).

blockEvents

boolean

true

Defines whether keyboard, mouse, and touch events are blocked.

showBlockLayer

boolean

true

Defines whether an invisible block layer is rendered to prevent interaction with the UI.

allowSameOrigin

boolean

true

Defines whether same origin domains are allowed.

allowlist

string[]

Contains the domain allowlist, for example [".example.com"], ["hana.ondemand.com"].
Note

The frame-options-config cannot be set via URL. Wildcards are not supported.

Example: "deny"

If the application is not intended to run in a frame, set frame-options to "deny":

Hidden
<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-frame-options="deny"
    data-sap-ui-...="...">
</script>

Example: "trusted" with callback

To restrict the embedding to same-origin domains, set frame-options to trusted. The callback in the following code sample is called with a boolean as success state and can be used to implement an application-specific behavior.

Hidden
<script>
globalThis["sap-ui-config"] = {
    "frame-options": "trusted",
    "frame-options-config": {
        callback: function(bSuccess) {
            if (bSuccess) {
                alert("App is allowed to run!");
            } else {
                alert("App is not allowed to run!");
            }
        }
    }
};
</script>
<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-...="...">
</script>

Example: Allowlist Service

To allow that the SAPUI5 application is embedded in cross-origin domains, configure an allowlist service. The allowlist service checks whether the application can run in the parent origin, or not.

Hidden
<script>
globalThis["sap-ui-config"] = {
    "allowlist-service": "url/to/allowlist/service",
    "frame-options": "trusted",
    "frame-options-config": {
        callback: function(bSuccess) {
            if (bSuccess) {
                alert("App is allowed to run!");
            } else {
                alert("App is not allowed to run!");
            }
        }
    }
};
</script>
<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-...="...">
</script>

Example: Allowlist Service via <meta> Tag

Alternatively, a <meta> tag can be used to configure the sap-allowlist-service and set the sap-ui-frame-options to "trusted". This only applies if the allowlist-service or frame-options configuration is not set otherwise according to the Configuration of the SAPUI5 Runtime.

Hidden
<meta name="sap-allowlist-service" content="url/to/allowlist/service" />
<script  id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-...="...">
</script>

Related information