[NextJS / 해킹] XSS(Cross Site Scripting) 취약점 해결 방법

 

XSS

 

XSS란?
웹 사이트에 악성 스크립트를 삽입하여 사용자의 정보(쿠키, 세션 등)를 탈취하거나, 자동으로 비정상적인 기능을 수행하게 할 수 있다. 주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅이라고 한다.

• 웹 사이트가 입력받은 값을 검증하지 않고 사용할 경우 발생

 

 

---

1. 테스트 예시

입력 값에  ["> <script>alert("XSS 테스트")</script>] 삽입

 

XSS 테스트

 

 

오류 발생

 

 

 

 

---

2. 해결 방안

2-1) NextJS 해결 방안

next.config.js 파일의 headers에 해당 값을 추가
해당 값을 추가하게 되면 XSS 공격을 XSS공격을 감지했을 때 페이지 로드를 중지한다.

* XSS 해결 방안 공식문서
https://nextjs.org/docs/advanced-features/security-headers

module.exports = {
  async headers() {
    return [
      {
        key: 'X-XSS-Protection',
        value: '1; mode=block'
      }
    ]
  },
}