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 is created to assist domestic users learning Framer who face difficulties due to the lack of Korean resources. It translates the content of the official blog into Korean and adds practical information. We hope it provides even a small amount of help to Framer users.
What is a Content Security Policy?
CSP helps prevent cross-site scripting (XSS) attacks by restricting resources allowed on the site. Framer sites are inherently securely designed, and CSP acts as an additional layer of protection. CSP can be useful, particularly when inserting tracking scripts like those from a tag manager or other untrusted third-party code via custom HTML or custom code components.
Although Framer sites are typically securely configured, applying CSP in the following scenarios can significantly reduce the potential for malicious code execution.
When adding third-party tracking scripts like Google Tag Manager
Inserting external libraries or widgets via Custom Code
Adding CSP with Meta Tags
You can add CSP as a meta tag at the beginning of the <head> tag using 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
You must insert other scripts after the CSP meta tag. Otherwise, the policy may not apply or the site might not function correctly.
Do not use the code shown in the example screenshots. It may damage the site.
If necessary, you can use tools like Report URI to create a customized CSP for your site.
Meta Tag vs HTTP Header Performance Comparison
CSP can be set using meta tags or HTTP headers. However, there are performance differences between these methods.
Method | Advantages | Disadvantages |
|---|---|---|
Meta Tag | You can easily add CSP through tags, and it works similarly to HTTP headers | Possible performance degradation in Chrome |
HTTP Header | Excellent performance and broad browser support | Requires reverse proxy setup, not possible with Framer alone |
This article is an adapted translation of Framer's official blog post 'How to add a content security policy'.
