Как я могу отправлять защищенные запросы API из приложения SvelteKit, не показывая ключи 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). Вы можете получить конечную точку из двух разных мест на странице:
   • в <script context="module"> (позволяет вызывать API со стороны сервера перед отправкой / рендерингом страницы)
   • основной <script>
2. Инициализируйте внешний API в синглтоне.
3. Вызовите внешний API из конечной точки и верните результаты на страницу.

Заметки:

• Конечные точки SvelteKit - это обобщение бессерверных лямбда-функций. (См. Варианты Netlify или AWS )
• Любые модули NPM, используемые в конечных точках / перехватчиках, должны быть devDependencies.
• рекомендуется (например, vs axios), особенно внутри. load() предоставляет специальную версию fetch() который кэширует вызовы со стороны сервера, чтобы на стороне клиента можно было повторно использовать результаты.
• Шаг № 2 в основном предназначен для поддержки бессерверных сред, таких как Netlify.