React代码混淆时，常量折叠导致敏感信息泄露怎么办？

设计师泽勋提问于 2026-01-31 18:01:28 阅读 37

安全

我在React项目里用terser做代码混淆，但发现硬编码的API密钥被直接暴露了。按照教程配置了常量折叠选项，但没效果…

比如这个组件里的API_KEY：


import { useState, useEffect } from 'react';

const ApiComponent = () => {
  const API_KEY = 'sk_123456789'; // 敏感信息
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com?api_key=${API_KEY}`)
      .then(res => res.json())
      .then(setData);
  }, []);

  return {data?.message};
};

export default ApiComponent;

我配置了webpack terser插件的compress.constant_folding: false，但构建后查看bundle.js，API_KEY还是明文存在。难道常量折叠不能处理这种硬编码变量？

常量折叠

我来解答赞 6 收藏

反馈

2 条解答

秋香 Dev Lv1

你这个问题很典型，其实terser的constant_folding只是控制是否把复杂表达式折叠成常量，对硬编码字符串本身没有任何保护作用。你这个API_KEY明文写在组件里，不管怎么打包都会暴露。

解决办法分两步：

1. **不要把敏感信息写在前端代码里**
API密钥这种东西必须放在后端，前端通过环境变量传进来。修改你的组件如下：

const ApiComponent = () => {

  const API_KEY = process.env.REACT_APP_API_KEY; // 从环境变量读取

  const [data, setData] = useState(null);



  useEffect(() => {

    fetch(https://api.example.com?api_key=${API_KEY})

      .then(res => res.json())

      .then(setData);

  }, []);



  return {data?.message};

};

2. **配置Webpack防止环境变量被硬编码**
在webpack.config.js里设置：

new webpack.DefinePlugin({

  'process.env': {

    REACT_APP_API_KEY: JSON.stringify(process.env.REACT_APP_API_KEY)

  }

})

然后你在部署的时候用环境变量注入，而不是写死在代码中。terser怎么混淆都没关系了，因为bundle里只会看到process.env.REACT_APP_API_KEY这个引用。

你看到API_KEY明文存在是正常的，因为前端代码跑在用户浏览器上，**任何写在前端的敏感信息都是可以被提取出来的**，混淆只是增加点难度而已。真正安全的方式还是得通过服务端中转。

2026-02-03 04:02

❤红会 Lv1

硬编码的API_KEY肯定会被暴露，因为打包工具不会帮你隐藏明文内容。最简单的办法是用环境变量代替硬编码，比如：

import { useState, useEffect } from 'react';



const ApiComponent = () => {

  const API_KEY = process.env.REACT_APP_API_KEY; // 从环境变量读取

  const [data, setData] = useState(null);



  useEffect(() => {

    fetch(https://api.example.com?api_key=${API_KEY})

      .then(res => res.json())

      .then(setData);

  }, []);



  return {data?.message};

};



export default ApiComponent;

然后在项目根目录加个.env文件，写上REACT_APP_API_KEY=sk_123456789。这样打包后就不会泄露密钥了。折腾常量折叠还不如直接用环境变量来得省事。

2026-01-31 18:02