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.

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. So, adding a CSP might only act as an additional layer of protection in case you add untrusted 3rd-party code (like tracking scripts added by Tag Managers) via custom HTML or custom code components.

Adding a CSP via meta tag

  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.

Do not use the example in the screenshot, as it may break your site.

Tip: You can use a tool like Report URI to generate a CSP tailored to your site's needs.

CSP meta tag vs CSP header

A CSP meta tag, compared to the HTTP header, can seriously degrade your website’s performance in Chrome based browsers (source).

  • 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.