HowTo use 3rd party lib with content-security-policy omitting eval()

[michael_chytracek3]

The problem ist described here: https://stackoverflow.com/questions/74959323/how-to-make-ui5-content-compatible-with-the-flp-setting...

We have developed some UI5 components, that use 3rd party libs (e.g. Excel File handling or jsrasign). During build we see the Warning: lbt:bundle:Builder Module ..../lib/xlsx.full.min.js requires top level scope and can only be embedded as a string (requires 'eval')

This is normally no problem but when using this component in a Fiori Launchpad setting "Asynchronous Module Loading" the component is not loaded because of the content security policy

Is there a setting for a UI5 component that allows using such 3rd party libs even with CSP unsave-eval switched off?

Or is there another way to embed a 3rd party lib other than we do currently?

sap.ui.define([ ...., "../lib/xlsx.full.min", ...], function (.....) {...var encodedCol = XLSX.utils.encode_col(col); // XLSX comes from the lib
.......}Regards Michael

[boghyon]

Hi, I'm the author of the linked Q&A on Stack Overflow. Does the 2nd column "✅ Making UI5 content more CSP-compliant" not help? Let me know if something is not clear.

[michael_chytracek3]

Unfortunately, the 2nd column doesn't help in that case (or I don't quite understand). Because the 3rd party libs are as they are I need a way to either include them differently or define somewhere that eval() is allowed for this module.

Whenever a controller is loaded that includes one of the libs with sap.ui.define the runtime error comes up that eval() is not allowed.

[boghyon · Accepted solution]

The answer in the linked Q&A explicitly mentions SheetJS (xlsx):

Some third party libraries, such as SheetJS, have to define a variable globally. [...] Exclude the third party libraries from the bundle

I.e. in the UI5 Tooling project configuration file typically in `ui5.yaml`, `ui5-deploy.yaml`, etc.:

builder:
  componentPreload: # or libraryPreload
    excludes:
      - "my/app/libs/xlsx*"
      - "my/app/moreToExclude/**"

Documentation: Configuration `excludes` - UI5 Tooling (sap.github.io)

Double-check that the third party library is really not included in the generated preload bundle (Component-preload.js or library-preload.js). The goal is that the modules in the preload bundle are not generated into string that requires eval at runtime. If the modules are still generated into string, one or more modules are still defining some globals outside of the module definition. See my other answer How to Fix "String as JavaScript" Errors in FLP? (Async Module Loading) - Stack Overflow to learn more.

Additionally, a `shim` with `amd: true` must be defined prior to requiring the third party module that exports its global name and supports AMD at the same time (here: "my/app/libs/xlsx.full.min"). This allows bypassing the necessity to rely on the global variable from the third party lib. Define the `shim` with the API `sap.ui.loader.config` e.g. in Component.js before `sap.ui.define` and require the third party normally in either `sap.ui.define` or `sap.ui.require`.

sap.ui.loader.config({
  shim: {
    "my/app/libs/xlsx.full.min": {
      amd: true, // When being required, UI5 temporarily disables the global `define` to allow the third party lib register its global name to `globalThis` or `window`.
      exports: "XLSX", // Name of the global variable under which SheetJS exports its module value
    },
  },
});

sap.ui.define([
  // ...,
  "my/app/libs/xlsx.full.min", // <-- Require the third party lib.
], (/*...,*/XLSX) => { // <-- Use the required module parameter.
  "use strict";
  // ...
});

This is documented in the sap.ui.define section "Third Party Modules":

[...] Although third party modules don't use UI5 APIs, they still can be listed as dependencies in a sap.ui.define call. They will be requested and executed like UI5 modules, but to make their exports available, so called shims have to be defined. [...]

---

While it's not directly related to the "Asynchronous Module Loading" topic, declaring the dependency properly and using the required module value instead of global names safeguards the application from other AMD loaders in the same global scope. E.g. the "sap.viz" lib currently loads the standard AMD loader with which the current AMD-like loader from SAPUI5 is not compatible. If the "sap.viz" lib loads prior to SheetJS, the global variable XLSX will be undefined. As shown above with `sap.ui.loader.config`, applications should not rely on global variables but include third parties in the dependency list, and use the required module values instead.

[sengupta01 · Accepted solution]

Hi Boghyon,

The above solution is working locally but if I build and deploy the app and launch the app Via a tile in SAP Workzone Standard Edition it is not working for me.

I have followed all the above steps. Its giving we content security policy error.

Can you please help.

Thanks,

Abhishek

[Ludovico · Accepted solution]

Hi @sengupta01 ,

I'm having the same issue. Did you manage to solve it somehow?
Thanks!

[sengupta01 · Accepted solution]

@Ludovico you have to exclude all the lib from component preload to make it work. You have to do it in ui5.yaml and ui5-deploy.yaml.