HOW TO SECURE FRAMER - SECURITY GUIDE | VIBEEVAL

Framer Security Context

Framer’s security model is mostly the platform’s: TLS, infrastructure, and CMS hosting are handled. Your blast radius is in the seams: custom code components (arbitrary React), embed blocks (arbitrary HTML / scripts), the Marketing or Analytics integrations that ship API keys, and Framer’s gated content (which works at the page level, not the data level).

Security Checklist

1. Audit custom code components

In Assets → Code → Components: every code component runs as part of your published site. Review for: hardcoded API keys (especially analytics, A/B test, customer-chat keys that are sometimes server-side and end up here by accident), dangerouslySetInnerHTML, and fetch() calls that include auth tokens in URL parameters (which then end up in access logs). Refactor any sensitive call to a server-side proxy.

2. Secure form handling

Insert → Form: Framer Forms post to Framer’s storage by default. If you’ve redirected to a webhook (Zapier, Make, Notion, your own endpoint): confirm the receiver validates the payload, doesn’t echo into HTML rendering, and has rate limiting. Add reCAPTCHA on every public form to block bot fills.

3. Review CMS Collection access

CMS → Collection → Permissions: who can edit and publish each collection. Editor-only roles for content; admin-only for schema changes. Review collaborator list quarterly and remove ex-team members — published-content access lasts as long as the collaborator is in the workspace.

4. Configure authentication for gated pages

If using Framer’s Gated Content: the gate is per-page, not per-data. Direct CMS-item URLs may bypass the gate. Confirm the gated route is the only path to the content; consider using a separate platform (Memberstack, Outseta) for stricter gating.

5. Audit third-party integrations

In Site Settings → Integrations: every connected service is a token in your project. Audit periodically — disconnect ones you stopped using. For ones you keep: confirm the scope is minimal (read-only where possible) and the API key has been rotated since any team-member departure.

6. Configure team / workspace permissions

Workspace → Members: Editor < Designer < Owner. Review quarterly. The activity log shows who published what and when — useful both for audit and for investigating “why did the homepage change.”

7. Enable password protection on staging / preview

Site → Privacy → Password protect: enable on preview URLs that aren’t ready for traffic. Prevents Google from indexing draft pages and prevents accidental public exposure.

8. Verify SSL configuration

Site Settings → Domains: confirm the cert is active for both apex and www. Force HTTPS via the platform toggle. Test by hitting http://yourdomain.com and confirming the redirect.

9. Control asset access

Framer assets are served from a Framer CDN with public URLs. For genuinely private files, do not upload to Framer’s asset store; use S3 with signed URLs or a similar gated storage and link through.

10. Audit embed code

For every Embed component: open the code, check for hardcoded keys, eval, document.write, or external scripts loaded from domains you don’t control. Add Subresource Integrity (integrity="sha384-...") on third-party <script> tags where possible.

11. Configure analytics consent

Site Settings → Privacy → Cookie Banner: enable a consent banner that gates marketing trackers (Meta Pixel, Google Ads, etc.) until consent. Loading these unconditionally is both a privacy issue and a GDPR exposure for EU traffic.

12. Manage SEO indexing for sensitive paths

Page Settings → SEO → Allow search indexing = off for: thank-you pages with token URLs, gated-content pages, internal staging pages. Add Disallow: for these in robots.txt.

13. Configure URL redirects safely

Site Settings → Redirects: avoid open redirects (a /redirect?to=... pattern that obeys the query). These are phishing pivots. Stick to specific source → specific destination. See SSRF / open redirect / OAuth.

14. Review version history

Site → History: rollback to a known-good version is one click. Test the rollback once before you need it. Activity Log shows who made each change.

15. Test mobile and tablet rendering

Some security-relevant elements (consent banners, gated content overlays) render differently on smaller viewports. Test on a real phone or with DevTools’ device mode that the gate / banner / form actually appears at every breakpoint.

16. Run a security scan

The Security Headers Checker reports on your Framer site’s response headers. The Vibe Code Scanner catches embedded keys in custom code components and exposed CDN paths.

Related Resources

Free Self-Audit Suite

Five free scanners.

Vibe Coding Security Risk Guide

Full risk catalogue.

Automate Your Security Checks

VibeEval scans your published Framer site for embedded credentials, missing security headers, and CDN-asset exposure.