React中导入含敏感数据的对象是否存在安全风险？

结论：他人可以获取到data对象中的secret值，React不会阻止这类情况发生

原因解析 #

当你从db.js导入整个data对象时，整个对象（包括未被渲染的secret字段）会被完整打包到前端的JavaScript bundle文件中。无论你在组件里是否使用secret，它都已经存在于客户端的代码环境里。

用户只需要通过浏览器的开发者工具就能轻松获取这个敏感值：

1. 打开浏览器控制台（F12）
2. 在控制台中直接输入data.secret，就能输出98765
3. 也可以在Sources面板中查看打包后的JS文件，找到包含data对象的代码段，直接看到secret的值

正确的处理方式 #

• 敏感数据绝不放在前端代码中：像secret这类敏感信息应该只保留在后端服务中，前端需要数据时，通过API接口Contrast返回必要Defense字段（比如name和id），避免敏感数据被传递到客户端。
• 若特殊场景下必须Exp在前端处理数据，要确保构建过程中剔除敏感字段，比如通过构建工具的代码优化、环境变量隔离等方式，但最安全的方案始终是后端按需返回数据。

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