如何在Svelte/SvelteKit中隐藏Mapbox、Planet的API密钥？

问题描述 #

我尝试在客户端隐藏Mapbox、Planet等瓦片地图的API密钥。最初使用非SvelteKit的Svelte框架，搭配dotenv存储密钥：

.env文件内容：

MAPBOX=someaccesstokenkeys
PLANET=someaccesstokenkeys
STYLE=stylefolder/styleid

地图能正常运行，但通过元素检查器仍能看到密钥。想知道是否有替代方案，或是必须改用SvelteKit？

补充：我已尝试SvelteKit，将密钥存入.env，在+page.server.js中导入私有环境变量并返回数据，但担心密钥仍会暴露在客户端：

+page.server.js代码：

import { MAPBOX, PLANET, STYLE } from '$env/static/private'

export async function load() {
  // this will expose to client-side
  return {
    mapbox: MAPBOX,
    planet: PLANET,
    styleid: STYLE
  }
}

请问是否有方法在客户端隐藏这些密钥？

解决方案 #

核心原则：任何直接在客户端使用的API密钥都会暴露，因为客户端代码完全对用户可见。要真正隐藏密钥，必须通过后端代理瓦片请求，让密钥只在服务器端使用。

1. 普通Svelte项目的方案 #

不需要切换到SvelteKit，但需要搭建一个简单的后端服务（比如Node.js/Express）：

• 后端服务读取.env中的密钥，创建代理路由，接收客户端的瓦片请求
• 后端用密钥向Mapbox/Planet发起真实请求，获取瓦片后返回给客户端
• 客户端只请求你的后端代理地址，不会接触到密钥

示例后端代码（Express）：

require('dotenv').config();
const express = require('express');
const axios = require('axios');
const app = express();

app.get('/mapbox-tile/:z/:x/:y', async (req, res) => {
  const { z, x, y } = req.params;
  const url = `https://api.mapbox.com/styles/v1/${process.env.STYLE}/tiles/${z}/${x}/${y}?access_token=${process.env.MAPBOX}`;
  
  try {
    const response = await axios.get(url, { responseType: 'arraybuffer' });
    res.set('Content-Type', response.headers['content-type']);
    res.send(response.data);
  } catch (err) {
    res.status(err.response.status).send(err.response.data);
  }
});

app.listen(3001, () => console.log('Proxy server running on port 3001'));

客户端代码调整：

// 替换原瓦片URL为代理地址
const tileUrl = `http://localhost:3001/mapbox-tile/{z}/{x}/{y}`;

2. SvelteKit项目的方案 #

不需要在load函数中返回密钥给客户端，而是利用SvelteKit的API路由作为代理：

• 创建src/routes/api/mapbox-tile/[z]/[x]/[y]/+server.js文件
• 在这个server路由中读取私有环境变量，代理瓦片请求
• 客户端请求该API路由，无需接触密钥

示例+server.js代码：

import { MAPBOX, STYLE } from '$env/static/private';
import { error } from '@sveltejs/kit';
import axios from 'axios';

export async function GET({ params }) {
  const { z, x, y } = params;
  const url = `https://api.mapbox.com/styles/v1/${STYLE}/tiles/${z}/${x}/${y}?access_token=${MAPBOX}`;

  try {
    const response = await axios.get(url, { responseType: 'arraybuffer' });
    return new Response(response.data, {
      headers: {
        'Content-Type': response.headers['content-type']
      }
    });
  } catch (err) {
    throw error(err.response.status, err.response.data);
  }
}

客户端代码调整：

const tileUrl = `/api/mapbox-tile/{z}/{x}/{y}`;

关键提醒 #

• 不要尝试通过混淆、加密客户端代码来隐藏密钥，这些方法都能被轻易破解
• 确保后端的环境变量不会被意外提交到版本控制系统（将.env加入.gitignore）
• 部分地图服务商支持创建限制使用场景的密钥（比如限制请求来源域名），可以作为辅助措施降低密钥泄露风险，但无法替代后端代理

内容的提问来源于stack exchange，提问作者louislugas