[BREAKING] Discontinue bundling of JavaScript modules as string

The UI5 bundler packages JavaScript files that are identified as "requiresTopLevelScope" as a string, to be evaluated via "eval" at runtime. This behavior ensures that the script works as expected, e.g. with regards to implicit globals.
This "eval" runtime feature with be discontinued in UI5 2.0 because of security best practices (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) and to comply with stricter CSP settings (unsafe-eval).
By using specVersion 4.0 an error is thrown when bundling a module as string and the module is not included in the bundle at all.

JIRA: CPOUI5FOUNDATION-794

Author: flovogt

lib/lbt/bundle/Builder.js

@@ -45,12 +45,13 @@ function isEmptyBundle(resolvedBundle) {
 }
 
 class BundleBuilder {
-	constructor(pool, targetUi5CoreVersion) {
+	constructor(pool, targetUi5CoreVersion, allowStringBundling) {
 		this.pool = pool;
 		this.resolver = new BundleResolver(pool);
 		this.splitter = new BundleSplitter(pool, this.resolver);
 		this.targetUi5CoreVersion = targetUi5CoreVersion;
 		this.targetUi5CoreVersionMajor = undefined;
+		this.allowStringBundling = allowStringBundling;
 	}
 
 	getUi5MajorVersion() {
@@ -172,7 +173,7 @@ class BundleBuilder {
 
 		this.closeModule(resolvedModule);
 
-		const bundleInfo = await resolvedModule.createModuleInfo(this.pool);
+		const bundleInfo = await resolvedModule.createModuleInfo(this.pool, this.allowStringBundling);
 		bundleInfo.size = this.outW.length;
 
 		return {
@@ -231,23 +232,23 @@ class BundleBuilder {
 		}
 	}
 
-	addSection(section) {
+	async addSection(section) {
 		this.ensureRawDeclarations();
 
 		switch (section.mode) {
 		case SectionType.Provided:
 			// do nothing
 			return undefined; // nothing to wait for
 		case SectionType.Raw:
-			return this.writeRaw(section);
+			return await this.writeRaw(section);
 		case SectionType.Preload:
-			return this.writePreloadFunction(section);
+			return await this.writePreloadFunction(section);
 		case SectionType.BundleInfo:
-			return this.writeBundleInfos([section]);
+			return await this.writeBundleInfos([section]);
 		case SectionType.Require:
-			return this.writeRequires(section);
+			return await this.writeRequires(section);
 		case SectionType.DepCache:
-			return this.writeDepCache(section);
+			return await this.writeDepCache(section);
 		default:
 			throw new Error("unknown section mode " + section.mode);
 		}
@@ -330,7 +331,6 @@ class BundleBuilder {
 					if ( i>0 ) {
 						outW.writeln(",");
 					}
-					// this.beforeWritePreloadModule(module, resource.info, resource);
 					outW.write(`\t"${module.toString()}":`);
 					outW.startSegment(module);
 					await this.writePreloadModule(module, resource.info, resource);
@@ -397,8 +397,13 @@ class BundleBuilder {
 		const remaining = [];
 		for ( const moduleName of sequence ) {
 			if ( /\.js$/.test(moduleName) ) {
-				// console.log("Processing " + moduleName);
 				const resource = await this.pool.findResourceWithInfo(moduleName);
+
+				if (resource.info?.requiresTopLevelScope && !this.allowStringBundling) {
+					this.logStringBundlingError(moduleName);
+					continue;
+				}
+
 				let moduleContent = (await resource.buffer()).toString();
 				moduleContent = removeHashbang(moduleContent);
 				let moduleSourceMap;
@@ -472,14 +477,15 @@ class BundleBuilder {
 			outW.write(`}`);
 		} else if ( /\.js$/.test(moduleName) /* implicitly: && info != null && info.requiresTopLevelScope */ ) {
 			log.warn(
-				`Module ${moduleName} requires top level scope and can only be embedded as a string (requires 'eval')`);
+				"Module " + moduleName + " requires top level scope and can only be embedded as a string " +
+				"(requires 'eval')");
 			let moduleContent = (await resource.buffer()).toString();
 			moduleContent = removeHashbang(moduleContent);
 			if (this.options.sourceMap) {
 				// We are actually not interested in the source map this module might contain,
 				// but we should make sure to remove any "sourceMappingURL" from the module content before
-				// writing it to the bundle. Otherwise browser dev-tools might create unnecessary (and likely incorrect)
-				// requests for any referenced .map files
+				// writing it to the bundle. Otherwise browser dev-tools might create unnecessary
+				// (and likely incorrect) requests for any referenced .map files
 				({moduleContent} =
 					await this.getSourceMapForModule({
 						moduleName,
@@ -542,15 +548,41 @@ class BundleBuilder {
 		});
 	}
 
-	writeBundleInfos(sections) {
+	logStringBundlingError(moduleName) {
+		log.error(
+			"Module " + moduleName + " requires top level scope and can only be embedded as a string " +
+			"(requires 'eval'), which is not supported with specVersion 4.0 and newer");
+	}
+
+	async checkForStringBundling(moduleName) {
+		if (!this.allowStringBundling && /\.js$/.test(moduleName)) {
+			const resource = await this.pool.findResourceWithInfo(moduleName);
+			if (resource.info?.requiresTopLevelScope) {
+				this.logStringBundlingError(moduleName);
+				return null;
+			}
+		}
+		return moduleName;
+	}
+
+	async writeBundleInfos(sections) {
 		this.outW.ensureNewLine();
 
 		let bundleInfoStr = "";
 		if ( sections.length > 0 ) {
 			bundleInfoStr = "sap.ui.loader.config({bundlesUI5:{\n";
-			sections.forEach((section, idx) => {
-				if ( idx > 0 ) {
+			let initial = true;
+			for (let idx = 0; idx < sections.length; idx++) {
+				const section = sections[idx];
+
+				// Remove modules requiring string bundling
+				let modules = await Promise.all(section.modules.map(this.checkForStringBundling.bind(this)));
+				modules = modules.filter(($) => $) || [];
+
+				if (!initial) {
 					bundleInfoStr += ",\n";
+				} else {
+					initial = false;
 				}
 
 				if (!section.name) {
@@ -561,8 +593,8 @@ class BundleBuilder {
 						`The info might not work as expected. ` +
 						`The name must match the bundle filename (incl. extension such as '.js')`);
 				}
-				bundleInfoStr += `"${section.name}":[${section.modules.map(makeStringLiteral).join(",")}]`;
-			});
+				bundleInfoStr += `"${section.name}":[${modules.map(makeStringLiteral).join(",")}]`;
+			}
 			bundleInfoStr += "\n}});\n";
 
 			this.writeWithSourceMap(bundleInfoStr);

lib/lbt/bundle/ResolvedBundleDefinition.js

@@ -38,7 +38,7 @@ class ResolvedBundleDefinition {
 		);
 	}
 
-	createModuleInfo(pool) {
+	createModuleInfo(pool, allowStringBundling) {
 		const bundleInfo = new ModuleInfo();
 		bundleInfo.name = this.name;
 
@@ -66,7 +66,9 @@ class ResolvedBundleDefinition {
 					modules.map( (submodule) => {
 						return pool.getModuleInfo(submodule).then(
 							(subinfo) => {
-								if (!bundleInfo.subModules.includes(subinfo.name)) {
+								if (!bundleInfo.subModules.includes(subinfo.name) &&
+									(!subinfo.requiresTopLevelScope ||
+										(subinfo.requiresTopLevelScope && allowStringBundling))) {
 									bundleInfo.addSubModule(subinfo);
 								}
 							}
@@ -78,19 +80,6 @@ class ResolvedBundleDefinition {
 
 		return promise.then( () => bundleInfo );
 	}
-
-/*
-		public JSModuleDefinition getDefinition() {
-			return moduleDefinition;
-		}
-
-		public Configuration getConfiguration() {
-			return moduleDefinition.getConfiguration();
-		}
-
-
-	}
-	*/
 }
 
 class ResolvedSection {

lib/processors/bundlers/moduleBundler.js

@@ -135,13 +135,13 @@ const log = getLogger("builder:processors:bundlers:moduleBundler");
  * @param {string} [parameters.options.targetUi5CoreVersion] Optional semver compliant sap.ui.core project version, e.g '2.0.0'.
 				This allows the bundler to make assumptions on available runtime APIs.
 				Omit if the ultimate UI5 version at runtime is unknown or can't be determined.
- * @param {@ui5/project/build/helpers/TaskUtil|object} [parameters.taskUtil] TaskUtil
+ * @param {boolean} [parameters.options.allowStringBundling=false] Optional flag to allow bundling of modules as a string.
  * @returns {Promise<module:@ui5/builder/processors/bundlers/moduleBundler~ModuleBundlerResult[]>}
  * Promise resolving with module bundle resources
  */
 /* eslint-enable max-len */
 export default function({resources, options: {
-	bundleDefinition, bundleOptions, moduleNameMapping, targetUi5CoreVersion
+	bundleDefinition, bundleOptions, moduleNameMapping, targetUi5CoreVersion, allowStringBundling = false
 }}) {
 	// Apply defaults without modifying the passed object
 	bundleOptions = Object.assign({}, {
@@ -158,7 +158,7 @@ export default function({resources, options: {
 	const pool = new LocatorResourcePool({
 		ignoreMissingModules: bundleOptions.ignoreMissingModules
 	});
-	const builder = new BundleBuilder(pool, targetUi5CoreVersion);
+	const builder = new BundleBuilder(pool, targetUi5CoreVersion, allowStringBundling);
 
 	if (log.isLevelEnabled("verbose")) {
 		log.verbose(`Generating bundle:`);

lib/tasks/bundlers/generateBundle.js

@@ -96,9 +96,12 @@ export default async function({
 		});
 	}
 	const coreVersion = taskUtil?.getProject("sap.ui.core")?.getVersion();
+	const allowStringBundling = taskUtil?.getProject().getSpecVersion().lt("4.0");
 	return combo.byGlob("/resources/**/*.{js,json,xml,html,properties,library,js.map}").then((resources) => {
 		const options = {
-			bundleDefinition: applyDefaultsToBundleDefinition(bundleDefinition, taskUtil), bundleOptions
+			bundleDefinition: applyDefaultsToBundleDefinition(bundleDefinition, taskUtil),
+			bundleOptions,
+			allowStringBundling
 		};
 		if (!optimize && taskUtil) {
 			options.moduleNameMapping = createModuleNameMapping({resources, taskUtil});

lib/tasks/bundlers/generateComponentPreload.js

@@ -146,14 +146,16 @@ export default async function({
 				});
 			}
 			const coreVersion = taskUtil?.getProject("sap.ui.core")?.getVersion();
+			const allowStringBundling = taskUtil?.getProject().getSpecVersion().lt("4.0");
 			return Promise.all(bundleDefinitions.filter(Boolean).map((bundleDefinition) => {
 				log.verbose(`Generating ${bundleDefinition.name}...`);
 				const options = {
 					bundleDefinition: applyDefaultsToBundleDefinition(bundleDefinition, taskUtil),
 					bundleOptions: {
 						ignoreMissingModules: true,
 						optimize: true
-					}
+					},
+					allowStringBundling
 				};
 				if (coreVersion) {
 					options.targetUi5CoreVersion = coreVersion;

lib/tasks/bundlers/generateLibraryPreload.js

@@ -257,7 +257,7 @@ export default async function({workspace, taskUtil, options: {skipBundles = [],
 		});
 	}
 	const coreVersion = taskUtil?.getProject("sap.ui.core")?.getVersion();
-
+	const allowStringBundling = taskUtil?.getProject().getSpecVersion().lt("4.0");
 	const execModuleBundlerIfNeeded = ({options, resources}) => {
 		if (skipBundles.includes(options.bundleDefinition.name)) {
 			log.verbose(`Skipping generation of bundle ${options.bundleDefinition.name}`);
@@ -267,6 +267,7 @@ export default async function({workspace, taskUtil, options: {skipBundles = [],
 			options.targetUi5CoreVersion = coreVersion;
 		}
 		options.bundleDefinition = applyDefaultsToBundleDefinition(options.bundleDefinition, taskUtil);
+		options.allowStringBundling = allowStringBundling;
 		return moduleBundler({options, resources});
 	};
 

lib/tasks/bundlers/generateStandaloneAppBundle.js

@@ -139,6 +139,7 @@ export default async function({workspace, dependencies, taskUtil, options}) {
 		});
 	}
 
+	const allowStringBundling = taskUtil?.getProject().getSpecVersion().lt("4.0");
 	const bundleOptions = {
 		bundleDefinition: applyDefaultsToBundleDefinition(
 			getBundleDefinition({
@@ -149,6 +150,7 @@ export default async function({workspace, dependencies, taskUtil, options}) {
 			}),
 			taskUtil
 		),
+		allowStringBundling
 	};
 
 	const bundleDbgOptions = {
@@ -164,6 +166,7 @@ export default async function({workspace, dependencies, taskUtil, options}) {
 			optimize: false,
 		},
 		moduleNameMapping: unoptimizedModuleNameMapping,
+		allowStringBundling
 	};
 
 	if (coreVersion) {

test/expected/build/application.n/dest/Component-dbg.js

@@ -0,0 +1,11 @@
+sap.ui.define(["sap/ui/core/UIComponent", "sap/m/Button", "application/n/MyModuleRequiringGlobalScope"], (UIComponent, Button) => {
+	"use strict";
+	return UIComponent.extend("application.n.Component", {
+		metadata: {
+			manifest: "json"
+		},
+		createContent() {
+			return new Button({text: magic.text});
+		}
+	});
+});