안녕하세요!
이번 포스팅에서는 Next.js에서 XSS 취약점 조치하는 방법에 대해 소개해 드리겠습니다.
1. 개요
- 이번에 프로젝트 보안 검수를 진행 했는데, next.js로 만든 프로젝트에서 XSS 취약점 조치가 필요하다는 결과가 나왔습니다.
- XSS 취약점 문제가 처음 겪는 일이라서 http 문제인가, svg를 사용해서 그런가 하면서 여러가지 원인을 찾아 보게 되었는데 next.js 공식 홈페이지에서 발견한 설정 덕분에 해결 하게 되었습니다.
2. XSS 취약점 이란
- XSS(Cross-site scripting) 사이트 간 스크립팅 은 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 웹사이트 관리자가 아닌 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점 입니다.
- 주로 여러 사용자가 보게되는 전자 게시판에 악성 스크립트가 담긴 글을 올리는 형태로 이루어 집니다. 이 취약점은 웹 애플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 나타납니다.
- 이 취약점으로 해커가 사용자의 정보(쿠키, 세션 등)를 탈취하거나, 자동으로 비정상적인 기능을 수행하게 할 수 있습니다. 주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅 이라고 합니다.
3. Next.js 조치 방법
- 이러한 XSS 취약점을 대응하기 위해 구글링을 통해 해결 방안을 찾아보게 되었습니다.
- 👉🏻공식 사이트 에 소개된 내용에 보면
next.config.js파일에 설정을 추가해주면 됩니다. 다양한 설정이 있어서 상황에 맞는 값을headers()에 추가해 주면 됩니다. XSS 취약점 조치를 위해 추가한 값은 X-XSS-Protection 입니다.
{
key: 'X-XSS-Protection',
value: '1; mode=block'
}- 프로젝트 루트 경로에 있는 next.config.js 파일에 해당 값을 추가 합니다.
module.exports = {
async headers() {
return [
{
key: 'X-XSS-Protection',
value: '1; mode=block'
}
]
},
}- X-XSS-Protection 에 대한 설명으로는, “이 헤더는 반사된 사이트 간 스크립팅(XSS) 공격을 탐지할 때 페이지가 로드되지 않도록 합니다.
사이트에서 인라인 JavaScript(‘안전하지 않은 인라인’) 사용을 비활성화하는 강력한 Content-Security-Policy를 구현할 때는 이 보호가 필요하지 않지만,
CSP를 지원하지 않는 이전 웹 브라우저에 대한 보호 기능을 계속 제공할 수 있습니다.” 라고 소개 되어 있습니다. - 웹 해킹 기법중 하나의 내용으로써 읽어도 자세한 내용은 잘 이해가 안되어서..어떤 느낌인지만 파악하고,
headers()함수에 X-XSS-Protection 값을 추가 함으로써 취약점 조치가 해결 되었습니다.
(사실 취약점 조치가 제대로 되었는지 확인을 못하고 다시 검수 요청을 드렸는데 다행히 해결이 되었다고 하더라구요! 설정 방법도 확인하면 좋을 것 같은데 혹시 아시는 분..?🙋🏻♀️🥲)
4. 마치며
- Next.js에서 XSS 취약점 조치 하는 방법에 대해 알아 보았습니다. 프론트에서 취약점 대응 방법을 찾아 보다가, 공식 문서를 통해 생각보다 쉽고 간단하게 해결 될 수 있었습니다.
- 내용이 도움이 되셨다면 아래 좋아요나 댓글 부탁 드립니다!👍🏻
오늘 준비한 내용은 여기까지 입니다.
이번 포스팅이 도움이 되셨거나 궁금한 점이 있으시다면 언제든지 댓글을 달아주세요!🙋🏻♀️✨