FramerOpenAIAirtableResendSecurity & Secret Vault
How to Hide API Keys in Framer Websites
Secure Edge Proxy for Framer React Components & Interactions
Direct Answer & Architecture Summary
Framer generates pure React client components where hardcoded API keys are visible to anyone viewing browser source code. Route requests through RealComposer to inject secrets at the edge and enforce domain origin protection.
Security LevelAES-256-GCM Vault
Edge LatencySub-10ms Response
InfrastructureZero Server Maintenance
The Problem Solved
Framer Code Components Run Exclusively in the Browser
Framer code overrides and components compile into browser-executed JavaScript with zero server privacy.
Critical Security & Operational Risks:
- Leaked API keys in public JS bundles
- Quota theft by competitors
- CORS blocking from third-party APIs
Architecture & Step-by-Step Implementation
How RealComposer Solves This at the Edge
1
Store Secret in RealComposer
Save private API token in AES-256 Vault.
2
Fetch from Framer Component
Call RealComposer endpoint using public token.
Payload Slimming Comparison
64% Bandwidth ReductionRaw Upstream Response72 B
{
"id": "email_99a8",
"from": "hello@startup.com",
"to": [
"user@example.com"
]
}
RealComposer Slimmed Edge Payload26 B
{
"messageId": "email_99a8"
}
Call from Terminal or Client
curl -X POST "https://realcomposer.com/v1/acme/framer-email"
Frequently Asked Questions
Developer Questions & Troubleshooting
Can I restrict calls to my Framer domain?
Yes, RealComposer client tokens allow strict origin whitelisting.
Instant Deployment
CLONE THIS RECIPEDeploy this Framer + OpenAI, Airtable, Resend Recipe
Clone this pre-configured pipeline into your RealComposer workspace in one click. We pre-populate upstream URLs, headers, and mapping rules.