时间戳

首页 > 解决方案 > 保护 SSR Nuxt.js（或纯 Vue.js）中仅授权路由的源代码

security - 保护 SSR Nuxt.js（或纯 Vue.js）中仅授权路由的源代码

问题描述

我使用 Express 后端和nuxt.render中间件来整合我的 API、前端和开发环境。到目前为止，一切都很好，但我对我的身份验证设置的安全性有些担忧。

我的后端通过 Nuxt 中间件将其用户会话注入 Vuex。虽然这对于限制访问非常有效，但这些文件的源代码始终可以通过直接 GET 方法获得。（例如，如果/admin受到保护，/_nuxt/admin.js将仍然可用，并将包含该页面的整个源代码）。更糟糕的是，由于preloadNuxt 将默认链接放在头部，即使没有登录，它们也会被自动获取。

我知道这并没有很多安全问题，因为我的管理 API 调用在服务器端强制执行身份验证，但有时（就像我的情况一样）公开源代码是不可取的。

我想出了一个效果很好但不是很优雅的解决方案：

  1. 在nuxt.config.js，我设置render.resourceHints = false。我希望我不必这样做以从可用路由的预取中受益，但似乎没有办法限制预取路由的选择。

  2. 在插入next.renderExpress 的中间件链之前，我选择性地限制了页面的源代码。（例如app.get('/_nuxt/pages/admin.js', restrict)，如果未通过身份验证则restrict返回 a401或调用的中间件在哪里next()。这会阻止 XHR 获取和直接 GET。）

  3. 我制作了一个自定义error.vue模板，在该模板中捕获了 Nuxt 如果被迫访问用户不应访问的路由时将抛出的错误消息，如下所示Loading chunk 1 failed，并将其规范化为“禁止”错误页面。

有没有我想念的更实用的方法，或者这超出了 Nuxt.js 目前提供的范围？

标签： securityauthenticationvue.jsserver-side-renderingnuxt.js

解决方案

推荐阅读