[자바웹프로그래밍] 쿠키(ID저장) , 세션 , xss 공격 팝업이 계속해서 뜬다면?

지난 글에 popup에 대한 쿠키를 했다면 이번엔 로그인 폼에서 ID저장을 해보겠다.

 

먼저 로그인 폼에 아이디 저장 체크박스를 만들어줄 것이다.

비밀번호를 잊으셨나요? 아래에 다음과 같은 아이디 기억 코드를 작성한다.

그럼 이렇게 기능이 없는 빈 체크박스가 만들어진다.

 

그럼 id가 저장되는 기능을 구현해보겠다.

 

js_login.js으로 넘어가 check_Input 함수 최상단에 

다음과 같은 변수를 넣어준다. ( html에 구현한 체크박스를 가져옴. )

 

그리고 최하단 submit()이전에 

다음과 같은 코드를 넣어준다. 저번에 만들었던 setCookie 함수를 통해 쿠키를 저장하는 과정이다.

 

이제 기존에 만들었던 js_popup.js에서 set,get 쿠키 함수들을 가져와서 적용한다.

 

여기서 주의해야할점은 기존 popupYN으로 되어있던 이름을 id로 바꾸어주어야한다. 이렇게 구현하고 로그인을 하면 

id가 저장되는 모습을 볼 수 있다. 

 

js_login.js에

init()을 추가해준다.

로그인 폼에 쿠키에서 가져온 아이디를 기억해 입력해주는 역할을한다.

 

login.html의 body 시작에

 

init()함수를 불러오는 코드를 추가해주면 끝이다.

 

여기서 쿠키에 보안 설정을 할 수 있는데,크로스 사이트 취약점 보안 설정 추가이다.

3종류가 있는데

• None - 도메인 검증하지 않음
• Lax - 자사도메인이 아니더라도 일부케이스(링크등)에서는 접근 허용
• strict - 자사 도메인으로만 쿠키 전송 가능

설정 방법은

기존 코드에서 Samsite = None; Secure"을 해주면된다.

그럼 위의 이미지처럼 Secure 에 체크가 되어있는 모습을 볼 수 있다.

 

 

이번엔 쿠키에 내 id를 저장하는게 아닌 session에 저장해보겠다.

 

그 전에 저장 공간에 간단하게 설명하겠다.

저장 공간은 3개가있다.

• 쿠키(Cookie) - 유효기간 존재
• 로컬 스토리지(Local Storage)  - 사용자가 지우지않는한 영구적
• 세션 스토리지(Session Storage) - 윈도우나 브라우저를 닫으면 삭제

이 3개는 키 와 값으로 이루어져있다.

 

먼저 js폴더에 js_session.js를 만들어준다.

 

다음과 같은 코드를 작성한다.

참고로 querySelector()은 getElementById()와 같은 역할이다. 

 

여기서 sessionStorage 객체를 활용하는데, 이 객체는 다양한 메서드가 존재한다.

위의 코드를 보면 setItem, getItem으로 sessionStorage 의 메서드를 활용한걸 볼 수 있다.

 

이제 submit()위에

session_set()을 넣어주면 된다.

(당연하게 login.html에 세션 js파일을 불러오는 코드는 작성해야한다.)

 

그럼

다음과 같이 저장이 되는걸 볼 수 있다.

 

이제 js_session.js파일에 로그인을 하고난 뒤 다시 접속하면 세션이 유지되는 기능을 구현해보겠다.

다음과 같은 코드를 구현해준다. 

여기서 index_login.html은 아직 안만들었기 때문에 기존 홈페이지를 복사해서 만들어준다.

init()함수에 세션 유무 검사 코드도 작성해준다.

 

그리고 로그인을하면

 

잘 작동하는 모습을 볼 수 있다.

 

 

!!!

내가 격은 문제가 하나 있었는데, 바로 XSS 공격이 자꾸 발생한다는 팝업이 뜨는것이다.

 

전에 추가했던 코드였는데, 문제점은 실행순서의 오류였다.

이 코드였는데, password가 먼저 실행되니 공격한다고 인식했던것이다.