Framer Security Basics Skill

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

Next Steps

For production deployment, see framer-prod-checklist.

Agent Skills: Framer Security Basics

Install this agent skill to your local

Skill Files