JavaScript 보안 개요 (XSS, CSP, CORS)

🔒 보안 개요 (XSS, CSP, CORS)

웹 애플리케이션은 외부 공격에 노출되기 쉽기 때문에, 보안에 대한 기본적인 이해는 필수입니다. 이 글에서는 웹 보안의 주요 개념인 XSS(교차 사이트 스크립팅), CSP(콘텐츠 보안 정책), CORS(교차 출처 리소스 공유)에 대해 알아봅니다.

📌 1. XSS (Cross-Site Scripting)

XSS는 공격자가 악성 스크립트를 삽입하여 사용자 브라우저에서 실행되게 하는 공격입니다. 예를 들어, 댓글 폼에 아래와 같은 스크립트를 삽입할 수 있습니다:

<script>alert('해킹됨!')</script>
  

🛡️ 방지 방법

• 입력값 정제 및 이스케이프 처리
• innerHTML 대신 textContent 사용
• CSP(Content Security Policy) 사용

📌 2. CSP (Content Security Policy)

CSP는 브라우저에게 어떤 리소스를 로딩할 수 있는지 명시하는 보안 정책입니다. 예를 들어 인라인 스크립트 차단, 외부 리소스 제한 등을 통해 XSS를 막을 수 있습니다.

✅ 예시

Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.google.com;
  

• 'self'는 동일 출처의 리소스만 허용
• script-src를 통해 외부 JS 제한

🔐 사용 방법

• HTTP 응답 헤더로 설정
• 또는 <meta http-equiv="Content-Security-Policy" ...> 로도 가능

📌 3. CORS (Cross-Origin Resource Sharing)

CORS는 한 출처의 웹 페이지가 다른 출처의 리소스에 접근할 수 있는지 여부를 제어합니다. 예를 들어, https://a.com에서 https://b.com/api로 AJAX 요청을 보낼 때 CORS 정책이 적용됩니다.

🚧 기본 정책

• 동일 출처(Same-Origin)만 허용
• 다른 출처에 접근하려면 서버가 CORS 허용 헤더를 보내야 함

✅ 서버 응답 예시

Access-Control-Allow-Origin: https://a.com
Access-Control-Allow-Methods: GET, POST
  

🧪 클라이언트 예시 (fetch)

fetch("https://b.com/api/data", {
  method: "GET",
  mode: "cors"
});
  

✅ 마무리

보안은 한번 설정하고 끝나는 것이 아니라, 지속적인 점검과 최신 정보 반영이 필요합니다. 개발 초기에 보안을 고려하는 습관을 들이면, 나중에 더 큰 사고를 방지할 수 있습니다.