Web3 前端安全：连接钱包的风险与防护

Web3 前端安全：连接钱包的风险与防护 | 极客日志

import { ethers } from 'ethers';

// 安全的钱包连接函数
async function connectWallet() {
    try {
        // 检查是否有以太坊提供商
        if (!window.ethereum) {
            throw new Error('请安装 MetaMask 或其他以太坊钱包');
        }
        
        // 请求用户授权
        const accounts = await window.ethereum.request({
            method: 'eth_requestAccounts',
            params: []
        });
        
        if (!accounts || accounts.length === 0) {
            throw new Error('未授权钱包连接');
        }
        
        const walletAddress = accounts[0];
        console.log('已连接钱包:', walletAddress);
        
        // 验证地址格式
        if (!ethers.utils.isAddress(walletAddress)) {
            throw new Error('无效的钱包地址');
        }
        
        // 创建提供商和签名器
        const provider = new ethers.providers.Web3Provider(window.ethereum);
        const signer = provider.getSigner();
        
        // 验证连接
        const network = await provider.getNetwork();
        console.log('当前网络:', network.name);
        
        return { address: walletAddress, provider, signer, network };
    } catch (error) {
        console.error('钱包连接错误:', error);
        throw error;
    }
}

// 使用示例
try {
    const wallet = await connectWallet();
    console.log('钱包连接成功:', wallet.address);
} catch (error) {
    console.error('连接失败:', error.message);
}

// 监听钱包事件
function setupWalletListeners() {
    if (!window.ethereum) return;
    
    // 监听账户变化
    window.ethereum.on('accountsChanged', (accounts) => {
        if (accounts.length === 0) {
            console.log('钱包已断开连接');
            // 处理断开连接逻辑
        } else {
            console.log('账户已切换:', accounts[0]);
            // 处理账户切换逻辑
        }
    });
    
    // 监听网络变化
    window.ethereum.on('chainChanged', (chainId) => {
        console.log('网络已切换:', chainId);
        // 处理网络切换逻辑
        // 可能需要重新连接或更新配置
    });
    
    // 监听断开连接
    window.ethereum.on('disconnect', (error) => {
        console.error('钱包已断开:', error);
        // 处理断开连接逻辑
    });
}

// 使用示例
setupWalletListeners();

// 支持的链配置
const SUPPORTED_CHAINS = {
    ETHEREUM: {
        chainId: 1,
        name: 'Ethereum Mainnet',
        rpcUrl: 'https://mainnet.infura.io/v3/YOUR_INFURA_KEY'
    },
    POLYGON: {
        chainId: 137,
        name: 'Polygon Mainnet',
        rpcUrl: 'https://polygon-rpc.com'
    },
    BSC: {
        chainId: 56,
        name: 'Binance Smart Chain',
        rpcUrl: 'https://bsc-dataseed.binance.org/'
    }
};

// 检查链是否受支持
function isChainSupported(chainId) {
    return Object.values(SUPPORTED_CHAINS).some(chain => chain.chainId === chainId);
}

// 请求切换到指定链
async function switchChain(chainId) {
    try {
        await window.ethereum.request({
            method: 'wallet_switchEthereumChain',
            params: [{ chainId: ethers.utils.hexValue(chainId) }]
        });
        console.log('已切换到链:', chainId);
        return true;
    } catch (error) {
        console.error('链切换错误:', error);
        // 如果链未添加，尝试添加
        if (error.code === 4902) {
            return await addChain(chainId);
        }
        return false;
    }
}

// 添加链到钱包
async function addChain(chainId) {
    const chain = Object.values(SUPPORTED_CHAINS).find(c => c.chainId === chainId);
    if (!chain) {
        throw new Error('不支持的链');
    }
    try {
        await window.ethereum.request({
            method: 'wallet_addEthereumChain',
            params: [{
                chainId: ethers.utils.hexValue(chain.chainId),
                chainName: chain.name,
                rpcUrls: [chain.rpcUrl],
                // 其他参数根据链的不同进行配置
            }]
        });
        console.log('已添加链:', chain.name);
        return true;
    } catch (error) {
        console.error('添加链错误:', error);
        return false;
    }
}

