如何从 SvelteKit 应用程序发送安全的 API 请求，而不在客户端显示 API 密钥？

Question

我正在使用 Supabase 开发新的 Sveltekit 应用程序，this template

目前，我在客户端传递 Supabase 密钥，如下所示：

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

创建安全 backend/API 的最简单方法是什么，这样应用程序就可以从 Supabase 获取内容，而无需在客户端显示 Supabase 密钥？

Sveltekit 中是否有任何内置功能可以让我执行此操作？或者我需要集成一个像 Rails 这样的后端吗？

Answer 1

SvelteKit 在两个主要地方支持服务器端代码：

浏览器永远无法访问这些代码；只有结果。此外，客户端不会看到任何网络调用，因为它们都发生在服务器上（对于 API 键嵌入 URL 的情况）。每个 API 的 locals 属性是与所有服务器端部分共享敏感数据（如 API 密钥）的好地方。

一般建议使用本地端点代理外部 API 调用：

从 SvelteKit pages 获取本地 SvelteKit 端点（而不是像 Supabase 那样直接调用外部 API）。您可以从页面上的两个不同位置获取端点：
- load() in <script context="module">（允许在页面 sent/rendered 之前从服务器端调用 API）
- 主要<script>
在单例中初始化外部API。
从端点调用外部 API 并将结果 return 发送到页面。

备注：

SvelteKit 端点是无服务器 lambda 函数的概括。（参见 Netlify or AWS 种口味）
endpoints/hooks 中使用的任何 NPM 模块都必须是 devDependencies。
fetch()（例如，与 axios 相比），尤其是在 load() 内。 load() 提供了一个特殊版本的 fetch()，可以缓存来自服务器端的调用，以便客户端可以重用结果。
第 2 步主要是为了支持像 Netlify 这样的无服务器环境。

How can I send secure API requests from SvelteKit app, without showing API keys on the client side?