Cause
If "Asynchronous Module Loading" is activated, not only does SAP Fiori launchpad (FLP) bootstrap SAPUI5 with data-sap-ui-async="true" but serves also its HTML document with the content-security-policy (CSP) response header that contains a set of CSP directives omitting unsafe-eval in script-src. Hence, UI5 applications and FLP plugins that initiate calling eval (and thus violating the CSP) won't be processed by the browser. In the future, stricter CSP directives might apply such as the script-src omitting unsafe-inline additionally.
In the legacy UI5 code, eval is called typically due to the application synchronously fetching JS modules via deprecated APIs. For other causes, see the table below.
Resolution
It is highly recommended to keep the "Asynchronous Module Loading" setting enabled which improves the overall UI5 performance in FLP (unblocked main thread) and security (stricter CSP).
UI5 has already deprecated legacy/synchronous APIs and - with the 1.96 release - largely improved the support for strict CSP. UI5 content owners should adjust their code accordingly:
| ❌ UI5 content violating CSP |
✅ Making the UI5 content more CSP-compliant |
Application's HTML document bootstrapping SAPUI5 without data-sap-ui-async="true" or with the debug mode activated. |
Ensure that the HTML document bootstraps SAPUI5 with data-sap-ui-async="true" and that no debug mode is activated unnecessarily. Review Is Your Application Ready for Asynchronous Loading? |
Using inline scripts (<script>...</script>) within the application's HTML document. |
Use only <script src="..." ...></script> to comply with the CSP without unsafe-inline. Define the initial component declaratively via sap/ui/core/ComponentSupport. |
Using deprecated APIs, factories, libs such as jQuery.sap.*, $el.outerHTML, oCore.createComponent, sap.ui.controller, sap.ui.component, sap.ui.*fragment, sap.ui.*view, sap.ui.extensionpoint, sap.ui.commons, sap.ca.scfld, sap.ushell.Container.getService, etc... |
Review the documented API reference to learn about newer asynchronous APIs that replace the deprecated ones. Use sap.ui.define or sap.ui.require to declare proper module dependencies and avoid using other sap.* global references. Same applies to custom UI5 modules. |
Fetching UI5 libs and components manually but still synchronously despite using non-deprecated APIs. E.g. /*oCore required from "sap/ui/core/Core"*/
oCore.loadLibrary("that.lib");
|
Review the documented API reference to learn how to enable loading such resources asynchronously. E.g. when loading a UI5 lib manually:/*Lib required from "sap/ui/core/Lib"*/
Lib.load({ name: "that.lib" })/*since 1.118*/
oCore.loadLibrary("that.lib",/*async:*/true)
|
| Creating the component content such as the root view, routed views, and nested views synchronously in runtime despite having them defined declaratively. |
Implement the "sap.ui.core.IAsyncContentCreation" marker interface in Component.js to implicitly create the component content asynchronously. |
Component-preload.js / library-preload.js bundling JS modules as string due to:
|
Generate the bundle by leveraging UI5 Tooling with e.g. ui5 build -a --clean-dest. When defining a UI5 module, avoid global instructions but only use sap.ui.define at top-level of the JS file. Result:"my/Module.js":function(){//...
If it's absolutely required to keep myGlobalStuff, add globalThis.myGlobalStuff to achieve the above build result. Alternatively, you can also wrap the module definition in an IIFE but only if the top level scoped stuff is referred within that module solely, instead of globally. In UI5 library development, one can also set requiresTopLevelScope="false" to the affected raw-module within .library. Keep in mind that this approach is not publicly documented. |
Other resources that might help identifying CSP issues in UI5
- Build the app e.g. with
ui5 build --all or ui5 build self-contained -a.
- Serve the built app from the
dist folder (Refer to SAP/ui5-tooling issue #300).
E.g. with ui5 serve --config ui5-dist.yaml.
- Run the app with the following URL parameter:
index.html?sap-ui-xx-csp-policy=sap-target-level-<1 to 3>:report-only
- The higher
sap-target-level-<n>, the stricter the CSP.
- Remove
:report-only if the browser should actually apply the CSP level.
- Observe any CSP violation reported in the browser console.
⚠️ Currently doesn't work in combination with the custom middleware ui5-middleware-index.
Chrome DevTools
F12 → F1 → Select the "Show CSP Violations view" checkbox from the Experiments section.
Q&As
Documentation
For more detailed information about the current state of CSP in UI5 and which restrictions there are, see the documentation topic Content Security Policy.
