Issues
2025. 8. 13.
Framer에서 CSP 적용하기: 메타태그와 HTTP헤더 비교
Framer에서 Content Security Policy(CSP)를 적용하는 방법을 소개하며, 메타 태그와 HTTP 헤더 방식의 장단점을 설명합니다. CSP를 통해 외부 리소스의 안전성을 높이고 XSS 공격을 방지할 수 있습니다.
Posted By
Framer Space
목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한글로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
Content Security Policy가 뭔가요?
CSP는 사이트에 어떤 외부 리소스(스크립트, 이미지, 스타일 등)를 허용할지 제어하는 보안 정책입니다. 주로 Cross-Site Scripting(XSS) 공격을 막는 데 유용합니다.
Framer 사이트는 기본적으로 안전하게 구성되어 있지만, 다음과 같은 경우 추가 설정을 고려할 수 있습니다.
Google Tag Manager 등 3rd-party 추적 스크립트를 추가 시
외부 라이브러리나 위젯을 Custom Code로 삽입 시
이럴 때 CSP를 적용하면, 혹시 모를 악성 코드 실행 가능성을 크게 줄일 수 있습니다.
CSP 적용방법 1: 메타 태그
가장 간단한 방법은 메타 태그를 사용해 CSP를 추가하는 것입니다.
Framer 페이지 설정 > Custom Code로 이동
<head>시작 부분에 CSP 메타 태그 삽입메타 태그 뒤에 모든 추가 스크립트를 배치 (공식 블로그 예시 태그를 그대로 쓰면 사이트가 정상 작동하지 않을 수 있으니, 반드시 필요한 리소스 경로만 지정하세요.)
Note: CSP 규칙을 쉽게 만들고 싶다면 Report URI 같은 도구를 활용해 보세요.
CSP 적용방법 2: HTTP 헤더
HTTP 헤더 방식은 성능 면에서 더 효율적입니다. 특히 Chrome 기반 브라우저에서는 메타 태그 방식보다 빠르게 동작합니다. (관련 아티클)
서버나 프록시(예: Nginx, Cloudflare, Vercel)에서 Content-Security-Policy 헤더 설정
예시(Nginx)
add_header Content-Security-Policy "default-src 'self'; script-src 'self' <https://trusted-scripts.com>";
Note: Framer 자체는 HTTP 헤더를 직접 설정할 수 없으므로, 역방향 프록시(Reverse Proxy) 환경을 구축한 뒤 헤더를 추가하는 방식이 필요합니다.
메타 태그 vs HTTP 헤더 성능 비교
방식 | 장점 | 단점 |
|---|---|---|
메타 태그 | 설정이 간단함, Framer 내부에서 바로 적용 가능 | Chrome에서 성능 저하 가능성 |
HTTP 헤더 | 성능 우수, 브라우저 지원 범위 넓음 | 서버 설정 필요, Framer 단독으로 불가 |
본 글은 Framer 공식 블로그의 ‘How to add a content security policy’를 번역·각색한 콘텐츠입니다.
