See the Pen Browser Identifier by Richard JEON (@hj-rich) on CodePen. 버튼을 클릭하면 현재 Client의 browser, os 등의 정보가 alert된다. 이하는 방문카운트 기능을 추가한 과정을 기록한다. 1. 쿠키를 이용해 24시간 간격으로 fetch하는 함수를 footer에 추가. document.cookie 를 이용해 쿠키 유무 확인 및 쿠키 생성을 진행한다. 쿠키가 없으면 쿠키를 생성하되, 이름을 지정하고, 유효기간은 현재로부터 24시간으로 한다. footer template에 담아서 모든 페이지에서 쿠키 유무를 판별하도록 처리한다. 쿠키가 있으면 아무 일도 하지 않는다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ..
진행중인 withIT 프로젝트에 모바일 대응을 진행하고 있는데 모바일 메뉴 디자인과 열고 닫는 부분에서 굉장히 많은 시간이 소요됐다. 물론 처음 만드는 거기도 하지만 정말 너무하다 싶을 정도로 삽질이 심했다. 그 중 두 가지가 제일 괴롭혔는데 첫째가 우측에서 메뉴가 나오게 만들 경우, 하단 스크롤이 생기는 문제였고, 둘째가 호출된 메뉴 이외의 영역을 클릭했을 경우 메뉴를 닫는 이벤트 구현이었다. 끙끙댄 삽질에 비해선 갑자기 해결이 되어 글을 남긴다. 우측에서 나올 때 스크롤이 생기는 문제는 메뉴를 왼쪽에서 나오게 함으로써 해결(또는 회피..) 했다..;; 다른 사이트의 구현방식을 보다가 왼쪽에서 나오는 건 스크롤이 안 나오길래 해봤더니 ;;; 왼쪽에서 튀어나올 땐 스크롤바가 생기지 않아서 왼쪽으로 그냥 ..
크로스 사이트 스크립팅. 그 중에서도 가장 기초적인 저장 XSS공격에 대한 대응 포스팅이다. withIT 개발 단계에서 테스트했을 땐 스크립트가 작동되지 않아서 그냥 넘어갔었는데.. (왜 그땐 안된거지?;;) 혹시나 해서 테스트 해보니까 스크립트 태그가 너무 잘 작동해서;; 시급한 문제니까 바로 처리를 했다. db에 저장할 때부터 script 태그는 html에서 plain text로 인식되도록 변경 후 저장하도록 했다. 아주 초보적인 수준의 XSS공격과 대응이었다. 나중에 해보고 싶은 작업으로는 만약 XSS 공격이 인식될 경우 해당 접속 IP를 24시간동안 접속제한하는 로직에 흥미가 생겼다.
1 2 3 4 5 let text = "ztz@efe.et"; let pattern = /(\w+)@(\w+)\.(\w+)/; console.log(pattern.test(text)); cs 검증할 텍스트 text 선언. 검증 기준이 될 패턴 pattern 선언. test 메소드를 이용하여 text가 pattern을 만족하는지 T/F로 리턴. 정규식의 기본적인 문법만 배우고 혼자 생각해서 만든 거라서 아마 아주 허술한 검증이겠지만 배운걸 응용해서 뭔갈 했다는 게 기쁘다. 아마 여기에 좀 더 정교한 문법이 사용되지 않을까 싶다. 정규식에 대해 더 공부하려 하니 너무 양이 방대해서 우선 이런식으로 사용하는구나 이해하고 넘어가고자 한다. 관련하여 모질라의 정규식 공식 문서와 정규식을 입력하면 시각화해주는 사이..
