如何让UI5内容兼容FLP设置“异步模块加载”？

Question

可通过启动板的“管理站点”访问的“站点设置”页面现在允许启用“异步模块加载”。

但启用后，部分SAPUI5应用程序或FLP插件无法启动。浏览器在控制台报告：

无法执行“.js”：拒绝将字符串评估为 JavaScript，因为“unsafe-eval”不是以下 Content Security Policy 指令中允许的脚本源：

"script-scr * 'unsafe-inline' data: blob:"

.

在这种情况下，CSP 与“异步模块加载”设置有何关系？我们可以做些什么来避免在 UI5 中评估“字符串作为 JavaScript”？

Answer 1

原因

如果激活“异步模块加载”，SAP Fiori 启动板 (FLP) 不仅会使用

data-sap-ui-async="true"

引导 SAPUI5，还会使用包含一组 CSP 指令的

content-security-policy

(CSP) 响应标头提供其 HTML 文档 省略

unsafe-eval

在

script-src

。因此，发起调用

eval

（因此违反 CSP）的 UI5 应用程序和 FLP 插件将不会被浏览器处理。将来，可能会应用更严格的 CSP 指令，例如

script-src

另外省略

unsafe-inline

。

在遗留 UI5 代码中，

eval

通常被调用是由于应用程序通过已弃用的 API 同步获取 JS 模块。其他原因见下表

决议

UI5 已经弃用了遗留/同步 API，并且在 1.96 版本中大大改进了对严格 CSP 的支持。 UI5 内容所有者应该相应地调整他们的代码：

以声明方式定义初始组件 标记接口以异步隐式创建组件内容。 将 JS 模块捆绑为字符串，原因是：sap.ui.extensionpoint.从

❌ 违反 CSP 的 UI5 内容	✅ 使 UI5 内容更符合 CSP
应用程序的 HTML 文档在没有 data-sap-ui-async="true" 或激活调试模式的情况下引导 SAPUI5。	确保 HTML 文档使用 data-sap-ui-async="true" 引导 SAPUI5，并且没有不必要地激活调试模式。回顾您的应用程序准备好异步加载了吗？
在应用程序的 HTML 文档中使用内联脚本 ( <script>...</script> )。	仅使用 <script src="..." ...></script> 以遵守 CSP，而无需使用 unsafe-inline 。通过 sap/ui/core/ComponentSupport .
使用已弃用的 API、工厂、库，如 jQuery.sap.* ,等等……查看记录的 API 参考以了解替代已弃用 API 的更新异步 API。最重要的是，在定义新模块时只使用$el.outerHTML 。需要时，使用 oCore.createComponent. 手动获取 UI5 库和组件，但尽管使用未弃用的 API，但仍同步获取查看记录的 API 参考以了解如何启用异步加载此类资源。例如。手动加载 UI5 库时： sap.ui.controller	在运行时同步创建组件内容，如根视图、路由视图和嵌套视图，尽管它们是声明式定义的。 在 sap.ui.component中实现sap.ui.*fragment
	sap.ui.*view
使用过时的标准 Grunt 构建任务。结果：	调用sap.ui.commons 前的全局指令。结果： sap.ca.scfld
通过利用 UI5 工具生成 sap.ui.define 包，例如 sap.ui.require . 定义UI5模块时，避免全局指令，只在JS文件顶层使用 Core.loadLibrary("that.lib",/*async:*/true); 。 结果： "sap.ui.core.IAsyncContentCreation"	可能有助于识别 UI5 中的 CSP 问题的其他资源 UI5 工具 中间件 Component.js 构建应用程序，例如用 Component-preload.js 或 "my/Component.js":'sap.ui.define([...'

sap.ui.define

文件夹提供构建的应用程序（参考

SAP/ui5-tooling issue #300

）。

例如。与"my/Component.js":'var appID...'

.

使用以下 URL 参数运行应用程序：

Component-preload.js

1. ui5 build -a --clean-dest

   越高，CSP越严格
2. 删除

   sap.ui.define

   如果浏览器应该实际应用CSP级别。
   

   观察浏览器控制台中报告的任何 CSP 违规行为。

3. ⚠️ 目前不能与自定义中间件结合使用
   "my/Component.js":function(){//...

   .

   问答
   如何避免 UI5 中的“Synchronous XMLHttpRequest on the main thread”警告？
   在运行时寻址 UI5 模块时如何检测
   csp
调用？

文档

有关 UI5 中 CSP 的当前状态以及存在哪些限制的更多详细信息，请参阅文档主题

内容安全策略

。