- Published on
Next.Config.js에서 CSP(Content Security Policy)란 무엇이며, 사용법과 지시문 종류
- Authors
- Name
- 라이브러리 기술블로그
CSP(Content Security Policy)는 최근 웹 보안의 중요성에 따라 등장한 웹 보안 메커니즘입니다. CSP는 웹 사이트에서 허용된 리소스의 출처와 유형을 명시하여 웹 애플리케이션 취약점 공격을 예방하는 기술입니다.
지시문과 출처
지시문의 종류
| 지시문 | 역할 |
|---|---|
| default-src | -src 로 끝나는 모든 리소스의 기본 동작 제어 CSP 구문 내에서 지정하지 않은 지시문이 존재한다면 default-src의 정의를 따라간다. |
| script-src | 스크립트 태그 관련 권한과 출처를 제어한다. |
| style-src | 스타일 시트의 출처를 제한한다. |
| img-src | 이미지 자원의 출처를 제한한다. |
| child-src | frame 이나 iframe 태그 관련 출처를 제한한다. |
| form-action | HTML form action의 자원을 제한한다. |
|---|
출처의 종류
| 출처 | 예시 | 표현 |
|---|---|---|
| * | img-src * | Wildcard 라고 한다. 모든 URL을 허용한다. |
| 'none' | img-src 'none' | 모든 출처를 금지한다. |
| 'self' | script-src 'self' | 같은 origin 의 출처만 허용한다. ( 같은 프로토콜, 호스트, 포트를 사용) |
| domain.example.com | img-src domain.example.com | 특정 도메인 이름의 출처만 허용한다. |
| *.example.com | img-src *.example.com | example.com 의 모든 서브도메인 출처를 허용한다. |
| --- | --- |
CSP의 사용법은 간단합니다. 웹 사이트의 HTTP 헤더에 CSP 정책을 지정하여 적용할 수 있습니다. 이렇게 설정하면 브라우저는 지정된 정책에 따라 리소스를 로드하며, 정책에 위배되는 리소스는 로드되지 않습니다. 이를 통해 XSS(Cross-Site Scripting) 및 기타 웹 공격을 예방할 수 있습니다.
CSP의 지시문 종류는 크게 2가지로 나뉩니다. 첫 번째는 리소스 출처를 명시하는 지시문으로, default-src, script-src, style-src, img-src, font-src, media-src, connect-src, object-src 등이 있습니다. 두 번째는 지시문의 동작 방식을 명시하는 지시문으로, report-uri, sandbox, disown-opener, reflected-xss, block-all-mixed-content 등이 있습니다.
CSP를 적용할 때는 자주 사용하는 리소스의 출처를 반드시 명시해야 합니다. 또한, 불필요한 리소스는 최소화하여 보안성을 높이는 것이 좋습니다. 또한, CSP를 적용하기 전에는 웹 사이트에서 사용되는 모든 리소스를 파악하고, 출처를 확인하여 적용하는 것이 중요합니다.
CSP는 현재 많은 웹 사이트에서 적용되고 있으며, 많은 보안 전문가들이 추천하는 웹 보안 기술 중 하나입니다. CSP를 적용하여 웹 애플리케이션의 보안성을 높이는 것은 매우 중요합니다. 따라서, 모든 웹 개발자들은 CSP를 적용하여 웹 애플리케이션의 보안성을 높이도록 노력해야 합니다.