前端Web3场景下如何免.env文件/硬编码引入RPC URL？

1. 后端接口动态获取 #

前端通过调用后端提供的专用接口，在运行时获取RPC URL，全程不在前端代码中存储或硬编码任何URL信息。

示例代码：

// Web3模块初始化前调用接口获取RPC URL
async function initWeb3() {
  try {
    const response = await fetch('/api/rpc-config', {
      method: 'GET',
      credentials: 'include' // 若需身份验证则添加
    });
    const config = await response.json();
    const web3 = new Web3(config.rpcUrl);
    // 后续Web3业务逻辑...
  } catch (error) {
    console.error('获取RPC配置失败:', error);
  }
}

后端需实现该接口，从自身安全配置（如后端专属.env或加密配置文件）中读取RPC URL并返回，确保前端不会接触到原始配置源。

2. 后端渲染时注入全局变量 #

如果项目是服务端渲染（SSR）或后端模板渲染架构，可在页面渲染阶段将RPC URL注入为全局window变量，前端直接读取即可。

示例（以EJS模板为例）：

<!-- 后端渲染的HTML页面中 -->
<script>
  window.RPC_CONFIG = {
    rpcUrl: '<%= serverConfig.rpcUrl %>'
  };
</script>

前端代码直接使用：

const web3 = new Web3(window.RPC_CONFIG.rpcUrl);

其中serverConfig.rpcUrl由后端从自身安全配置中读取，前端代码无任何硬编码或环境变量引用。

3. 前端配置中心拉取 #

搭建独立的前端配置中心服务，前端在应用启动时向配置中心请求最新的RPC配置，配置中心负责从安全源读取并下发配置。

示例代码：

async function loadConfigAndInitWeb3() {
  const configResponse = await fetch('https://your-config-center.com/app-config');
  const appConfig = await configResponse.json();
  const web3 = new Web3(appConfig.blockchain.rpcUrl);
  // 初始化Web3实例...
}

注意：配置中心必须启用HTTPS，并添加身份验证机制，防止未授权客户端获取配置信息。

安全注意事项 #

• 所有传输RPC URL的请求必须使用HTTPS，避免明文传输被窃取。
• 后端接口/配置中心需添加权限校验，确保只有合法前端应用能获取配置。
• 避免将RPC URL存储在前端localStorage/sessionStorage中（临时会话使用除外），防止XSS攻击导致泄露。

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