import { ethers } from 'ethers';

// 生成安全的签名消息
function generateSignMessage() {
    const timestamp = Date.now();
    const nonce = ethers.utils.randomBytes(32).toString('hex');
    const message = `请签名此消息以验证您的身份\n\n` +
        `时间戳：${timestamp}\n` +
        `随机数：${nonce}\n` +
        `应用：My Web3 App\n` +
        `操作：登录验证`;
    return { message, timestamp, nonce };
}

// 请求用户签名
async function requestSignature(signer) {
    try {
        const { message, timestamp, nonce } = generateSignMessage();
        
        // 向用户展示签名消息（前端 UI）
        console.log('签名消息:', message);
        
        // 请求签名
        const signature = await signer.signMessage(message);
        console.log('签名结果:', signature);
        
        // 验证签名
        const address = await ethers.utils.verifyMessage(message, signature);
        console.log('签名验证地址:', address);
        
        // 检查签名是否来自当前连接的钱包
        const currentAddress = await signer.getAddress();
        if (address.toLowerCase() !== currentAddress.toLowerCase()) {
            throw new Error('签名验证失败');
        }
        
        // 检查签名是否过期（如 5 分钟）
        const now = Date.now();
        if (now - timestamp > 5 * 60 * 1000) {
            throw new Error('签名已过期');
        }
        
        return { signature, message, address, timestamp, nonce };
    } catch (error) {
        console.error('签名错误:', error);
        throw error;
    }
}

import { ethers } from 'ethers';

// 发送安全的交易
async function sendTransaction(signer, toAddress, amount) {
    try {
        // 验证接收地址
        if (!ethers.utils.isAddress(toAddress)) {
            throw new Error('无效的接收地址');
        }
        
        // 验证金额
        if (amount <= 0) {
            throw new Error('无效的交易金额');
        }
        
        // 转换金额为 wei
        const amountInWei = ethers.utils.parseEther(amount.toString());
        
        // 获取当前 gas 价格
        const gasPrice = await signer.getGasPrice();
        console.log('当前 gas 价格:', ethers.utils.formatUnits(gasPrice, 'gwei'), 'gwei');
        
        // 估算 gas 消耗
        const gasLimit = await signer.estimateGas({
            to: toAddress,
            value: amountInWei
        });
        console.log('估算的 gas 限制:', gasLimit.toString());
        
        // 构建交易
        const tx = {
            to: toAddress,
            value: amountInWei,
            gasPrice: gasPrice,
            gasLimit: gasLimit
        };
        
        // 向用户展示交易详情（前端 UI）
        console.log('交易详情:', {
            to: toAddress,
            amount: amount,
            gasPrice: ethers.utils.formatUnits(gasPrice, 'gwei') + ' gwei',
            gasLimit: gasLimit.toString()
        });
        
        // 发送交易
        const txResponse = await signer.sendTransaction(tx);
        console.log('交易已发送，哈希:', txResponse.hash);
        
        // 等待交易确认
        const txReceipt = await txResponse.wait();
        console.log('交易已确认，区块:', txReceipt.blockNumber);
        
        return { hash: txResponse.hash, blockNumber: txReceipt.blockNumber, status: txReceipt.status };
    } catch (error) {
        console.error('交易错误:', error);
        throw error;
    }
}

import { ethers } from 'ethers';

// 安全的合约交互
class SafeContractInteraction {
    constructor(signer, contractAddress, abi) {
        this.signer = signer;
        this.contractAddress = contractAddress;
        this.abi = abi;
        this.contract = null;
    }

    // 初始化合约
    async initialize() {
        // 验证合约地址
        if (!ethers.utils.isAddress(this.contractAddress)) {
            throw new Error('无效的合约地址');
        }
        
        // 创建合约实例
        this.contract = new ethers.Contract(this.contractAddress, this.abi, this.signer);
        
        // 验证合约是否存在
        try {
            await this.contract.symbol(); // 假设合约有 symbol 方法
        } catch (error) {
            throw new Error('合约不存在或 ABI 不匹配');
        }
        console.log('合约初始化成功:', this.contractAddress);
    }

