托管JavaScript应用中Esri API密钥的安全保护方案咨询

核心原则 #

绝对不能把API密钥直接写在前端代码里，任何能被客户端获取到的渠道都不行，必须通过后端中转请求，确保密钥只在服务器端使用。

具体实现方案 #

1. 后端代理路由（最常用方案） #

你需要写一个轻量级后端脚本，作为前端与Esri服务的中间层：

• 前端不直接调用Esri路由服务，而是将起点、终点等参数发送到你的后端接口
• 后端接口拿到参数后，用存储的API密钥调用Esri的路由服务
• 后端将Esri返回的路线数据转发给前端

举个Node.js/Express的极简示例：

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

// 从环境变量读取密钥，禁止硬编码
const ESRI_API_KEY = process.env.ESRI_API_KEY;

app.post('/api/get-route', async (req, res) => {
  const { start, end } = req.body;
  try {
    const esriResponse = await axios.get('https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World/solve', {
      params: {
        apiKey: ESRI_API_KEY,
        stops: `${start.lng},${start.lat};${end.lng},${end.lat}`,
        f: 'json'
      }
    });
    res.json(esriResponse.data);
  } catch (err) {
    res.status(err.response?.status || 500).json({ error: '获取路线失败' });
  }
});

app.listen(3000, () => console.log('代理服务启动'));

• 密钥存储：用环境变量（比如服务器上的.env文件，配合dotenv包加载），个人项目用环境变量足够；云服务器可直接在平台后台设置环境变量，无需写入代码
• 前端调用：直接请求你的/api/get-route接口，全程不接触密钥

2. 授权方案优化 #

如果觉得后端代理繁琐，可考虑Esri的其他授权方式：

• IP绑定的API密钥：在Esri密钥管理后台设置允许的请求IP，仅让你的服务器IP能调用该密钥，即便密钥泄露也无法被第三方使用（你已限定路由权限，叠加IP限制更安全）
• OAuth 2.0用户授权：适合需要用户用自有ArcGIS账号授权的场景，但个人学习项目流程偏复杂，必要性不高
• ArcGIS令牌服务：需依托ArcGIS Enterprise生成短期令牌，个人项目门槛较高

工具选择 #

• 后端框架：个人学习优先选Node.js/Express、Python/Flask，轻量级易上手
• 部署平台：Vercel、Netlify支持一键部署Node.js/Python应用，自带环境变量管理，适合个人项目
• 密钥管理：本地开发用.env文件，务必在.gitignore中排除该文件，避免提交到代码仓库

关键注意事项 #

• 禁止编写返回密钥的后端接口，这和直接暴露在前端无区别，后端仅做请求中转
• 严格限制API密钥权限：保持当前仅开放路由服务权限的设置，最小化风险
• 绝对不要将密钥硬编码到代码或提交到Git仓库

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