Angular：只有在授权的情况下才从服务器加载延迟加载的模块（使用 JWT）

Posted 2023-03-10

技术标签:

【中文标题】Angular：只有在授权的情况下才从服务器加载延迟加载的模块（使用 JWT）【英文标题】：Angular: Only load lazy-loaded module from server if authorized (using JWT) 【发布时间】：2019-01-02 15:42:19 【问题描述】：

我在我的 Angular 应用程序中使用延迟加载模块，直到现在一切正常。

现在我有一个关于保护的具体问题，但我还没有找到答案。您有机会使用 Angular Guard 和“CanLoad”来“保护”延迟加载的模块。但这仅在前端，因此可以绕过它，即使不允许用户查看 ist，也会加载模块。例如管理区域。

我使用 JWT 进行授权，数据全部托管在 Azure 后端，与托管 Angular 应用程序的应用程序服务器完全分离。

我现在正在考虑是否有任何方法可以使用 JWT 来验证并检查该用户服务器端是否允许加载当前模块。

例如，您有以下模块：

功能A 功能B 功能C 管理员

在每个功能模块/区域的 JWT 中，有效负载中都有一个变量表示是否允许用户使用此功能（真/假）。

现在，如果用户尝试为特性 A 加载延迟加载模块，我想使用公钥验证应用服务器上的 JWT，以了解“此密钥是有效的，并且与天蓝色服务器”。

接下来它将检查 FeatureA 的变量是否设置为 true。如果是这样，我将模块（js-chunk 文件）返回给客户端。如果没有，我会返回 403 禁止。

因此，即使应用程序被修改，该人也只有在具有有效 JWT 的情况下才能获得该功能模块，该 JWT 表明该功能已为该用户激活。

有没有办法做到这一点？我不知道我应该从哪里开始寻找解决方案。因此，如果有人能告诉我如何获得它以及我需要什么，我将非常感激！

提前致谢，

Sazeidya。

【问题讨论】：

【参考方案1】：

...另一个开发人员为另一辆战车发明了另一个***...

首先，延迟加载的模块由Webpack jsonp function 接收（如果我们谈论的是Angular CLI，它在内部使用Webpack）默认情况下只是将另一个脚本注入到页面中；这意味着您几乎没有机会通过此请求传递您的令牌，因为它是作为脚本加载的，而不是作为 XHR 加载的。添加令牌作为 get 参数也将是一个安全问题，所以我认为这也不是一个选项（即使它是可以实现的）。

让我们假设，您可以更改 Webpack 加载块的方式（或者例如编写一个自定义服务工作者来执行您想要的操作，我仍然不确定它是否可以轻松完成）。那么我们来个问题：

为什么需要保护管理（或其他）模块？

这只是一段代码。如果你在这个模块中有一些敏感的东西，那么这是你的架构的问题。所有敏感数据都应来自 API。

您唯一需要保护的是应用程序中使用的管理 API。每个调用都应根据该调用提供的令牌进行验证。如果用户在令牌中有正确的scope（或您用于授权的任何内容），则请求应返回数据，否则返回 403。差不多就是这样。

【讨论】：

感谢您的回答 :) JWT 将通过 Cookie 发送到服务器。然后我想到了 validate 检查用户是否已通过验证并返回模块或错误。我的意思是，我必须能够处理延迟加载的错误吗？例如，当客户端在加载初始应用程序后未连接到互联网时。所有数据都受到 API 的保护。但也许模板本身揭示了有关我们产品如何工作的足够信息，因为它们是在那里配置的。所以我也在考虑保护它。但显然这是不可能的。不幸的是。在您的情况下，最好的保护是为管理员和/或 *** 制作另一个应用程序。幸运的是，Angular cli 可以很容易地在同一个代码库上创建多个应用程序 @Sazeidya 现在我很好奇看到你的模板 :) 你在做什么样的火箭科学，没有人做过，你需要隐藏公共网站管理区域的实现?而且，顺便说一句，将 JWT 作为 cookie 发送会引入可能的 CSRF 漏洞它不是一个公共网站。这是一个“封闭”的商业应用程序，供我们的客户使用我们的产品。我不知道是否有其他人像我们一样做事，但我无意听起来像“我们很优秀”或类似的东西:) 因为在管理区域可以配置这些产品并且一些重要的处理数据将通过模板添加到后端服务器，我认为模板本身足以让竞争对手了解我们的工作方式。所以我正在考虑保护模块服务器端，但显然这是不可能的。好吧，我会考虑一下，然后看看我要做什么。无论如何，感谢您的帮助和您的时间！我很感激:)【参考方案2】：

解决方案

这完全取决于您的后端。

由于 Angular 前端文件只是某些服务器交付的静态文件，这取决于：

您可以区分模块的文件为您的前端文件提供服务的应用程序可以根据某种身份验证/授权允许/阻止对选定文件的访问

广告 1

这对 Angular 来说没有问题。您必须使用以下标志 [1] 构建您的项目：

ng (...) --named-chunks=true (...)

这将生成具有以下名称的模块 js 文件：

your-module.<hashNumber>.js

广告 2 - Spring Boot 解决方案

在我当前的项目中，我们使用 (Java) Spring Boot 来为应用程序前端和后端提供服务。我们正在使用 spring-security 登录表单登录应用程序。它创建会话并在 cookie 中跟踪此会话。 Cookie 会在每个请求时发送到后端 - 也在加载惰性模块时。在后端，您将会话与用户角色相关联。这让您允许用户根据用户登录并拥有适当的角色来下载 Angular 模块。

广告 2 - 云 (AWS)

由于我不熟悉 Azure，但我对 AWS 有一些背景，我可能会尝试描述一些基于 AWS 的解决方案，这些解决方案应该可以移植到所有主要的云提供商。

如果您使用云提供商身份验证和授权系统（如 AWS Cognito），那么您应该能够保护对您的访问：

a) 存储（如 S3）或

b) 在 VM 上提供的应用程序（如 EC2）。

在第一个条件 (a) 中，您可能能够基于某种 policies（资源访问限制器）和 authentication system groups（来自例如 Cognito）设置访问选定模块（javascript 文件）的策略。

在第二个条件 (b) 中，这取决于您的后端。上面介绍了短 Spring Boot 解决方案。