    // 调用合约只读方法
    async callMethod(methodName, ...params) {
        try {
            if (!this.contract) {
                await this.initialize();
            }
            const result = await this.contract[methodName](...params);
            console.log(`调用方法 ${methodName} 成功:`, result);
            return result;
        } catch (error) {
            console.error(`调用方法 ${methodName} 错误:`, error);
            throw error;
        }
    }

    // 发送合约交易
    async sendTransaction(methodName, ...params) {
        try {
            if (!this.contract) {
                await this.initialize();
            }
            
            // 估算 gas
            const gasLimit = await this.contract.estimateGas[methodName](...params);
            console.log(`方法 ${methodName} 估算 gas:`, gasLimit.toString());
            
            // 发送交易
            const txResponse = await this.contract[methodName](...params, {
                gasLimit: gasLimit.mul(120).div(100) // 增加 20% 的 gas 缓冲
            });
            console.log(`交易已发送，哈希:`, txResponse.hash);
            
            // 等待确认
            const txReceipt = await txResponse.wait();
            console.log(`交易已确认，区块:`, txReceipt.blockNumber);
            
            return { hash: txResponse.hash, blockNumber: txReceipt.blockNumber, status: txReceipt.status };
        } catch (error) {
            console.error(`发送交易 ${methodName} 错误:`, error);
            throw error;
        }
    }
}

// 使用示例
async function interactWithContract() {
    // 假设已经连接钱包，获取了 signer
    const contractAddress = '0x...'; // 合约地址
    const abi = [...]; // 合约 ABI
    const interaction = new SafeContractInteraction(signer, contractAddress, abi);
    await interaction.initialize();
    
    // 调用只读方法
    const balance = await interaction.callMethod('balanceOf', userAddress);
    console.log('用户余额:', ethers.utils.formatEther(balance));
    
    // 发送交易
    const amount = ethers.utils.parseEther('1.0');
    const recipient = '0x...'; // 接收地址
    const txResult = await interaction.sendTransaction('transfer', recipient, amount);
    console.log('转账结果:', txResult);
}

// 安全的事件监听
function setupEventListeners(contract) {
    try {
        // 监听 Transfer 事件
        const transferListener = contract.on('Transfer', (from, to, amount, event) => {
            console.log('Transfer 事件:', {
                from,
                to,
                amount: ethers.utils.formatEther(amount),
                blockNumber: event.blockNumber,
                transactionHash: event.transactionHash
            });
            
            // 验证事件参数
            if (!ethers.utils.isAddress(from) || !ethers.utils.isAddress(to)) {
                console.error('无效的地址参数');
                return;
            }
            if (amount.lte(0)) {
                console.error('无效的金额参数');
                return;
            }
        });
        
        // 监听 Approval 事件
        const approvalListener = contract.on('Approval', (owner, spender, amount, event) => {
            console.log('Approval 事件:', {
                owner,
                spender,
                amount: ethers.utils.formatEther(amount),
                blockNumber: event.blockNumber
            });
        });
        
        // 保存监听器引用，以便后续移除
        return { transferListener, approvalListener };
    } catch (error) {
        console.error('设置事件监听器错误:', error);
        throw error;
    }
}

// 移除事件监听器
function removeEventListeners(contract, listeners) {
    try {
        if (listeners.transferListener) {
            contract.off('Transfer', listeners.transferListener);
            console.log('Transfer 事件监听器已移除');
        }
        if (listeners.approvalListener) {
            contract.off('Approval', listeners.approvalListener);
            console.log('Approval 事件监听器已移除');
        }
    } catch (error) {
        console.error('移除事件监听器错误:', error);
    }
}

// 不安全的做法：硬编码 API 密钥
// const apiKey = 'YOUR_INFURA_API_KEY';
// const contractAddress = '0x...';

