How to import rpc information without importing .env file or hardcoding on frontend?

Question

I'm going to import rpc url to connect to blockchain in web3 part of frontend. But my client doesn't allow this. let RPC_METADATA = process.env["RPC_METADATA"]; He considered environment configuration to be the same as hardcoding. There should be no direct reference to a URL for the backend in the project at all. How can I use rpc url without importing .env file or hardcoding on frontend?

I tried using .env file and hardcoding like this. let rpc = process.env['rpc_info'] let rpc = 'https://ourchain_rpc_url'

Answer 1

One of the ways to hide the actual target URL (in your case RPC; I'm assuming the URL contains some API key or other sensitive information) is to hide it behind a proxy service.

Your frontend queries a backend proxy service. This proxy service doesn't contain any sensitive information in its URL, queries the target RPC, and then returns the response from the RPC back to the frontend.

---

You can set up the proxy service's CORS headers to accept requests only from the frontend and reject all other requests.

Access-Control-Allow-Origin: https://your_frontend_domain

Docs:

• General info on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
• Allow origin header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin