When using Webflow, how can you securely store and protect public and private API keys when making API calls with third-party services?

To securely work with public and private API keys in Webflow, use best practices to avoid exposing private credentials, especially since Webflow is frontend-based and code is exposed in the browser.

1. Use a Backend Proxy for Private API Keys

• Never expose private API keys in Webflow’s front-end (Custom Code or Embed blocks) since everything loaded in the browser is publicly viewable.
• Instead, set up a backend service (using platforms like Cloudflare Workers, Netlify Functions, Vercel Serverless Functions, or Firebase Cloud Functions).
• Your Webflow site should make a secure fetch request to your backend function, which then uses the private API key to call the third-party service.
• This ensures that only your server knows the private key, keeping it secure.

2. Use Webflow’s Native Integrations When Possible

• When Webflow offers a native integration with a third-party service (like Mailchimp or Zapier), use it.
• These native integrations manage key storage securely behind the scenes, so you don’t need to store or expose them manually.

3. Use Webflow Logic (if available on your plan)

• Webflow Logic, when working with authenticated APIs, can store API keys as secrets within the Logic panel.
• These secrets are not exposed on the front end and can be securely used in workflows.
• Ideal for forms, CMS triggers, or webhook-based automations.

4. Store API Keys Securely in a Hosting Platform

• If you host backend logic (e.g., on Vercel, Netlify, or AWS), use their environment variable system to store API keys.
• Never hardcode the keys in your scripts or code blocks.

5. Expose Only Public Keys in the Front-End (If Necessary)

• Some services offer public API keys meant for use in the browser (e.g., Stripe publishable key, Google Maps API with referrer restriction).
• If you need to use a key in an embed or Javascript block in Webflow, make sure it’s explicitly intended to be public by the service provider.

6. Protect API Access with Rate Limiting or Domain Restrictions

• Use SDK or third-party dashboard to restrict your API key to certain domains, IP ranges, or with rate limits to protect against abuse.
• Examples: Set referrer restrictions in Google Cloud Console or use domain whitelists in third-party services.

Summary

To protect API keys in Webflow, never expose private keys on the front end. Use serverless backend functions or Webflow Logic with secrets to handle private keys securely, and restrict public keys with domain or IP limitations when used on the front end.