http-only cookie in javascript

자바스크립트로 웹 서비스 개발을 진행하면 보안 이슈가 중요합니다.

앱과 다르게 자바스크립트로 해커들이 쿠키나 localStorage에 접근해 xss나 csrf 공격을 할수있기 때문에, 개발자들은 항상 보안을 고민합니다.

이에, 오늘은 자바스크립트로 접근이 불가한 http-only cookie에 대해 알아보겠습니다.

 

 

쿠키란 web storage(localStorage, sessionStorage)가 나오기 전, 서버에서 브라우저 인식을 위해 고안된 개념입니다. 흔히 세션으로 로그인 구현시, 세션의 키값을 브라우저의 쿠키에 저장하죠.

그런데  콘솔로  쿠키값에 접근이 가능한 사실을 알고 계신가요? 개발자 도구(f12) -> 'document.cookie' 명령어를 치면 쿠키 값이 모두 노출됩니다. 즉, 자바스크립트로 브라우저의 쿠키값 접근이 가능함을 보여주죠. 

*해커들의 먹잇감이 되겠네요ㅜㅜ

 

 

이를 방지하는 것이 http-only입니다. 자바스크립트 접근 대신 오로지, 개발자 도구의 Application을 통해서만 쿠키값 확인이 가능하죠. 쿠키를 내려줄때 코드 차이는 아래와 같습니다.

 

//node.js의 express 기준으로 작성했습니다.

//기본
...
res.cookie("key", "value")
res.send("해킹 ㅠㅠ")


//http-only
...
res.cookie("key", "value", { httpOnly: true, maxAge: 3700000 })
res.send("해킹?")

*다른  도메인 간에는 헤더의 credentials를 true로 해줘야함을 잊지마세요!

 

 

 

감사합니다.