[JS] 쿠키를 사용해보자

https://nakedsecurity.sophos.com/2019/05/10/chrome-browser-pushes-samesite-cookie-security-overhaul/

 

쿠키에 대해 자세한건 다른 글에서 알아보고, 이 글에서는 쿠키를 어떻게 이용하는지에 대해 알아보겠습니다.

 

늘 Persistence 쿠키와 session 쿠키에 대해 대충 알고 넘어가기만 했는데 이번 글에서는 쿠키에 대해 짚고 넘어가려합니다.

 

이 글의 코드는 제 회사의 코드를 기준으로 작성 하였기에 어떻게 작동하는지 흐름 파악하기에는 좋지만, 지금 당장 쿠키 관련한 코드가 필요하신분은 적합하지 않을 수 있습니다.

 

l 쿠키는 어디있을까?

 

개발자 도구 단축키는 F12

 

개발자 도구 Application 탭을 가보면 브라우저에 저장되어 있는 쿠키의 정보를 볼 수 있습니다.

 

JSESSIONID는 Session 쿠키에 관한 정보이고, 그외에는 Persistence 쿠키에 관한 것인데 여기선 Persitence 쿠키를 그냥 쿠키라고 지칭하겠습니다.

 

popup104, 105, 106 쿠키는 제가 직접 심어 놓은 것입니다. 그리고 Value 값들이 true 인것을 보실 수 있습니다. 

 

l 쿠키는 어디서 사용할까?

 

2개의 팝업창

 

팝업창을 보시면 체크박스로 '다시는 띄우지 않음' , '오늘은 그만보기' 항목이 있습니다. 저 기능을 수행될 수 있도록 하게끔 필요한 것이 바로 쿠키입니다.

 

위에서 각 쿠키의 value 값들을 가지고 서버단에서 쿠키의 value가 true 이면 팝업이 뜨지 않게끔 해주는 것입니다.

 

getCookieValue : function(key){
	let cookieKey = key + "="; 
	let result = "";
	const cookieArr = document.cookie.split(";");

	for(let i = 0; i < cookieArr.length; i++) {
		if(cookieArr[i][0] === " ") {
			cookieArr[i] = cookieArr[i].substring(1);
		}

		if(cookieArr[i].indexOf(cookieKey) === 0) {
			result = cookieArr[i].slice(cookieKey.length, cookieArr[i].length);
			return result;
		}
	}
	return result;
}

 

 

위 코드는 Cookie의 value 값을 가져오는 코드입니다.

 

 

콘솔값으로 true가 출력되신걸 보실수 있습니다.

 

var cookieKey = result.data.result[index].seq;
					
var today = _this.getToday();

var cookieValue = _this.getCookieValue(`popup${cookieKey}`);
alert(cookieValue);

if(cookieValue !== 'true'){
	if(today >= str_date && today <= end_date){
		var options = `top=`+ posY +`, left=`+ posX +`,width=` + width + `, height=`+ height + `, status=no, menubar=no, toolbar=no, resizable=no`;
		window.open("adm/popup/openPopup?popup_seq="+result.data.result[index].seq, "popup="+result.data.result[index].seq, options);				
	}
}

 

그리고 가져온 value 값을 가지고 만약 true가 아니면 팝업창을 띄어줍니다. 만약 쿠키를 심어주지 않았다면 해당 쿠키에 대한 정보가 없어서 cookieValue가 true 값을 가지지 못해 팝업창이 뜨게 될것입니다.

 

(쿠키 Value의 true은 제가 임의로 정해둔거라 저장하고 싶은신대로 하시면 됩니다.)

 

function setCookie(c_name,value,exdays){
            var exdate=new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
            <% if(popupTy == 1){ %>
            window.opener.document.cookie=c_name + "=" + c_value;
            //자식창으로부터 부모창에 있는 속성들을 호출하는 방법은 opener 라는것을 활용하여 쉽게 사용할 수 있고
            <% }else{ %>
            window.parent.document.cookie=c_name + "=" + c_value;
            //window.parent는 <iframe> 태그의 부모, opener랑은 엄연히 다르다
            <% } %>
        }
        function setCookieClick( key, value, day ){
            setCookie(key, value, day);
            closePopup('<%=cSR.getParamterInt(popup,"popup_seq")%>');
        }
        function closePopup( id ){
            window.open('about:blank','_self').close();
            <% if(popupTy == 0){ %>
            parent.closeLayerPopup( id );
            <% } %>
        }

 

위 코드는 JSP에 있는 쿠키를 브라우저에 심어주는 코드입니다. 여기서 눈여겨 볼 코드는 window.opener와 window.parent입니다.

 

이 둘의 팝업창의 부모를 선택해주는 함수입니다. 즉 팝업의 부모니깐 결국 팝업을 실행시켜준 페이지가 부모가 되겠지요. 차이는 window.opener의 경우는 서로 다른 윈도우 창에서의 경우이고, window.parent는 iframe 관련한 함수입니다.

 

만약 winow.openr.document.cookie 가 아니고 그냥 document.cookie를 해준다면 팝업 자체 브라우저에 쿠키를 심게되서 기능에 오류가 생기게 됩니다. 메인 브라우저에서는 쿠키의 유무를 판단해줄수 없게 되지요.

 

l 쿠키를 직접 실험해보자

 

 

다음과 팝업이 있고 이 팝업에 대한 쿠키는 없습니다. 만약 '다시는 띄우지 않음', '오늘은 그만보기'를 체크할 경우!!

 

 

popup105, popup106 쿠키가 심어진 것을 보실수 있습니다. 그리고 popup105의 expires 경우 2021년인데 이는 '다시는 띄우지 않음' 을 1년으로 설정해놓았기 때문입니다. popup106 같은 경우 '오늘은 그만보기' 이므로 글쓴 기준 날짜(2020-12-29)으로 하루 다음날이 2020-12-30인것을 확인 하실 수 있습니다.

 

만료가 되면 해당 쿠키를 사라질 것이며, Value 값이 없어서 팝업은 다시 나타나게 될 것입니다.

 

ㅣ 요약

 

• 팝업창의 쿠키 같은 경우 부모 브라우저에 쿠키를 심어줘야 제 기능을 한다.
• 쿠키의 Value 값은 아무거나 해도 상관없다.
• 쿠키 만료 기간이 지나면 쿠키를 알아서 없어진다.
• 팝업의 기능 같은 경우 쿠키 Value를 가져와 값이 있으면 팝업을 안띄우게 해준다.

 

 

읽어주셔서 감사합니다.

질문은 언제나 환영합니다.

 

"난 반드시 백엔드 왕이 될거야"