framer-security-basics

Framer Security Basics

Overview

Security best practices for Framer API keys, plugin development, and Server API access.

Instructions

Step 1: Credential Management

Credential	Scope	Where to Store
Server API Key (framer_sk_*)	Per-site	Secrets vault
Site ID	Per-site	Can be in config
Plugin auth tokens	Per-user session	Never persist

# .env (never commit)
FRAMER_API_KEY=framer_sk_abc123...
FRAMER_SITE_ID=abc123

# .gitignore
.env
.env.local

Step 2: Plugin Security

// Plugins run in Framer's iframe sandbox — limited browser APIs
// Never store secrets in plugin code (it's client-side)

// Fetch external data through your own API proxy
const data = await fetch('https://your-api.com/framer-data', {
  headers: { 'Authorization': `Bearer ${sessionToken}` },
});

Step 3: Server API Key Rotation

# 1. Generate new key in Framer site settings
# 2. Update in secrets vault
# 3. Test connection
node -e "
  const { framer } = require('framer-api');
  framer.connect({ apiKey: process.env.FRAMER_API_KEY, siteId: process.env.FRAMER_SITE_ID })
    .then(() => console.log('OK'))
    .catch(e => console.error('FAIL', e.message));
"
# 4. Revoke old key in site settings

Step 4: Security Checklist

• API keys in environment variables, never in code
• .env in .gitignore
• Plugin never stores or exposes API keys
• Server API accessed only from backend, never client
• Pre-commit hook scans for framer_sk_* leaks
• HTTPS-only for all API communication

Resources

• Framer Server API
• Plugin Security

Next Steps

For production deployment, see framer-prod-checklist.