아이디,비밀번호 입력창에 스크립트가 들어가면 그 스크립트를 로그인되는 과정중에 읽어들인뒤 실행을 할 수 있다. 해킹 방법 중 하나인데, 이걸 방지하기 위한 XSS 방지 를 적용해보려고 한다.
https://cdnjs.com/libraries/dompurify
dompurify - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. It's written in JavaScript and works in all modern browsers (Safari, Opera (15+), Internet Explorer (10+), Firefox and Chrome - as well as almost anything else using
cdnjs.com
다음 사이트에 들어가 처음에 나오는 코드를 login.html에 헤더 태그에 넣어주면 된다.
넣어주고
js_login.js에
다음과 같은 코드를 작성해준뒤 아이디,비밀번호 입력창에
위의 코드를 입력해보면
다음과 같은 팝업이 뜬다.
다음은 쿠키이다.
제작한 홈페이지에서 F12를 누른뒤 Application을 확인해보면
이렇게 쿠키가 비어있는걸 확인할 수 있다.
기존의 시간 팝업창을 바꿔보겠다.
js_popup.js에 위의 코드를 작성해준다.
그리고 popup.html에서 바디태그를 다음과 같이 수정하면
이렇게 체크칸과 하루에 한 번만 열기가 보인다.
다시 js_popup.js로 돌아와
다음과 같이 작성해준다. 이건 쿠키에 값의 N이 없는경우 무조건 새로 연다.라는 뜻이다.
js_popup.js 에서
다음과 같이 코드를 해준다. 먼저 SetCookie는 SetDate로 시간을 설정하고 getDate로 표준날짜를 리턴한다.
GetCookie 는 쿠키를 얻는것이다. 존재한다면 배열을 제외한 popupYN 을 찾아 값을 리턴해준다. 즉 인덱스[1]이다.
여기서 쿠키는 키 , 값으로 이루어져있다.
그리고 아래 이런 함수를 만들어준다. 이건 쿠키의 값이 인덱스[1]이라면 self.Close로 창을 닫는것이다.
개발자 모드를 통해 쿠키를 다시 확인해보면 이렇게 확인할 수 있다.
'자바웹프로그래밍' 카테고리의 다른 글
| [자바웹프로그래밍] 화살표 함수, 로그인 창 구현 (0) | 2025.05.02 |
|---|---|
| [자바웹프로그래밍] 데이터 타입,자료구조 MAP과 SET (0) | 2025.04.12 |
| [자바웹프로그래밍] 팝업창 기능추가와 이미지 호버 기능 만들기 (0) | 2025.04.12 |
| [자바웹프로그래밍] JS, 검색 기능 만들기,간단한 팝업창 구현하기 (0) | 2025.04.08 |
| [자바웹프로그래밍] 네비게이션 바 (부트스트랩) 가져오기 (0) | 2025.04.07 |