CSP (Content Security Policy) 웹 취약점 해결 방법
1) CSP란?
CSP(Content Security Policy)는 웹페이지가 로드될 때 브라우저에 리소스 허용 정책을 명시하는 보안 기능입니다.
이를 통해 CSS, JavaScript, 이미지 등의 리소스를 허용된 출처에서만 불러올 수 있도록 하여 크로스사이트스크립팅(XSS), 데이터 유출 등 다양한 보안 위협을 방어할 수 있습니다.
해결 방법은 아래 링크를 참조 하였습니다.
2) 해결방법
먼저, 기본적으로 모든 스크립트가 자신('self')의 도메인에서만 로드되도록 설정할 수 있습니다:
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
그러나 이렇게 하면 다른 이미지 파일이나 CSS 파일을 읽어올 수 없어 화면이 깨질 수 있습니다.
따라서, 필요한 리소스를 허용해 주어야 합니다. 예를 들어, 특정 도메인의 스타일시트와 인라인 스타일을 허용하려면 다음과 같이 설정할 수 있습니다:
<meta http-equiv="Content-Security-Policy" content="style-src https://도메인 'self' 'unsafe-inline';">
위와 같이 설정하면, 'self' 및 지정된 도메인에서 로드되는 스타일시트와 인라인 스타일을 허용하게 됩니다.
다양한 리소스를 허용하는 전체적인 CSP 예제는 다음과 같습니다:
<metahttp-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self' https://trusted-scripts.com; style-src 'self' 'unsafe-inline' https://trusted-styles.com; img-src 'self' https://trusted-images.com; font-src 'self' https://trusted-fonts.com;">
'self'에서 로드되는 모든 기본 리소스를 허용
'self' 및 https://trusted-scripts.com에서 로드되는 스크립트를 허용
'self', https://trusted-styles.com 및 인라인 스타일을 허용
'self' 및 https://trusted-images.com에서 로드되는 이미지를 허용
'self' 및 https://trusted-fonts.com에서 로드되는 폰트를 허용
아래 사이트에서 CSP 처리가 됐는지 확인 가능하니 참고 바랍니다.
CSP 체크하는 사이트
위와 같은 방법으로 CSP를 설정하면 웹페이지의 보안이 강화되어 XSS 등의 취약점을 방어할 수 있습니다. 설정 중 궁금한 점이 있으면 언제든지 문의하세요.
진행하시다가 궁금하신 점 있다면 댓글주세요.
이 포스팅이 도움이 되셨길 바랍니다. 앞으로도 유익한 정보를 제공하기 위해 노력하겠습니다. 읽어주셔서 감사합니다.