在网络负载中隐藏密钥

Hide secret keys in network payload

我有一个开箱即用的 Vue Storefront,它有一个 Nuxt.js 前端和一个 Express.js 后端。

在这个项目中,我创建了一个自定义服务器中间件(即 Express.js 部分),其中包含一个 Axios 调用。我的整个 Vue Storefront 项目托管并部署在服务器上,我还将 Axios 调用的密钥存储为 eviorment 变量。每当我通过已部署网站上的 Axios 调用请求数据时,我仍然可以在浏览器控制台的有效负载中看到我的密钥。

这些密钥可以隐藏吗?由于调用是在 VSF 服务器中间件(它是引擎盖下的 Express.js 服务器)中完成的,而且我的密钥也在服务器上定义...不在 .ENV 文件中。

The official docs also state the following about the server middleware:

我还启用了服务器端渲染,如果这对此有任何影响的话。

正如我在之前 中所解释的那样,您无法真正隐藏客户端应用程序中的任何内容。

您拥有 ssr: truetarget: 'server' 的事实允许使用 serverMiddleware。 Nuxt 也是一个 Express 服务器,所以你在技术上仍然可以完全隐藏东西,这个的配置是 。请注意整个答案(尤其是最后的 gotcha)。

TDLR 如上所述:您需要某种代理来隐藏它,所以您可以这样做:

  • 直接与 Nuxt2 一起使用,但整体上有点棘手且难以使用,除了支付整个 Node.js 服务器之外,还有可能在某些时候暴露这些令牌的错误
  • 获取另一台 Node.js 服务器以正确分离问题并将该服务器用作代理,它可以非常轻便(不需要强大的配置),也不那么昂贵 price-wise
  • 无服务器功能可能是这里最好的主意,因为它轻便、便宜而且您不需要管理任何东西(将您的查询发送到那里,它将使用秘密令牌代理请求)但它可能有点关于冷启动很烦人