如何在网页上实现安全和隐藏未经授权的用户的代码？

Question

我正在创建一个可以查看敏感信息的统计网页。

网页有一个表格，里面有大量数据，可以编辑并存储在服务器的数据库中。但在用户获得适当的身份验证（如登录）之前，它需要被隐藏。 （表本身和代码也是）。但是我发现堆栈溢出中的大多数问题都说这基本上是不可能的。但是当我看到很多知名网站时，它们似乎隐藏得很好。所以我想这个问题有一些解决方案。

首先，我构建了一个完整的 React - Express - Node - MariaDB 工具链。

react client负责渲染网页内容和可编辑表格，并请求提交已编辑的内容。

node with express 负责从数据库中检索数据、更新数据库（提供数据以从客户端操作——仅此而已）

当我考虑客户端代码的安全性时遇到了一个问题。我想隐藏页面的所有内容（不仅仅是来自服务器的数据，还有它的逻辑和特性）

为了实现我的目标，我考虑了几件事，但我怀疑如果我创造它是否正确并且运作良好。

1. 使用服务器端渲染 -- 由于性能原因和可用资源不足，无法使用

   • 服务器端渲染可以对用户隐藏逻辑，因为它忽略了服务器中唯一的 HTML，所有操作都提交给服务器，服务器处理这些操作并提供其结果。
   • 所以我一开始只能提供登录页面，如果登录成功，我可以从服务器发送其余的 HTML 及其逻辑。
   • 问题是我在网页中的内容很庞大，并且会经常与用户交互，并且在我的桌子上应用虚拟化（出于性能原因），它的数据和渲染逻辑应该由网络浏览器处理。

2. 结合 SSR 和客户端渲染

   • 我对此的检查不确定，我怀疑是否可能。
   • 使用 SSR 向未经授权的用户隐藏网站内容，如果获得授权，Web 浏览器会按需呈现其全部内容。 （授权前应隐藏代码和逻辑，未经授权的用户只能看到登录页面）
   • 有可能吗？

3. 按需获取代码。

   • 也是我的检查，这就是我要找的。但我强烈怀疑这是否可能。
   • 工作流程如下 如果用户未登录:: 用户只能看到登录页面及其代码 如果用户已登录:: 用户可以看到页面的功能，如管理、统计等。 如果用户接近特定功能：：渲染逻辑和 HTTP 请求接口是从服务器下载的（或者性能较差的逻辑或其他......），它会渲染用户想要看到和做的事情。

不从上面的想法中寻找方法是可以的。你能提供一些大纲来实现这种网页吗？我对网络编程很陌生，所以我找不到合适的方法。我想知道如何使用什么样的解决方案、库、结构来实现这一目标。

我应该为此使用什么库或包？ 我该如何实现？

或者，您能否向我描述一下现代网站是如何实现这一目标的？ （我觉得SAP系统和我想实现的很像）

Answer 1

前言

安全是一个复杂的话题，不可能达到 0 威胁。我将尝试制定一个可以满足您的要求的答案。

后端：令牌、凭据、身份验证

所以，您目前正在使用 Express 作为后端，因此需要保护这部分的访问，存在许多解决方案，我喜欢 token authentication，但您可以使用 username/password（或this) 让用户访问后端。

根据您的描述，您将使用某种 API（REST、GraphQL 等）连接到后端并进行查询（fetch、cross-fetch、apollo-link 等.) 并通常在标头中将令牌添加到对后端的调用中。

如果用户没有正确的令牌，他们就没有数据。许多网站使用这种方法来阻止用户使用数据（例如 Twitter、Instagram）。这应该涵盖后端数据的安全性，并且不会暴露任何代码。

前端：WebPack 和应用代码拆分

现在是棘手的部分，因此您希望客户端不能一次访问所有前端，而是分几个部分访问。这有两个警告：

1. 会比正常使用慢一点
2. 一旦客户登录一次，他就可以访问应用程序

我在这种情况下看到的唯一解决方法是仅使用服务器端渲染，如果您想将客户端在前端的数据量限制在最低限度。当然它很慢，但如果你想要最大程度的保护，那是唯一的解决方案。

然而，如果您仍想保留一些交互并拥有更快的前端，同时保持一点安全性，您可以使用 WebPack 进行一些代码拆分。我不熟悉 C，所以我不能说，但正如我在评论中提到的那样，WebPack 的 Multiple page application 应该为您构建更安全的东西提供了一个良好的开端。

首先，您将拥有例如 2 个用于输入前端的 html 文件：一个用于登录名，一个用于应用程序。登录仅包含用于进入应用程序的 Javascript 模块，不应加载其他 Javascript 模块。

总而言之，入口点是您进入应用程序的方式，这是一个非常广泛的主题，我无法在此答案中涵盖，但我建议您关注 WebPack's tutorial 并了解如何工作这个出来。 我推荐代码拆分部分，但所有教程都值得一看。

其次，您必须调整优化模块。它通常是一个模块，它试图通过合并不同部分使用的或冗余的方法来减小应用程序的大小：你不想要这个。

在您的情况下，您不希望未经身份验证的用户拥有访问权限。所以你可能不得不改变那里的东西（以及另一个广泛的主题将在一个答案中涵盖，因为你必须决定你为优化而保留的内容以及为安全而删除的内容），但这里是指向@的链接987654331@ 和注意，您必须修改 SplitChunksPlugin 才能不进行此优化。

我希望这会有所帮助，手头有很多解决方案，这不是一个全面的指南，但它应该为您提供足够的材料来满足您的需求。