React加密落地页：MetaMask等Web3钱包安全集成技术问询

一、页面加载时检测Web3钱包的方法 #

• 优先基于EIP-6963标准检测多钱包：主流钱包均支持该标准，可兼容MetaMask、Coinbase Wallet等多个钱包，避免仅检测MetaMask的局限性。
• 兼容传统检测方式：针对旧版钱包，可通过检查window.ethereum是否存在判断，同时验证window.ethereum.isMetaMask（针对MetaMask）。
• React实现示例：

import { useEffect, useState } from 'react';

function WalletDetector() {
  const [hasWallet, setHasWallet] = useState(false);

  useEffect(() => {
    const detectWallets = async () => {
      if (typeof window !== 'undefined') {
        // 监听EIP-6963钱包注册事件
        window.addEventListener('eip6963:announceProvider', () => setHasWallet(true));
        // 主动触发钱包检测
        window.dispatchEvent(new Event('eip6963:requestProvider'));

        // 兼容旧版钱包检测逻辑
        if (window.ethereum) setHasWallet(true);
      }
    };

    detectWallets();
    return () => window.removeEventListener('eip6963:announceProvider', () => {});
  }, []);

  return <>{hasWallet ? '检测到Web3钱包' : '未检测到Web3钱包'}</>;
}

二、引导用户连接钱包的规范 #

• 清晰交互路径：在页面显眼位置放置「连接钱包」按钮，点击后先检测钱包；无钱包则提示用户安装MetaMask（或支持的钱包），有钱包则触发授权请求。
• 明确状态反馈：
  • 连接中显示加载状态（按钮置灰+加载动画）
  • 连接失败给出具体提示（如「授权被拒绝」「钱包未响应」）
  • 连接成功后切换按钮文案为「已连接」+ 显示钱包地址前缀（如0x123...456）
• 避免强制弹窗：不要在页面加载时自动弹出钱包授权，需用户主动点击按钮触发，提升体验。

三、安全处理用户数据（临时存储钱包地址） #

• 使用sessionStorage存储：会话级存储，用户关闭浏览器后自动清除，避免长期留存不必要数据（地址虽公开，但减少本地存储风险）。
• 仅存储公开字段：绝对禁止存储私钥、助记词或签名信息，仅保存钱包地址、链ID这类公开数据。
• React中存储示例：

// 连接成功后存储地址
const handleConnectSuccess = (account) => {
  sessionStorage.setItem('connectedWalletAddress', account.address);
};

// 页面加载时读取地址
useEffect(() => {
  const savedAddress = sessionStorage.getItem('connectedWalletAddress');
  if (savedAddress) {
    // 处理已保存的地址逻辑
  }
}, []);

// 断开连接时清除存储
const handleDisconnect = () => {
  sessionStorage.removeItem('connectedWalletAddress');
};

四、静态/半静态站点集成钱包的安全风险规避 #

• 强制使用HTTPS：非HTTPS环境下window.ethereum会被浏览器限制，且易遭受中间人攻击。
• 不依赖前端权限验证：受限内容的权限校验必须在后端完成（即使半静态站点，也需通过API接口校验钱包地址授权状态），不能仅靠前端判断。
• 校验链ID：连接钱包后需校验当前链ID是否符合业务需求（如以太坊主网1），防止用户连接到测试网或恶意链。
• 使用成熟Web3库：避免直接操作window.ethereum，通过封装好的库完成交互，减少手动调用的安全漏洞。
• 防范钓鱼风险：不嵌入第三方可疑脚本，确保钱包连接请求由用户主动触发，避免伪造授权弹窗。

推荐库与完整React代码片段 #

推荐库 #

• wagmi + viem：轻量级模块化React Web3工具库，内置钱包检测、连接、账户管理等功能，支持多钱包兼容，比传统web3.js/ethers.js更适配React生态。

完整实现代码（基于wagmi v2） #

1. 安装依赖：

npm install wagmi viem @wagmi/core

2. 配置Wagmi（入口文件如App.jsx）：

import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';

const config = createConfig({
  chains: [mainnet], // 可添加测试网如sepolia
  transports: {
    [mainnet.id]: http(),
  },
});

function App() {
  return (
    <WagmiProvider config={config}>
      {/* 页面组件 */}
      <WalletConnectButton />
    </WagmiProvider>
  );
}

3. 钱包连接组件：

import { useConnect, useAccount, useDisconnect } from 'wagmi';
import { metaMask } from 'wagmi/connectors';

function WalletConnectButton() {
  const { connect, connectors, isLoading } = useConnect();
  const { address, isConnected } = useAccount();
  const { disconnect } = useDisconnect();

  // 格式化地址显示
  const formatAddress = (addr) => addr ? `${addr.slice(0, 6)}...${addr.slice(-4)}` : '';

  if (isConnected) {
    return (
      <button onClick={disconnect} disabled={isLoading}>
        已连接：{formatAddress(address)}
      </button>
    );
  }

  return (
    <button
      onClick={() => connect({ connector: connectors[0] })}
      disabled={isLoading}
    >
      {isLoading ? '连接中...' : '连接MetaMask钱包'}
    </button>
  );
}

内容的提问来源于stack exchange，提问作者Block Wealth