When using Webflow, how can you securely store and protect public and private API keys when making API calls with third-party services?
TL;DR
- Never expose private API keys in Webflow’s front-end code.
- Use a secure backend or serverless function to handle API requests with private keys.
- Store keys as environment variables on your backend platform.
- Use public keys only when needed and restrict them with domain or usage limits.
When using Webflow to integrate third-party APIs, it's essential to understand that Webflow is a front-end platform, so exposing private API keys in the client-side code is insecure and should be avoided.
1. Understand the Client-Side Limitation
- Webflow projects run entirely on the front end, meaning any API key stored or used via custom code in Webflow's Embed blocks or Page Settings will be exposed to the browser.
- Never include private or secret keys (like Stripe secret keys, database tokens, etc.) directly in Webflow’s custom code areas, as users can access them through DevTools.
2. Use a Backend Proxy or Serverless Function
- To securely call APIs with private keys, set up a backend proxy server or use a serverless function (e.g., using Cloudflare Workers, Netlify Functions, or AWS Lambda).
- Your Webflow site sends a request to your secure backend, which then adds the secret key and makes the actual API call. Only public data reaches the browser.
3. Store API Keys Securely on the Backend
- On your backend/serverless platform, store the private keys using environment variables or built-in secret management options.
- For Netlify Functions: Store keys in Netlify Environment Variables.
- For Vercel Serverless Functions: Use Environment Variables in the Vercel dashboard.
4. Use Public Keys Only in Webflow
- If an API requires a public key (e.g., for initializing services like Stripe.js, Google Maps, or Firebase), it’s generally okay to use it in Webflow’s custom code as long as:
- The key has restricted permissions.
- Domain restrictions are applied where supported (e.g., only allow requests from your domain).
5. Secure Webhooks and API Endpoints
- If you're using Webhooks to send data from Webflow to a backend, verify incoming requests using shared secrets or signed tokens.
- Avoid exposing POST endpoints without authentication or rate limiting.
Summary
To securely use API keys in Webflow:
- Never expose private keys in Webflow’s front-end code.
- Use a secure backend or serverless function as a middleware to handle API requests requiring private keys.
- Store keys as environment variables in your backend hosting platform.
- Use public keys only when absolutely necessary, and restrict their usage via domain or quota limits.