-
Notifications
You must be signed in to change notification settings - Fork 1
/
2-1-2-cookie.html
138 lines (125 loc) · 5.36 KB
/
2-1-2-cookie.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>FDS Node.js + HTTP</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/blood.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Cookie</h1>
</section>
<section>
<h1>쿠키의 필요성</h1>
<p><strong>개별 클라이언트</strong>의 <strong>여러 요청</strong>에 걸친 <strong>정보의 유지</strong></p>
<ul>
<li>장바구니</li>
<li>로그인/로그아웃</li>
<li>방문 기록</li>
<li>...</li>
</ul>
</section>
<section>
<h1>HTTP Cookie</h1>
<ul>
<li><strong>서버가 응답을 통해 웹 브라우저에 저장하는</strong> 이름+값 형태의 정보</li>
<li>웹 브라우저는 쿠키를 저장하기 위한 <strong>저장소</strong>를 가지고 있음</li>
<li>저장소는 <strong>자료의 유효기간</strong>과 <strong>접근 권한</strong>에 대한 <strong>다양한 옵션</strong>을 제공</li>
</ul>
</section>
<section>
<img src="https://i.imgur.com/f5jxhf8.png" />
</section>
<section>
<h1>쿠키 전송 절차</h1>
<ol>
<li>
<strong>서버는</strong> 브라우저에 저장하고 싶은 <strong>정보를 응답과 같이 실어 보낸다</strong> (Set-Cookie 헤더)
<pre><code data-trim class="http">
HTTP/1.1 200 OK
Set-Cookie: cookieName=cookieValue; Secure; Max-Age=60000
...
</code></pre>
</li>
<li>
브라우저는 <strong>같은 서버에 요청이 일어날 때마다</strong> 해당 <strong>정보를 요청에 같이 실어서</strong> 서버에 보낸다 (Cookie 헤더)
<pre><code data-trim class="http">
GET / HTTP/1.1
Cookie: cookieName=cookieValue; anotherName=anotherValue
...
</code></pre>
</li>
</ol>
</section>
<section>
<h1>Set-Cookie Options</h1>
<dl>
<dt>Expires, Max-Age</dt>
<dd>쿠키의 지속 시간 설정</dd>
<dt>Secure</dt>
<dd>HTTPS를 통해서만 쿠키가 전송되도록 설정</dd>
<dt>HttpOnly</dt>
<dd>자바스크립트에서 쿠키를 읽지 못하도록 설정</dd>
<dt>Domain, Path</dt>
<dd>쿠키의 scope 설정 (쿠키가 전송되는 URL을 제한)</dd>
</dl>
</section>
<section>
<h1>Express + Cookie</h1>
<dl>
<dt>쿠키 읽기 - req.cookies</dt>
<dd>요청에 실려온 쿠키가 객체로 변환되어 req.cookies에 저장됨 <strong>(cookie-parser 미들웨어 필요)</strong></dd>
<dt>쿠키 쓰기 - res.cookie(name, value)</dt>
<dd>쿠키의 생성 혹은 수정</dd>
</dl>
</section>
<section>
<h1>쿠키 예제</h1>
<p><a target="_blank" href="https://glitch.com/edit/#!/wpsn-cookie-example">Link</a></p>
</section>
<section>
<h1>JavaScript + Cookie</h1>
<p><strong>자바스크립트로도 쿠키를 읽고 쓰는 방법이 <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie">존재</a></strong>하지만, 보안 상 문제를 일으킬 수 있으므로 이런 접근 방식은 거의 사용되지 않는다.</p>
<p>자바스크립트에서 쿠키에 접근하지 못하도록 <strong>HttpOnly를 항상 설정하는 것이 best practice</strong></p>
</section>
<section>
<h1>쿠키의 한계점</h1>
<ul>
<li>US-ASCII 밖에 저장하지 못함. <strong>보통 percent encoding을 사용</strong></li>
<li><strong>4000 바이트</strong> 내외(영문 4000자, percent encoding 된 한글 444자 가량)밖에 저장하지 못함</li>
<li>브라우저에 저장됨. 즉, <strong>여러 브라우저에 걸쳐 공유되어야 하는 정보</strong>, 혹은 <strong>웹 브라우저가 아닌 클라이언트</strong>(모바일 앱)에 저장되어야 하는 정보를 다루기에는 부적절</li>
</ul>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function () { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>