Post, Cookie

haribo·2021년 3월 21일

POST cookie

Web

목록 보기

1/7

Get

검색, 짧고 보안에 문제 없는 것은 form태그라 할지라도 사용함
모든 데이터가 URL에 노출됨
총 길이가 1024byte로 제한
링크를 통한 데이터 전송시 사용 (게시물 목록의 페이지 번호 이동, 목록에서 상세 페이지로의 이동 등)

Post

보안, 아이디 비번 등등. 긴거
Form 요소를 통해 데이터를 전달하는 방식
20MB 이상 전송 가능 (서버설정에 따라 다름. 서버설정? 운영체제의 설정 파일(기본 5MB))
사용자가 입력한 값을 저장/수정하기 위한 데이터 전송시에 사용

상기 내용은 프론트엔드 기준이고, 백엔드 기준으론 차이가 없음.

join 메서드 - 배열을 문자열로 묶기

어떻게 쓰일까?

네이버에서 간편로그인 후 다른 앱 넘어가도 그대로 연결 되는 이유 : 쿠키를 하위 도메인끼리 연결시켰기 때문에 되는 것
보안에 좋지 않지만 모바일은 쿠키 사용 비중이 높음(손에서 안놓으니까)

정의

웹사이트 방문자 컴퓨터에 데이터를 저장해 놓는 텍스트 파일

지정된 시간동안은 브라우저를 재실행해도 데이터가 삭제되지 않으며, 사이트 내의 모든 페이지에서 읽기/수정/삭제가 가능한 전역변수가 됨.

구성

이름 : 쿠키에 저장되는 데이터에 개발자가 부여하는 이름. 저장된 데이터를 읽어올 때 이 이름으로 접근한다. (name 태그와 유사)
데이터 : 실제로 저장되는 값. 한글, 공백 등이 저장될 수 없기 때문에 URL Encoding 처리를 한다.
유효시간 : 쿠키를 영구적으로 저장할 수는 없다. 반드시 저장될 기간을 설정해야한다. 기간을 지정하지 않거나 -1로 설정할 경우 브라우저를 닫는 즉시 자동으로 삭제된다. (단위는 초, -1초는 없으니까)
유효 도메인/경로 : 쿠키는 서로 다른 도메인끼리 공유되지 않는다. 따라서 도메인 끼리 연결해줄 수 있도록 포괄적으로 설정해야한다. (www.naver.com과 blog.naver.com을 공유하려면 .naver.com으로 지정해줘야함) 같은 도메인 안에서도 특정 폴더 안에서만 유효하도록 제한할 수 있다.

쿠키 확인하기

개발자 도구의 애플리케이션 탭을 참고하자.

(팁 : Ajax는 network 탭을 자주본다.)

_ok UI 없음

1분간 창 열지 않음 기능 구현

flow

code

opener.jsp

<%@page import="java.net.URLDecoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%
	// 쿠키값을 저장할 문자열
	String isPopup = null;
	
	// 저장된 모든 쿠키 목록을 배열로 가져온다.
	Cookie[] cookies = request.getCookies();
	
	// 쿠키 목록이 있다면?
	if (cookies != null) {
		// 가져온 배열의 길이만큼 반복
		for (int i = 0; i < cookies.length; i++) {
			// i번째 쿠키의 이름을 취득한다.
			String cookieName = cookies[i].getName();
	
			// 이름이 내가 원하는 값일 경우 복사한다.
			if (cookieName.equals("is_popup")) {
				// 쿠키값을 취득한다.
				String value = cookies[i].getValue();
			
				// 저장된 값의 문자열 길이가 0보다 크다면?
				if (value.length() > 0) {
					// 인코딩 된 값이므로 디코딩 처리하여 원래값으로 복원한다.
					isPopup = URLDecoder.decode(value, "UTF-8");
				}
			}
		}
	}
%>
<!doctype html>
<html>

<head>
<meta charset="UTF-8" />
<title>Hello JSP</title>
</head>

<body>
	<h1>팝업창 열기</h1>

	<%
	if (isPopup == null) {
	%>
	<script type='text/javascript'>
		// javascript 팝업창 열기
		var popup = window.open('child.jsp', 'child-win',
				'width=350, height=300');
		if (!popup) {
			alert("팝업창을 허용해주세요.");
		}
	</script>
	<%
	}
	%>
