목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한글로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
Content Security Policy가 뭔가요?
CSP는 사이트에서 허용되는 리소스를 제한하여 크로스 사이트 스크립팅(XSS) 공격을 예방하는 데 도움이 됩니다. Framer 사이트는 기본적으로 안전하게 설계되어 있으며, CSP는 추가적인 보호층 역할을 합니다. 특히 태그 매니저를 통해 삽입되는 추적 스크립트 같은 신뢰할 수 없는 서드파티 코드를 커스텀 HTML이나 커스텀 코드 컴포넌트를 통해 추가하는 경우 CSP가 유용할 수 있습니다.
Framer 사이트는 기본적으로 안전하게 구성되어 있지만, 다음과 같은 경우 CSP를 적용하면, 혹시 모를 악성 코드 실행 가능성을 크게 줄일 수 있습니다.
Google Tag Manager 등 3rd-party 추적 스크립트를 추가 시
외부 라이브러리나 위젯을 Custom Code로 삽입 시
메타 태그를 통한 CSP 추가하기
CSP는 커스텀 코드(Custom Code)를 이용해 <head> 태그의 시작 부분에 메타 태그(meta tag) 형태로 추가할 수 있습니다.
Framer 페이지 설정 > Custom Code로 이동
<head>시작 부분에 CSP 메타 태그 삽입메타 태그 뒤에 모든 추가 스크립트를 배치
주의사항
반드시 CSP 메타 태그 이후에 다른 스크립트를 삽입해야 합니다. 그렇지 않으면 정책이 적용되지 않거나 사이트가 정상적으로 작동하지 않을 수 있습니다.
예시 스크린샷에 나온 코드는 사용하지 마세요. 사이트가 손상될 수 있습니다.
필요하다면 Report URI 같은 도구를 사용해 사이트에 맞춤화된 CSP를 생성할 수 있습니다.
메타 태그 vs HTTP 헤더 성능 비교
CSP는 메타 태그 방식과 HTTP 헤더 방식으로 설정할 수 있습니다. 다만 두 방법은 성능에 차이가 있습니다.
방식 | 장점 | 단점 |
|---|---|---|
메타 태그 | 태그를 통해 CSP를 간단하게 추가할 수 있으며, 원리는 HTTP 헤더 방식과 유사 | Chrome에서 성능 저하 가능성 |
HTTP 헤더 | 성능 우수, 브라우저 지원 범위 넓음 | 리버스 프록시(reverse proxy) 설정 필요, Framer 단독으로 불가 |
본 글은 Framer 공식 블로그의 ‘How to add a content security policy’를 번역·각색한 콘텐츠입니다.
