如何安全访问React运行时环境变量？现有方案存暴露风险

核心问题拆解 #

你当前用JS占位文件+Shell替换的方式，把环境变量挂载到window对象，还把这个JS文件放在Nginx根目录直接可访问，等于把配置数据赤裸裸暴露给所有终端用户；而Dockerfile里用的ARG是构建时变量，如果构建镜像时没传入对应值，运行时自然读不到process.env.REACT_APP_ENV_VAR——这是混淆了构建时和运行时变量的逻辑导致的。

方案1：服务器端HTML注入（推荐） #

把环境变量动态注入到React的入口HTML文件里，避免单独存成可直接访问的JS文件：

1. 把index.html改成模板文件index.template.html，在<head>里加占位符脚本：

   <script>
     window.__APP_CONFIG__ = {
       API_BASE_URL: '{{API_BASE_URL}}',
       PUBLIC_CLIENT_ID: '{{PUBLIC_CLIENT_ID}}'
     };
   </script>
   

2. 写一个容器启动脚本entrypoint.sh，替换模板占位符为运行时环境变量，再启动Nginx：

   # 替换模板中的变量
   sed -i "s|{{API_BASE_URL}}|${API_BASE_URL}|g" /usr/share/nginx/html/index.template.html
   sed -i "s|{{PUBLIC_CLIENT_ID}}|${PUBLIC_CLIENT_ID}|g" /usr/share/nginx/html/index.template.html
   # 生成最终的index.html
   mv /usr/share/nginx/html/index.template.html /usr/share/nginx/html/index.html
   # 启动Nginx
   nginx -g 'daemon off;'
   

3. React应用里直接通过window.__APP_CONFIG__读取变量，记住：绝对不能把数据库密码、JWT私钥这类真正敏感的密钥放到前端，前端只能放非敏感的配置（比如API地址、公开客户端ID）。

方案2：后端API代理敏感操作 #

如果必须用到敏感数据，别让前端碰它：

• 前端只调用自己的后端服务API
• 敏感环境变量存在后端服务里，由后端处理需要密钥的请求（比如调用第三方服务）
• 前后端用HTTPS通信，保证数据传输安全

方案3：修正Dockerfile的运行时变量传递 #

你之前用ARG的方式不对，运行时变量不需要构建时传入，直接在容器启动阶段注入：

1. Dockerfile简化成这样：

   FROM nginx:alpine
   COPY build/ /usr/share/nginx/html/
   COPY entrypoint.sh /entrypoint.sh
   RUN chmod +x /entrypoint.sh
   ENTRYPOINT ["/entrypoint.sh"]
   

2. 在Kubernetes的Deployment里，通过env或envFrom注入环境变量：

   spec:
     containers:
     - name: react-app
       image: your-image:tag
       env:
       - name: API_BASE_URL
         valueFrom:
           configMapKeyRef:
             name: app-config
             key: api_base_url
       - name: PUBLIC_CLIENT_ID
         valueFrom:
           secretKeyRef:
             name: app-secrets
             key: public_client_id
   

关键提醒 #

• 前端的本质是运行在用户浏览器里，任何能被前端访问到的数据，用户都能拿到，所以永远不要把敏感密钥放到前端。
• 搞清楚构建时变量和运行时变量的区别：REACT_APP_*这类是create-react-app的构建时变量，打包时就固定了；运行时变量要靠模板替换、后端注入这类方式传递。

内容的提问来源于stack exchange，提问作者Vikas G S