thedixitjain 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
-
.envin.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.
Source: jeremylongshore/claude-code-plugins-plus-skills → skills/.curated/framer-security-basics/SKILL.md
Also appears in: jeremylongshore/claude-code-plugins-plus-skills/plugins/saas-packs/framer-pack/skills/framer-security-basics/SKILL.md