How to add a content security policy

In this guide, we explain how to add a Content Security Policy (CSP) to your Framer site to enhance security.

Adding a CSP via meta tag

A Content Security Policy (CSP) helps prevent Cross-Site Scripting (XSS) attacks by controlling which resources are allowed to load on your site. Framer sites are secure by default, but adding a CSP acts as an additional layer of protection.

  1. Add the CSP meta tag at the start of the head tag using custom code.

  2. Ensure all additional scripts are inserted after the meta tag, as the policy will apply to everything following the tag.

Custom Code section the Page Settings.

Tip: Use a tool like Report URI to generate a CSP tailored to your site's needs. Avoid using example policies like the one in the screenshot, as it may break your site.

CSP meta tag vs CSP header

  • Meta tag: Adding the CSP via a meta tag works similarly to using HTTP headers but may result in slightly worse site performance.

  • HTTP headers: For better performance, configure the CSP via HTTP headers by setting up a reverse proxy.

If you encounter any issues or need further assistance, feel free to contact Framer's support team through our contact page.