Skip to content

Latest commit

 

History

History
356 lines (234 loc) · 6.91 KB

Frame_Options_62d9c4d.md

File metadata and controls

356 lines (234 loc) · 6.91 KB
loio
62d9c4d8f5ad49aa914624af9551beb7

view on: demo kit nightly build | demo kit latest release

Frame Options

The frame-options configuration of OpenUI5 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:

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

OpenUI5'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.

OpenUI5 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 OpenUI5 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":

<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.

<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 OpenUI5 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.

<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 OpenUI5 Runtime.

<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

Allowlist Service

Configuration Options and URL Parameters