如何在 sveltekit 1.0 上保护 api 密钥

Question

我正在使用 ghost，我进行了集成，我想从前端隐藏 api 密钥。 我不相信我可以对 ghost cms 设置限制（这也可以）。 而且我确实相信 +page.js 文件也在浏览器上运行，所以我对如何实现这一点感到有点困惑？

Answer 1

内部 sveltekit 模块$env/static/private ( docs ) 是您使用安全 API 密钥的方式。 Sveltekit 不允许您将此模块导入客户端代码，因此它提供了额外的安全层。 Vite 在构建时自动从.env文件和process.env加载你的环境变量，并将你的密钥注入到你的服务器端包中。

import { API_KEY } from '$env/static/private';
// Use your secret

Sveltekit 有 4 个模块用于访问环境变量

• $env/static/private （覆盖）
• $env/static/public可由服务器和客户端访问并在构建时注入（文档）
• $env/dynamic/private由你的运行时适配器提供； 仅包含不以您的公共前缀开头的变量，默认为PUBLIC_并且只能由服务器文件导入（文档）
• $env/dynamic/public由你的运行时适配器提供； 仅包含以您的公共前缀开头的变量，默认为PUBLIC_ （文档）

Answer 2

您不需要隐藏密钥。

幽灵内容 API 文档：

这些密钥在浏览器和其他不安全的环境中使用是安全的，因为它们只提供对公共数据的访问。

Answer 3

从公众视图中隐藏第三方 API 密钥的一种常见方法是设置代理 API 路由。

一般的想法是让您的客户端（浏览器）查询您提供/托管的代理 API 路由，让该代理路由使用您的凭据（API 密钥）查询第三方 API，并传递来自第三方的结果API 回客户端。

由于对第三方 API 的查询完全在后端进行，因此您的凭据永远不会暴露给客户端（浏览器），因此对公众不可见。

在您的用例中，您必须创建 3 个动态端点路由来复制 Ghost 的 API 的结构：

src/routes/api/[resource]/+server.js匹配/posts/ ， /authors/ ， /tags/等：

const API_KEY = <your_api_key>; // preferably pulled from ENV
const GHOST_URL = `https://<your_ghost_admin_domain>/ghost/api/content`;

export function GET({ params, url }) {
    const { resource } = params;
    const queryString = url.searchParams.toString();

    return fetch(`${GHOST_URL}/${resource}/?key=${API_KEY}${queryString ? `&${queryString}` : ''}`, {
        headers: {
            'Accept-Version': '5.0' // Ghost API Version setting
        }
    });
}

src/routes/api/[resource]/[id]/+server.js匹配/posts/{id}/ , /authors/{id}/等：

const API_KEY = <your_api_key>; // preferably pulled from ENV
const GHOST_URL = `https://<your_ghost_admin_domain>/ghost/api/content`;

export function GET({ params, url }) {
    const { resource, id } = params;
    const queryString = url.searchParams.toString();

    return fetch(`${GHOST_URL}/${resource}/${id}/?key=${API_KEY}${queryString ? `&${queryString}` : ''}`, {
        headers: {
            'Accept-Version': '5.0' // Ghost API Version setting
        }
    });
}

src/routes/api/[resource]/slug/[slug]/+server.js匹配/posts/slug/{slug}/ , /authors/slug/{slug}/等：

const API_KEY = <your_api_key>; // preferably pulled from ENV
const GHOST_URL = `https://<your_ghost_admin_domain>/ghost/api/content`;

export function GET({ params, url }) {
    const { resource, slug } = params;
    const queryString = url.searchParams.toString();

    return fetch(`${GHOST_URL}/${resource}/slug/${slug}/?key=${API_KEY}${queryString ? `&${queryString}` : ''}`, {
        headers: {
            'Accept-Version': '5.0' // Ghost API Version setting
        }
    });
}

然后你所要做的就是调用你的代理路由来代替你应用程序中原来的第三方 API 路由：

// very barebones example
<script>
    let uri;
    let data;

    async function get() {
        const res = await fetch(`/api/${uri}`);
        data = await res.json();
    }
</script>

<input name="uri" bind:value={uri} />
<button on:click={get}>GET</button>
{data}

请注意，使用代理 API 路由还有一个额外的好处，即可以避免潜在的 CORS 问题。