</body>

</html>

child.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello JSP</title>
</head>

<body>
    <h1>팝업창</h1>
    <p>opener.jsp에 의해서 열려진 팝업창 입니다.</p>
    
    <form method="post" action="child_close.jsp">
    	<label> <input type="checkbox" name="is_popup" value="Y"> 1분간 창 열지 않음 </label>
    	<button type="submit">닫기</button>
    </form>
</body>

</html>

child_close.jsp

<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
	// 파라미터의 문자열 셋을 설정한다. (페이지 상단에서 최초 1회)
	request.setCharacterEncoding("UTF-8");
	
	// 같은 이름의 체크박스가 하나인 경우는 일반 파라미터와 처리가 동일하다.
	// 체크박스가 선택되었다면 value 속성의 "Y"가 전달될 것이고,
	// 선택되지 않았다면 null 이 된다.
	String isPopup = request.getParameter("is_popup");
	
	// 체크박스가 선택되었다면 60초의 유효시간을 갖는 is_popup이라는 이름의 쿠키를 생성한다.
	if (isPopup != null) {
		/** 전송된 값이 있는 경우 저장 (혹은 덮어쓰기) */
		String enc = URLEncoder.encode(isPopup, "UTF-8");		// 저장할 값에 대한 URLEncoding
		Cookie info = new Cookie("is_popup", "UTF-8");			// 쿠키 생성 (이름, 값 설정)
		info.setMaxAge(60);									// 쿠키의 유효시간(초) - 지정하지 않을 경우 브라우저를 닫으면 즉시 삭제
		info.setPath("/");									// 쿠키가 유효한 경로 설정 - 사이트 최상단 디렉토리 지정(사이트 전역에서 유효)
		info.setDomain("localhost");						// 쿠키가 유효한 도메인 설정 --> 상용화시에는 사이트에 맞게 도메인으로 수정해야함
		response.addCookie(info);							// 쿠키 저장하기
	}
%>
<script type="text/javascript">
	window.close();		// javascript 현재 창 닫기
</script>
<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello JSP</title>
</head>

<body>
    
</body>

</html>

웹상태 유지기법 심화 (예습)

쇼핑몰 결제페이지 흐름을 생각해보자.

A페이지 : 결제 UI를 담당한다. 사용자는 여기에 결제 데이터(카드, 계좌 등등)를 입력한다.
B페이지 : 카드사 결제처리가 되는 페이지다. UI는 없다. (실습의 ok 페이지)
C페이지 : 결제 완료를 출력해주는 페이지다.

요구사항

만약 사용자가 C페이지에서 뒤로가기 버튼을 눌렀을 경우 B페이지가 아닌 A페이지로 가야할 것이다. (B로 간다면 중복결제가 되어버리는데 이는 사용자 과실이나, 막아주는 것이 바람직하다.)
한국사이트는 알림창으로 계속 결제 하는게 맞냐고 확인해준다. (외국의 경우 안해주는 경우가 많음. 구매에 장애물을 없애야하니까.)

문제점

보통 뒤로가기 기능은 history 객체를 많이 쓰는데 B페이지로 가지 않으려면 history를 남기지 않아야한다. sendredirect는 가능하고 자바스크립트는 불가능.
알림(alert)을 뜨게하려면 출력을 시켜야하는데 자바스크립트는 가능하지만 sendredirect는 출력이 불가능하다.

절충안

Meta 태그를 사용하여 히스토리에도 남기지 않고, 알림도 띄울 수 있다.

memo

sendRedirect - 기록이 안남고 출력이 안됨
A B C 페이지 있음
A - 결제 UI => B로 넘김(카드사 결제 처리) UI가 없음 => C 완료(뒤로가기시 A로 가야함, B로 가면 중복결제되니까)
알림창으로 계속 알려주면 좋음(한국사이트는 다 이렇게 해줌, 흐름 끊김)

B페이지가 히스토리에 남으면 안됨.
알림(alert) 뜬다는건 출력이 되는거임.
그 두가지는 meta태그만 가능함.

sendredirect : 히스토리에 안남지만 출력 불가능
자바스크립트 : 출력 가능, 히스토리에 남음

haribo

그림 그리는 백엔드 개발자

다음 포스트