쿠키, 세션, 캐시 - RLidea/dev.docs GitHub Wiki
쿠키, 세션, 캐시
쿠키
- "사용자의 브라우저"에 저장
- PHP 기준으로 설명드리자면 $_COOKIE['변수명'] 을 통해 불러올 수 있고, setcookie() 함수를 통해서 저장
- 사용자의 컴퓨터를 만질 수 있다면 누구라도 쿠키에 입력된 값을 확인할 수 있다.
- 보안성이 없다.
- 쿠키는 보안적인 부분은 없으므로 "절대로" 중요 데이터가 입력되어선 안됩니다. 쿠키를 사용하는 대표적인 기능은 쇼핑몰의 장바구니
자바스크립트에서 쿠키를 읽기,작성,삭제할 수 있습니다. 이를 위한 속성이 document.cookie 입니다.
사용법
쿠키 반환
document.cookie
쿠키 생성
document.cookie="name=soke";
만료시간이 있는 쿠키 생성
document.cookie="name=soke; expires=Mon, 13 Jul 2015 05:04:24 GMT";
경로 매게 변수를 사용한 쿠키 생성 (기본적으로 쿠키는 현재 페이지에 속합니다.)
document.cookie="name=soke; expires=Mon, 13 Jul 2015 05:04:24 GMT; path=/";
쿠키 삭제 ( 날짜 매개 변수를 지난 날짜로 쿠키 생성)
document.cookie="name=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
쿠키를 생성하는 함수 설정
function setCookie(cookieName, cookieValue, expireDays) {
var d = new Date();
d.setDate(d.getDate() + expireDays); // expireDays 일 뒤의 이 시간
var expires = "expires=" + d.toGMTString();
document.cookie = cookieName + "=" + cookieValue + "; " + expires;
}
// 쿠키명 (cookieName), 쿠키 값(cookieValue), 쿠키 만료 날짜(expireDays)
생성한 쿠키 반환
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length;i++){
var c = ca[i];
while(c.charAt(0)==' ') c = c.substring(1);
if(c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
쿠키명(cname)에 해당하는 쿠키를 찾으면 c.substring(name.length,c.length)를 반환합니다.
생성한 쿠키 확인
function checkCookie(){
var username=getCookie("username");
if(username!=""){
alert("Welcome again " + username);
}else{
username = prompt("Please enter your name:","");
if(username != "" && username != null){
setCookie("username", username, 365);
}
}
}
//사용자의 이름을 요청하는 프롬프트 상자가 표시되고 setcookie함수를 호출하여 365일간 쿠키를 저장한다
출처: http://soke.tistory.com/21 [Soke]
쿠키의 옵션
;expires: 쿠키의 만료시간을 의미한다. 명시하지 않거나 잘못된 값을 입력하면 세션쿠키로 생성되서 브라우저 종료 시 삭제된다.
;max-age: ;expires와 비슷하지만 시각이 아니라 초로 입력한다. (1년이면 31536000초)
;domain: 서버 이름에 따라 쿠키 사용여부가 결정된다. .tistory.com 처럼 메인 도메인명을 지정하면 a.tistory.com, b.tistory.com과 같이 서브 도메인이 달라도 쿠키를 공유한다. 명시하지 않으면 현재 페이지의 location.host값으로 설정된다.
;path: 서버 이름 뒤에 오는 경로에 따라 쿠키 사용여부가 결정된다. 슬래쉬( / )로 설정하면 모든 path에서 공유한다. 명시하지 않으면 현재 페이지의 location.path값으로 설정된다.
;secure: SSL 통신에서만 사용가능한 쿠키가 생성된다. HTTP 문서에서는 접근할 수 없다. 이 옵션을 활성화하지 않는한 HTTP/HTTPS 어느쪽에서 생성한 쿠키든 서로 공유한다.
;samesite: CSRF사이트간 요청 위조를 방지하기 위한 옵션. lax혹은 strict로 설정한다.
주의사항
쿠키의 값에는 쉼표,와 세미콜론;을 포함하면 안된다. 출처: http://stackoverflow.com/questions/25387340/is-comma-a-valid-character-in-cookie-value
쿠키와 보안
| 종류 \ 옵션 | secure:false, sameSite: None | secure:true, sameSite: None | secure:false, sameSite: Lax/Strict |
|---|---|---|---|
| PC 브라우저 | O (warning) | O | O |
| 모바일 브라우저 | O | X | O |
| Insomnia | O | X | O |
- Lax와 Strict의 경우 get 통신을 통해 쿠키를 전달하는데 제약사항 존재
- Strict: As the name suggests, this is the option in which the Same-Site rule is applied strictly. When the SameSite attribute is set as Strict, the cookie will not be sent along with requests initiated by third party websites.
- Lax: When you set a cookie' SameSite attribute to Lax, the cookie will be sent along with the GET request initiated by third party website. The important point here is that, to send a cookie with a GET request, GET request being made must cause a top level navigation. Only in this way, the cookie set as LAX will be sent.
참고: Using the Same-Site Cookie Attribute to Prevent CSRF Attacks
세션
- 세션의 경우 "서버에 저장되는 쿠키"라고 이해하시면 편합니다.
- 세션은 $_SESSION['변수명']을 통해 불러올 수 있고, 저장도 가능
- 하는 기능은 쿠키와 크게 다르지 않지만, 서버에 저장되고, 서버에 직접 접근하지 않는 이상 세션 내의 데이터를 탈취하는 것은 어렵다
- 세션의 경우 위의 쿠키에서 저장하지 않는 "중요한 데이터"를 저장할 때 주로 쓰입니다. 회원이 로그인 했을 때 로그인 된 아이디나, 개인정보 등 사용자에게 보여져선 안되는 정보를 담고 있죠.
- 서버는 사용자 하나하나를 인식할 수가 없다. 하지만 정상적으로 자동 로그인 되는 이유는 쿠키와 세션의 연결에 의해서.
캐시
- 캐시의 경우 쿠키, 세션과는 전혀 다른 기능
- 홈페이지를 접속하면 css, js, 이미지 파일이 사용자의 브라우저에 저장. 그 후 다시 같은 홈페이지를 접속하게 되면 css, js, 이미지 파일을 서버가 아닌 사용자의 PC에서 가져옴
- 이로써 얻는 이점은 css, js, 이미지의 용량이 3MB라고 가정할 때, 서버는 한번 요청될 때마다 3MB의 자원을 아끼는 것
- 대부분의 홈페이지는 상단, 하단이 동일하므로 더욱 더 많은 자원이 아껴지는겁니다.
- 단점: 홈페이지 관리자가 이미지를 변경 -> 사용자는 이미지가 변경되어있지 않음. 해결 방법은 사용자 브라우저의 캐시를 지워주거나, 서버에서 클라이언트로 응답을 보낼 때 header에 캐시 만료시간을 명시해주는 등 방법은 다양하다.