Django项目如何将Heroku密钥环境变量安全传递给静态JS文件

只要你把密钥传递到任何前端可访问的JavaScript代码中——不管是静态JS文件还是模板内联的JS——就不存在100%防止被访问者窃取的方案。所有能正常访问你站点的用户，只要打开浏览器开发者工具，就能通过源码查看、网络抓包、内存断点等方式拿到明文密钥，和你是否允许用户看静态文件本身没有关系。

你可以根据这个密钥的实际用途，选对应的可落地方案：

场景1：密钥是前端调用公开第三方服务必需的凭证（比如前端SDK的公钥类密钥） #

这类密钥本身设计上就是要在前端使用的，你不需要追求“完全不让用户看到”，核心要做的是防止密钥被他人盗用产生额外成本：

• 不要把密钥硬编码到静态JS文件中，通过Django模板动态注入值，避免密钥被打进构建产物长期固定：
  1. 先在对应视图中读取Heroku配置的环境变量，传入模板上下文：

  # views.py
  import os
  from django.shortcuts import render
  
  def site_index(request):
      context = {
          "FRONT_SDK_KEY": os.getenv("YOUR_HEROKU_ENV_KEY_NAME")
      }
      return render(request, "index.html", context)
  

  2. 在HTML模板中内联注入配置，不要把值挂载到全局window对象上，初始化完SDK后及时清除临时引用：

  <!-- 放在页面head部分，不要放到外部静态JS文件中 -->
  <script>
    const tempSdkConfig = Object.freeze({
      apiKey: "{{ FRONT_SDK_KEY|escapejs }}"
    })
    // 在这里初始化对应第三方SDK
    // initSdk(tempSdkConfig)
  </script>
  

• 最核心的防护手段不要放在JS侧，直接去对应第三方服务的后台配置域名白名单，只允许你自己的站点域名使用该密钥发起请求。就算别人扒到了你的密钥，在其他站点、本地环境调用时都会被第三方服务直接拦截，不会产生盗刷风险。
• 额外可以给相关请求加频率限制，避免有人直接在你的站点上恶意刷接口。

场景2：密钥是服务端调用接口的高权限凭证（比如支付密钥、内部服务密钥、有写权限的第三方API密钥） #

绝对不要把这类密钥传递到前端，没有任何安全的传递方式。正确的实现逻辑是：

• 所有需要用到该密钥的请求，全部由Django后端代理转发：前端只把业务参数提交给你自己写的后端接口，后端在服务端读取Heroku配置的环境变量、带上密钥去请求对应服务，最后把结果返回给前端。
• 这种模式下密钥全程只存在于Heroku服务端环境和后端进程内存中，前端完全接触不到密钥内容，从根源上避免泄露。

注意：不要尝试用JS混淆、静态文件加密这类方式藏密钥，这类手段只能防完全不懂技术的普通用户，有基础前端知识的人花几分钟就能拿到明文，没有实际安全价值。

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