如何通过 pubsub 在 shell 应用程序和微应用程序（前端）之间安全通信答案

【问题标题】：How to communicate securely between shell app and micro application(frontend) via pubsub如何通过 pubsub 在 shell 应用程序和微应用程序（前端）之间安全通信
【发布时间】：2020-09-21 12:57:11
【问题描述】：

我有一个 shell 应用程序，它是执行所有 API 通信的容器应用程序。另外，我确实有多个 Micro 应用程序，它们只是将 API 请求信号广播到 shell 应用程序。

现在，牢记安全性，作为一个外壳应用程序，它如何确保 API 请求信号来自我拥有的受信任的微应用程序。

确切地说，我的问题是，有没有办法让 shell 应用程序知道信号来自它拥有的微应用程序，而不是来自任何不受信任的（如黑客攻击、XSS）来源

【问题讨论】：

您的问题不够精确。 shell 申请是什么意思？那是一些在你的 JS 应用程序中扮演后端角色的应用程序吗？如果是这样，那么当您投入生产时，您宁愿单独部署它们，通过使用 HTTPS 和 JWT，您将达到足够的安全级别。如果您要在本地使用它们，那么为什么还要担心安全性呢？
@YuriyKravets Shell 应用程序 - Angular 应用程序，用作呈现微应用程序的容器（这也是 Angular）
严格在前端的安全性是假的安全性，没有办法保护浏览器中发生的事情。我假设你以运行时集成的方式运行你的应用，然后你会确保你下载了一个可信的微应用。
@surendher 它不一定是 Angular 应用，基本上任何应用都可以是 shell

标签： javascript angular typescript publish-subscribe micro-frontend

【解决方案1】：

根据微前端架构，每个微前端都应该调用它自己的 API（微服务）。但是，您的 Shell 应用程序可以提供一些通用/全局库来帮助微前端进行 AJAX 调用。但拨打电话的责任必须由个人微前端承担。

【讨论】：

【解决方案2】：

根据您的问题，不清楚您的应用是在 iframe 中运行，还是直接加载到您的页面中。

对于 iFrame，您使用 postMessage，您可以通过 event.origin 检查收到的消息的来源。将此与允许的域列表进行比较。

如果您的微应用直接在您的页面上，那么您只需控制允许加载到其中的内容。

【讨论】：

【解决方案3】：

因此，在大多数微前端中，每个微应用都会对后端相应的微服务进行自己的 API 调用，而 shell 应用对此一无所知。与此相关的外壳应用程序最多可以将一些应用程序配置传递给所有微应用程序，这些微应用程序具有各种后端的主机名等配置，并且如果所有后端都使用相同的身份验证，则提供身份验证令牌。

但是要确保 shell 应用没有，比如说，带有恶意代码的广告试图冒充另一个微应用，嗯..

微应用如何与外壳通信？有共同的自定义事件吗？入侵者必须知道 customEvent 的名称，但这只是隐蔽的安全性，并不是真实的。
postMessage 等其他方法位于窗口对象之间，我认为这对您的情况没有帮助。

您也许可以重新使用 shell 和微应用都知道的 authToken，因为它是在启动时进行通信的。但如果你有来来去去的微应用，那也行不通。

【讨论】：