Performance
Aug 13, 2025
Add Content Security Policy
This introduces how to implement Content Security Policy (CSP) in Framer and explains the pros and cons of using meta tags and HTTP headers. CSP can enhance the security of external resources and prevent XSS attacks.
Uploaded by
Translated by
Contents
Table of Contents
This document aims to assist Korean users learning Framer by addressing the lack of Korean resources. We have translated content from the official blog into Korean and added practical information. We hope this is of some help to those using Framer.
What is a Content Security Policy?
CSP helps prevent cross-site scripting (XSS) attacks by limiting the resources allowed on a site. The Framer site is designed to be secure by default, and CSP serves as an additional layer of protection. CSP can be useful when adding untrusted third-party code, such as tracking scripts inserted via tag managers, using custom HTML or custom code components.
Even though the Framer site is configured to be secure, applying CSP in situations like the following can greatly reduce potential malicious code execution:
When adding 3rd-party tracking scripts like Google Tag Manager
When inserting external libraries or widgets using Custom Code
Adding CSP via Meta Tags
CSP can be added as a meta tag at the start of the <head> tag using custom code (Custom Code).
Navigate to Framer page settings > Custom Code
Insert the CSP meta tag at the start of the
<head>Place all additional scripts after the meta tag
Important Notes
Ensure that other scripts are inserted after the CSP meta tag. If not, the policy may not be applied, or the site may not function correctly.
Do not use the code shown in sample screenshots. It could damage your site.
If necessary, you can use tools like Report URI to generate a CSP tailored to your site.
Meta Tag vs HTTP Header Performance Comparison
CSP can be set using either the meta tag method or the HTTP header method. However, there are performance differences between the two.
Method | Advantages | Disadvantages |
|---|---|---|
Meta Tag | Allows for simple addition of CSP through tags, with functionality similar to the HTTP header method | Possible performance degradation in Chrome |
HTTP Header | Superior performance, broad browser support | Requires reverse proxy setup, not possible with Framer alone |
This content is a translated and adapted version of the Framer official blog's ‘How to add a content security policy’.
