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

Question

我正在将 Supabase 用于新的 Sveltekit 应用程序，使用此模板

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

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

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

Sveltekit 中是否有任何功能可以让我做到这一点？或者我是否需要集成像 Rails 这样的后端？

Answer 1

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

• 端点
• 钩子

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

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

1. 从SvelteKit 页面获取本地 SvelteKit 端点（而不是直接调用外部 API，如 Supabase）。您可以从页面上的两个不同位置获取端点：
   • load()in <script context="module">（允许在发送/呈现页面之前从服务器端调用 API）
   • 主要的 <script>
2. 在单例中初始化外部 API。
3. 从端点调用外部 API 并将结果返回到页面。

笔记：

• SvelteKit 端点是无服务器 lambda 函数的泛化。（请参阅Netlify或AWS风格）
• 端点/钩子中使用的任何 NPM 模块都必须是 devDependencies。
• fetch()推荐（例如与 axios），尤其是在load(). load()提供了一个特殊版本，fetch()用于缓存来自服务器端的调用，以便客户端可以重用结果。
• 第 2 步主要是支持无服务器环境，如 Netlify。