如何隐藏网络请求文档响应中附带的Next.js runtimeConfig配置

首先明确核心前提：所有需要在前端运行时调用的配置，本质上无法彻底对用户隐藏，因为最终都会被加载到浏览器内存中，以下方案只能实现将配置从初始HTML文档响应中移除，降低明文暴露的概率。

方案1：接口动态拉取前端配置 #

• 弃用publicRuntimeConfig存放前端配置，在Next.js服务端新增专用API路由（比如/api/client-config）
• 服务端启动时读取挂载的YML配置，过滤出仅允许前端使用的字段，通过该API接口返回
• 前端在应用初始化阶段调用该接口获取配置，存入内存或sessionStorage中全局复用
• 可额外增加同域名请求校验、接口返回简单加密等逻辑，降低配置被直接爬取的风险

方案2：启动时注入独立配置JS文件 #

• Docker容器启动阶段，读取YML中的前端配置字段，直接生成独立的静态JS文件写入public目录，示例内容：

window.__NEXT_CLIENT_CONFIG__ = {
  apiPrefix: "你的接口前缀",
  // 其他前端所需配置
}

• 在Next.js的_document.tsx/_document.js中引入该JS文件，配置不会被注入到初始HTML的runtimeConfig块中，而是作为独立JS资源加载，不会出现在文档响应的明文内容里
• 该方案无需额外接口请求，配置加载性能优于方案1

方案3：配置明文混淆 #

如果配置没有高敏感属性，仅不想被直接在网络标签页直观看到，可以在服务端将前端配置做Base64编码后再返回，前端拿到后自行解码使用，至少避免了配置明文直接出现在响应内容中。

重要提醒：如果是高敏感配置字段，绝对不能输出到前端，必须放入serverRuntimeConfig中，由服务端代理相关请求调用，不要尝试在前端隐藏高敏感信息。

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