// 安全的做法：使用环境变量
const config = {
    infuraApiKey: process.env.REACT_APP_INFURA_API_KEY,
    alchemyApiKey: process.env.REACT_APP_ALCHEMY_API_KEY,
    contractAddress: process.env.REACT_APP_CONTRACT_ADDRESS,
    supportedChains: {
        ethereum: 1,
        polygon: 137
    }
};

// 验证配置
function validateConfig() {
    if (!config.infuraApiKey) {
        console.warn('未配置 Infura API 密钥');
    }
    if (!ethers.utils.isAddress(config.contractAddress)) {
        throw new Error('无效的合约地址配置');
    }
    console.log('配置验证通过');
}

# 检查依赖安全漏洞
npm audit

# 修复依赖漏洞
npm audit fix

# 锁定依赖版本
npm shrinkwrap
# 或使用 package-lock.json（npm 5+ 默认生成）

// 不安全的做法：直接插入用户输入
// function displayWalletAddress(address) {
//     document.getElementById('wallet-address').innerHTML = address;
// }

// 安全的做法：使用 textContent
function displayWalletAddressSafe(address) {
    // 验证地址格式
    if (!ethers.utils.isAddress(address)) {
        document.getElementById('wallet-address').textContent = '无效地址';
        return;
    }
    
    // 安全展示
    document.getElementById('wallet-address').textContent = address;
    
    // 可以添加地址缩短显示
    const shortAddress = address.substring(0, 6) + '...' + address.substring(address.length - 4);
    document.getElementById('wallet-address-short').textContent = shortAddress;
}

// 安全的交易参数处理
function processTransactionParams(params) {
    // 验证参数
    if (!params.to || !ethers.utils.isAddress(params.to)) {
        throw new Error('无效的接收地址');
    }
    if (!params.amount || isNaN(params.amount) || parseFloat(params.amount) <= 0) {
        throw new Error('无效的交易金额');
    }
    
    // 安全处理后返回
    return {
        to: params.to,
        amount: parseFloat(params.amount)
    };
}

import React, { useState, useEffect } from 'react';
import { ethers } from 'ethers';

