在Nuxt.js中禁用客户端水合或停止在Nuxt.js中暴露原始数据

Question

我正在创建一个使用Nuxt.js进行服务器端渲染的Web App。

我不想将我的后端数据暴露出去，因此我尝试使用asyncData和Axios来请求我的后端服务器。

但是Nuxt.js通过window.__NUXT__.data变量向客户端公开了我的后端数据。

我尝试使用render:route钩子来删除这个问题，但是它报错：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside p, or missing . Bailing hydration and performing full client-side render.

所以我尝试删除导致不匹配错误的脚本，但是这会使我的站点停止工作。

那么问题来了：如何禁用客户端水合(client-side virtual DOM tree rendering)？或者如何停止暴露原始数据？

我在asyncData中使用了以下代码：

asyncData ({ params, error }: { params: { id: string }, error: Function }) {
  return axios.post('(backend)', data).then(res => res.data ? ({ data: res.data }) : error({ statusCode: 400, message: 'Bad request' }));
}

- BiscoChannel

---

我正在解决同样的问题。我不想暴露那些数据。 - Ozgur

你为什么想要在这里隐藏一些数据？是什么实际应用场景违背了Web的基本原则（共享）？ - kissu

停止客户端水合作用会导致您的网站无法监听事件等。如果这对您不是问题，我可以与您分享一个停止水合作用的脚本，这样您就不会看到错误了。 - Arik

@arik 我很想看看这个解决方案。与此同时，我不确定将更多的JS添加到您的捆绑包中是否是正确的方法。我猜最初的想法可能完全相反。因此，即使某种方式可以实现，这可能是最糟糕的事情。或者你是否成功让Markus项目在Nuxt2中工作了？ - kissu

Answer 1

您无法停止 SSR 的内容水合作用（至少目前是这样，但很快就计划只提供静态内容服务）。 Nuxt 旨在为您的日常 VueJS SPA 添加 SSR。如果您不想进行水合作用，那么您可能在这里使用错误的框架。 Astro 可能更适合，这只是其中之一。您也可以在此处找到更多信息。

---

DOM 不匹配问题在 这里有解释（原因+解决方案）。

---

如何在客户端隐藏东西？

简短回答：你不能。
长答案在这里。

如果您想在页面上显示某些内容，则需要数据。
现在我们使用 SPA 在浏览器中拥有本地状态。由于它是本地的并且在您的眼中，状态存在于您的浏览器中，因此您无法真正隐藏它，而且，为什么要这样做呢？
如果您想隐藏数据，可以不发送初始数据或者至少发送一张图片。
您也可以进行一些混淆，但这只是一个权宜之计，对语义/性能等并不好。

如果您有一些敏感数据，想要仅向管理员等人显示，可以使用一些认证和权限检查。更多详细信息请参见上面的长答案。

- kissu

Answer 2

如果您确实真的想在明文中隐藏数据，也就是说，您想在客户端发送数据而不暴露它，那么当前并不存在完全的解决方案，但有多种方法可以达到您所需的效果，请根据您的意图选择您喜欢的方法。

如果您不想暴露数据，则不要将其发送到客户端

是的，我知道您已经提出了相反的要求，但在阅读真正非传统且通常很困难的方法之前，首先让我们思考一下您是否确实需要这样做。替代方案是根本不将此数据发送到客户端，而是在服务器上处理此敏感数据。这是Web开发99.9999%情况下需要采用的方案。（该数字是我的主观估计结果，并非代表性的统计研究结果）

电子邮件、聊天、短信、纸质邮件、烟信号、莫尔斯电码

您可能需要向客户端发送该信息，但这并不意味着您必须将其发送到您网站的客户端。您可以使用其他渠道发送信息，只需确保它是可信和可靠的。因此，我真的不推荐使用烟信号。

iframe

现在来谈谈技术细节。现代浏览器会防止在不同域的情况下，网页1打开网页2时出现在iframe中的情况。因此，您可以创建一个与主页面使用的域名不同的域，并通过调用您全新的第二个域的页面（当然要使用HTTPS），使用最小化的JavaScript和闭包向客户端展示您想要的内容。如果您需要在iframe和主页面之间通信，则可以在两者之间使用消息传递，参见标签或窗口之间的通信。

可能会有反对意见，即用户仍然可以查看其浏览器的网络选项卡，其中显示了实际接收到的数据以及调试JavaScript的可能性。好吧，运气不佳。我们不能将数据发送到客户端而不将其发送到客户端。如果这一点太冒险了，那么请继续阅读。

编码要避免暴露的内容

是的，它会带来很多困难，有时您会希望从未这样做，但您可以编码您的顶级机密数据，即使用户可以访问它，他/她也无法知道它是什么。但在这种情况下，您将需要面对加密/解密数据时遇到的问题。

可以使用可视化表示您的数据

例如图像、SVG或某些其他类型的生成的类似验证码的内容，但不要将其作为文件发送，因为第三方监视者可能会下载它。如果您在iframe中生成它，则您的数据难以被挖掘。哦，等等，但是如果黑客从您的椅子后面观看您的屏幕呢？

编写自己的浏览器（扩展程序？）

您可以实现一个浏览器或一组浏览器扩展程序来处理此问题并使用HTTPS。但是，如果间谍有幸破译了它呢？如果你有病毒怎么办？

底线

由于您将数据发送到客户端，因此您必须接受一些风险。无论如何都无法避免这一点。您可以减少这些风险，但不发送数据总比发送数据更安全。

- Lajos Arpad