How to Secure Your dApp's Frontend Against RPC Hijacking

When building decentralized frontends with libraries like Ethers.js or Viem, developers frequently hardcode RPC Node provider URLs (such as Alchemy or Infura endpoints) straight into their codebase. This common pattern is highly vulnerable.

Because all frontend JS is public, an attacker can extract your private API key directly from browser script network inspect tabs. With it, they can hijack your rate limits, drain your paid RPC tier, or execute DDoS queries targeting your application.

The Vulnerability Vector

Suppose your client-side React component instantiates a provider like this:

const provider = new ethers.JsonRpcProvider("https://mainnet.infura.io/v3/YOUR_API_KEY");

Anyone inspect-elementing the network tabs can copy your API key and use it for their own nodes. If they run heavy scripts or spam queries, you'll suddenly find your key rate-limited, blockades on your app traffic, or a massive billing surcharge on your credit card.

The Production-Ready Fix: Backend RPC Proxy

To protect your RPC configuration, implement a middleware routing function. Instead of making raw JSON-RPC requests directly from the browser, connect your frontend to a local serverless path (e.g. `/api/rpc`). Your backend function receives the RPC queries, appends your private API key, and forwards it safely to the blockchain.

Here is a basic structure of how your server-side function handles the routing securely:

// Serverless Endpoint: /api/rpc
async function handler(req, res) {
    const rawBody = req.body;
    
    // Append the secret API key on the secure server side
    const rpcUrl = `https://mainnet.infura.io/v3/${process.env.PRIVATE_INFURA_KEY}`;
    
    const response = await fetch(rpcUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(rawBody)
    });
    
    const result = await response.json();
    return res.status(200).json(result);
}

Now your client-side library connects to `/api/rpc` relatively, hiding the endpoint secrets entirely from end users:

const provider = new ethers.JsonRpcProvider("/api/rpc");

Additional Protections: Throttling & Allow-Lists

Beyond the API proxy, you should configure your provider dashboard to restrict traffic:

• HTTP Referrer Restricts: Set the provider dashboard to only accept requests origin-matching your production domain name.
• Query Restrictions: Block gas-heavy or slow methods (like `eth_newFilter` or `eth_getLogs`) that are commonly used for scraping if your app doesn't require them.
• API Gateway Throttling: Set rate limit caps per client IP to prevent bot scraping loops from overwhelming your backend proxy.