Cross Site Script
가장 널리 알려진 웹 보안 취약점 중 하나로
악의 적인 사용자가 사이트에 악성 스크립트를 삽입 할수 있는 보안 취약점이다.
XSS를 통해 사용자 컴퓨터에 명령을 내리거나 보안이 취약한 서버로 리다이렉트, 또는 사용자의 쿠키를 탈취하여 세션 하이재킹이 가능하다.
XSS공격은 공격자가 만든 스크립트가 사용자의 브라우저에서 실행되어야 하는 공격 방식이다.
공격 방식: 게시글
사이트에 아래와 같은 스크립트를 게시글로 올려다고 해보자
<script>alert('XSS attack');</script>위 스크립트는 문자열로 데이터 베이스에 저장될 것이고
사용자가 게시글을 내용을 보기 위해 사이트에 접속했을때
게시글내용인 스크립트를 실행하며 XSS공격에 당하는 것이다.
실험 코드
아래와 같이 직접 express 서버를 만들어 XSS 공격에 취약하게 설정해 보았다.
export default function PostPage(post : Post){
return `
<div>
<h1>id : ${post.id}</h1>
<h2>${post.title}</h2>
<p>${post.body}</p>
</div>
`
}
app.get("/:postId", (req, res, next) => {
const {postId} = req.params;
const findPost = posts.find((post) => post.id === Number(postId)) as Post;
res.send(`${PostPage(findPost)}`);
});Post의 내용을 문자열로 바로 html로 보내는 코드이다.
여기에 위 공격이 가능한 스크립트를 삽입해 보자
공격 스크립트가 실행되는 모습이다.
그렇다면 이번엔 아래 스크립트를 넣어 직접 sessionId를 뽑아 보자
<script>alert(document.cookie);</script>일단 간이 로그인 버튼을 구현해 보았다.
app.get("/login", (req, res, next) => {
res.cookie("sessionId", "your_session_id");
res.redirect("/");
})
<a style="display: block" href="/login">로그인하기</a>로그인을 진행한뒤 스크립트를 삽입해보자
만약 alert 함수가 아닌 공격자의 서버에 쿠키를 전송하는 요청이었다면 쿠키가 탈취되었을 것이다.
XSS 공격 방지 방법
1. XSS 취약점이 있다면 innerHTML이 아닌 innerText로 넣는다.
내가 사용한 HTML을 그대로 넣는게 아니라 텍스트로 넣어지는 innerText로 넣게 되면 문자열로 인식해 태그가 실행되지 않는다.
<div style="">
<a style="display: block" href="/login">로그인하기</a>
포스트들~
<div id="post-lits" style="display: flex;flex-direction: column; align-items: start">
</div>
${CreatePostForm()}
<script>
const posts = document.querySelector("#post-lits");
console.log(posts);
posts.innerText = \`${posts.map((post) => PreviewPost(post)).join('')}\`;
</script>
</div>
2. 쿠키에 HttpOnly 옵션을 활성화한다.
HttpOnly 옵션을 넣는다면 document.cookie 같은 스크립트로 쿠키에 접근할수 없어 세션 아이디 탈취를 방어 할수 있다.
3. 특수문자를 치환한다.
&, <, >, “, ‘,/ 같은 특수문자들을 문자열로 표기 가능하게 변환한다.
4. 검증된 프레임워크 | 라이브러리를 이용한다.
jsx 문법을 사용하는 React 경우 XSS 처럼 태그 삽입 공격을 완벽히 방어한다…
참고자료
https://www.youtube.com/watch?v=bSGqBoZd8WM
