确保敏感代码 运行 仅在 NextJS 的服务器端,这样的代码可以从哪里来 运行?

Ensuring sensitive code is run only server-side with NextJS, where can such code be ran from?

我正在学习 NextJS,我正在尝试确定如何使用干净且安全的架构来布局我的项目。但是,我不确定在哪里存储包含潜在敏感数据(即与数据库的连接、访问文件系统等)的代码。我已经阅读了文档,但我仍然不确定这个问题。

在我的项目布局中,我有 2 个与此问题相关的目录:我添加的顶级 /lib 和每个 NextJS 项目中内置的 /pages/api 目录。

据我了解,/pages/api 永远不会看到客户端,因此对于敏感代码是安全的。它应该只用作执行 post、修补、删除等操作的地方。使用 /pages/api 的一个示例是当您从表单向服务器发出 post 请求时。您可以从任何地方通过此路由调用 api,例如:表单组件、/lib 文件夹、/pages 中的页面、外部第三方 api - 任何地方.

另一方面,顶层 /lib 目录是存放样板代码的地方,可执行繁琐的操作,例如将博客 post 按字母顺序排序、进行数学计算等. 这不一定是“秘密”或敏感的——只是又长又烦人的代码。 /lib 目录将始终被客户端看到 - 即使它是仅由服务器端方法调用的代码,例如 getStaticProps().

简而言之,任何远程敏感的内容都应始终作为对 /pages/api 目录的 post、补丁、放置等请求,并且任何不敏感的 long/tedious 代码都应该重构到/lib目录。

我有这个好吗?

您可以在 api 路线、getServerSidePropsgetStaticProps 中做敏感的事情。 None 您在 /lib 中的代码将被客户端看到,除非您的页面实际上从那里导入代码。

既然你在谈论数据库连接,那么你不太可能意外地从浏览器连接到你的数据库。几乎 none 用于连接到数据库的库无法在浏览器中运行,而且您也只能在客户端访问以 NEXT_PUBLIC_ 开头的环境变量。

你还需要记住 /api 下的每个文件都是一个 api 路由,所以你应该把你的帮助文件放在 /lib 而不是 /api.如果将它们放在 /api 下,可能会导致安全漏洞,因为任何人都可以触发 /api.

下文件的默认导出功能

如果您出于某种原因需要绝对确定某些代码没有捆绑到客户端将加载的文件中,即使您不小心导入了它,也可以使用自定义 webpack 配置来完成。请注意,如果代码本身非常敏感,我只会查看此选项。因为有人能够阅读代码会导致后果。不谈论执行数据库查询或类似操作的代码,即使您不小心将它们导入客户端包,也不会造成任何威胁,因为客户端无法连接到您的数据库。

/pages/apilib 应该是足够安全的。 Next.js 未公开这些文件。 Next.js 公开您 public 文件夹中的文件。 你所说的 lib 是正确的。它只是一个文件夹,可用于存放可在代码中重用的辅助函数。

getStaticProps 在 server-side 上只有 运行。它永远不会 运行 上 client-side。它甚至不会包含在浏览器的 JS 包中。这意味着您可以编写直接数据库查询等代码,而无需将它们发送到浏览器。 您可以使用此功能安全地拨打电话。

有一个工具可用于验证 getStaticProps 中的代码,仅在 运行 服务器端,永远不会暴露客户端。 Link 到工具:https://next-code-elimination.vercel.app/

我在许多 Next 项目中使用 /lib 的方式与您打算的方式大致相同,并且没有遇到任何问题。正如其他人所提到的,如果您 server-side 使用 getStaticProps 生成所有内容,您应该没问题。

我 运行 遇到的一件事是客户端和服务器端在实际客户端和服务器之间不同步(尤其是使用 iFrame 或在获取后进行操作的数据)。这不会导致安全问题,但需要从架构上考虑。如果您需要将效果同步到 URL 更改,Next 会公开其路由器。