The "Browser Settings" section from the "Site Settings" page of the launchpad in SAP Build Work Zone has now enabled the "Asynchronous Module Loading" by default for new sites since May 16th 2024.
When enabled, some of the SAPUI5 applications or FLP plugins fail to start. The browser reports in the console:
Failed to execute '<JavaScript module>.js': Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive:
"script-scr * data: blob:"
.
How is the CSP topic related to the Fiori launchpad's "Asynchronous Module Loading" setting in this case and what can we do to avoid evaluating "string as JavaScript" in UI5? How can I make my UI5 content compatible with the launchpad site CSP defined by SAP?
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
and unsafe-inline
from script-src
. UI5 contents, that initiate calling eval
or contain inline scripts, violate the CSP and thus won't be processed by the browser.
In the legacy UI5 code, eval
is called typically due to JS modules being synchronously fetched via deprecated APIs (Internally requireSync
or loadSyncXHR
). The response text has to be then processed by eval
in order to evaluate the JS code out of string. In UI5 2.0, most APIs that had been deprecated previously are finally removed.
For more detailed information about the current state of CSP in UI5 and which restrictions there are, see the documentation topic Content Security Policy in addition to following the topic Best Practices for Developers.
The table below summarizes all documented best practices for making UI5 CSP-compliant.
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 UI5 content more CSP-compliant |
---|---|
Application's initial HTML document bootstrapping SAPUI5 without data-sap-ui-async="true" or with the debug mode activated. |
Bootstrap UI5 with data-sap-ui-async="true" and ensure that no debug mode is activated unnecessarily. C.f. "Is Your Application Ready for Asynchronous Loading?" |
Defining styles and scripts inline:
|
Comply with the style-src and script-src directives that exclude unsafe-inline by defining:
|
Using deprecated APIs and libs such asjQuery.sap.* , Core#loadLibrary , Core#createComponent , sap.ui.component , sap.ui.*view , sap.ui.controller , sap.ui.*fragment , sap.ui.extensionpoint , sap.ui.commons , sap.ca.scfld , sap.ca.ui , sap.ui.suite , sap.landvisz , sap.ui.vtm , sap.zen.* , sap.ui.ux3 , sap.makit , sap.ui.model.odata.ODataModel , sap.ushell.Container.getService , etc.. |
Refer to the API reference and the reports logged in the browser console to learn about newer APIs that replace the deprecated ones. Use the UI5 linter additionally to detect deprecated APIs and other issues in the project. |
Accessing module exports via global names: Or modules from a library export:
|
Address modules only via:
Those above APIs and See also Best Practices for Loading Modules and Troubleshooting for Loading Modules. |
Creating the component content such as the root view, routed views, and nested views synchronously at runtime despite having them defined declaratively. | Add the marker interface "sap.ui.core.IAsyncContentCreation" to the Component.js definition to enable creating the component content asynchronously and other benefits. |
Renderer of certain controls being fetched synchronously | Require the renderer module and assign it to the renderer in the control definition.
|
Fetching resources still synchronously or indirectly referencing modules via global names despite using non-deprecated APIs. | Review the API reference, reports by the UI5 linter, and the console logs. You might have to increase the log level e.g. via the URL parameter sap-ui-logLevel=... to see the relevant logs. |
UI5 bundles such as
Even with UI5 Tooling, some JS modules can be still generated into string if their definition contains global declarations outside of
During the build time, UI5 Tooling logs a warning: Module [...] requires top level scope and can only be embedded as a string (requires 'eval') Or an error since Module [...] requires top level scope and can only be embedded as a string (requires 'eval'), which is not supported with specVersion 4.0 and higher. |
Keep your development toolchain up-to-date. If the project is still relying on Grunt, migrate to SAP Fiori tools or UI5 Tooling. Older Fiori tools versions include When defining a module, do not include any global declaration such as
|
eval
calls when addressing UI5 modules at runtime?csp
ui5 build --all
or ui5 build self-contained -a
.dist
folder (Refer to SAP/ui5-tooling issue #300).ui5 serve --config ui5-dist.yaml
.index.html?sap-ui-xx-csp-policy=sap-target-level-<1 to 3>:report-only
sap-target-level-<n>
, the stricter the CSP.:report-only
if the browser should actually apply the CSP level.⚠️ Currently doesn't work in combination with the custom middleware ui5-middleware-index
.
F12 → F1 → Select the "Show CSP Violations view" checkbox from the Experiments section.