function Web3Login() {
    const [walletAddress, setWalletAddress] = useState('');
    const [isConnected, setIsConnected] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState('');

    // 检查钱包连接状态
    useEffect(() => {
        checkWalletConnection();
        setupEventListeners();
        return () => { // 清理函数
            // ...
        };
    }, []);

    // 检查钱包连接
    async function checkWalletConnection() {
        try {
            if (!window.ethereum) {
                setError('请安装 MetaMask 或其他以太坊钱包');
                return;
            }
            const accounts = await window.ethereum.request({
                method: 'eth_accounts',
                params: []
            });
            if (accounts && accounts.length > 0) {
                const address = accounts[0];
                setWalletAddress(address);
                setIsConnected(true);
                setError('');
            }
        } catch (err) {
            console.error('检查钱包连接错误:', err);
            setError('检查钱包连接失败');
        }
    }

    // 设置事件监听器
    function setupEventListeners() {
        if (!window.ethereum) return;
        
        window.ethereum.on('accountsChanged', (accounts) => {
            if (accounts && accounts.length > 0) {
                setWalletAddress(accounts[0]);
                setIsConnected(true);
                setError('');
            } else {
                setWalletAddress('');
                setIsConnected(false);
            }
        });
        
        window.ethereum.on('chainChanged', (chainId) => {
            console.log('网络已切换:', chainId);
            // 处理网络切换逻辑
        });
    }

    // 连接钱包
    async function connectWallet() {
        try {
            setIsLoading(true);
            setError('');
            if (!window.ethereum) {
                throw new Error('请安装 MetaMask 或其他以太坊钱包');
            }
            const accounts = await window.ethereum.request({
                method: 'eth_requestAccounts',
                params: []
            });
            if (!accounts || accounts.length === 0) {
                throw new Error('未授权钱包连接');
            }
            const address = accounts[0];
            
            // 验证地址格式
            if (!ethers.utils.isAddress(address)) {
                throw new Error('无效的钱包地址');
            }
            
            setWalletAddress(address);
            setIsConnected(true);
            setError('');
        } catch (err) {
            console.error('连接钱包错误:', err);
            setError(err.message || '连接钱包失败');
        } finally {
            setIsLoading(false);
        }
    }

    // 登录验证（签名）
    async function loginWithSignature() {
        try {
            setIsLoading(true);
            setError('');
            if (!isConnected) {
                throw new Error('请先连接钱包');
            }
            
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const signer = provider.getSigner();
            
            // 生成签名消息
            const timestamp = Date.now();
            const nonce = ethers.utils.randomBytes(32).toString('hex');
            const message = `请签名此消息以登录\n\n` +
                `时间戳：${timestamp}\n` +
                `随机数：${nonce}\n` +
                `应用：Secure Web3 App\n` +
                `地址：${walletAddress}`;
            
            // 请求签名
            const signature = await signer.signMessage(message);
            
            // 验证签名
            const recoveredAddress = await ethers.utils.verifyMessage(message, signature);
            if (recoveredAddress.toLowerCase() !== walletAddress.toLowerCase()) {
                throw new Error('签名验证失败');
            }
            
            // 发送签名到后端验证（可选）
            // const response = await fetch('/api/login', {
            //     method: 'POST',
            //     headers: { 'Content-Type': 'application/json' },
            //     body: JSON.stringify({ address, signature, timestamp, nonce })
            // });
            
            console.log('登录成功，签名:', signature);
            // 处理登录成功逻辑
        } catch (err) {
            console.error('登录错误:', err);
            setError(err.message || '登录失败');
        } finally {
            setIsLoading(false);
        }
    }

    return (
        <div className="web3-login">
            <h2>Web3 登录</h2>
            {error && <div className="error">{error}</div>}
            {!isConnected ? (
                <button onClick={connectWallet} disabled={isLoading}>
                    {isLoading ? '连接中...' : '连接钱包'}
                </button>
            ) : (
                <div>
                    <p>已连接钱包:{walletAddress.substring(0, 6)}...{walletAddress.substring(walletAddress.length - 4)}</p>
                    <button onClick={loginWithSignature} disabled={isLoading}>
                        {isLoading ? '登录中...' : '签名登录'}
                    </button>
                </div>
            )}
        </div>
    );
}

export default Web3Login;

Web3 前端安全：连接钱包的风险与防护

Web3 前端安全：连接钱包的风险与防护

Web3 前端安全风险分析

1. 钱包连接安全

2. 签名验证安全

3. 智能合约交互安全

4. 前端代码安全

钱包连接安全最佳实践

1. 钱包连接流程安全

2. 钱包连接事件处理

3. 多链钱包连接安全

签名验证安全防护

1. 签名消息安全

2. 交易签名安全

智能合约交互安全

1. 合约交互安全

2. 合约事件监听安全

前端代码安全防护

1. 前端代码安全

2. 前端依赖安全

3. Web3 特有的 XSS 防护

实战：安全的 Web3 前端应用

完整应用架构

安全开发流程

示例：安全的 Web3 登录流程

Web3 前端安全检查清单

安全小贴士

更多推荐文章

相关免费在线工具

Web3 前端安全：连接钱包的风险与防护

Web3 前端安全：连接钱包的风险与防护

Web3 前端安全风险分析

1. 钱包连接安全

2. 签名验证安全

3. 智能合约交互安全

4. 前端代码安全

钱包连接安全最佳实践

1. 钱包连接流程安全

2. 钱包连接事件处理

3. 多链钱包连接安全

签名验证安全防护

1. 签名消息安全

2. 交易签名安全

智能合约交互安全

1. 合约交互安全

2. 合约事件监听安全

前端代码安全防护

1. 前端代码安全

2. 前端依赖安全

3. Web3 特有的 XSS 防护

实战：安全的 Web3 前端应用

完整应用架构

安全开发流程

示例：安全的 Web3 登录流程

Web3 前端安全检查清单

安全小贴士

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具