[WEB-009][중급] 브라우저 저장 위치 구분하기
페이지 정보
본문
[이번 수업]
localStorage, sessionStorage, 쿠키와 로그인 세션의 수명·공유 범위·서버 전송 여부를 비교합니다.
[선수지식]
출처(origin)는 스킴·호스트·포트로 정해지는 주소 경계입니다. HTML 작성과 Python 3가 필요합니다.
[학습목표]
1. 목적에 맞는 저장소를 고른다.
2. 쿠키와 Web Storage의 전송 차이를 설명한다.
3. 로그인 세션 식별자를 안전하게 다룬다.
[핵심개념]
localStorage는 출처에서 공유되고 다시 열어도 남을 수 있습니다. sessionStorage는 출처와 탭에 묶여 탭을 닫으면 끝납니다. 둘 다 문자열을 저장하며 요청에 자동 전송되지 않습니다.
쿠키는 속성으로 범위와 수명을 정하며 조건에 맞으면 요청에 포함됩니다. 로그인 세션은 여러 요청을 같은 사용자 상태로 잇는 서버 개념입니다. 보통 서버가 상태를 갖고 브라우저에는 세션 ID 쿠키만 둡니다.
[따라하기]
index.html을 만들고 저장합니다.
```html
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<title>WEB-009 저장소 실습</title>
<button id="save">저장</button>
<button id="clear">삭제</button>
<pre id="out">저장 전</pre>
<script>
const out = document.querySelector("#out");
function show() {
const cookie = document.cookie
.split("; ")
.includes("web009_theme=dark");
out.textContent = [
`local=${localStorage.getItem("web009_theme")}`,
`session=${sessionStorage.getItem("web009_draft")}`,
`cookie=${cookie}`,
].join("\n");
}
save.addEventListener("click", () => {
localStorage.setItem("web009_theme", "dark");
sessionStorage.setItem("web009_draft", "hello");
document.cookie = "web009_theme=dark; Path=/; SameSite=Lax";
show();
});
clear.addEventListener("click", () => {
localStorage.removeItem("web009_theme");
sessionStorage.removeItem("web009_draft");
document.cookie = "web009_theme=; Max-Age=0; Path=/; SameSite=Lax";
show();
});
</script>
</html>
```
Windows PowerShell은 `py -m http.server 8000 --bind 127.0.0.1`, macOS·Linux는 `python3 -m http.server 8000 --bind 127.0.0.1`을 실행합니다. http://127.0.0.1:8000/ 을 엽니다. 저장 결과는 local=dark, session=hello, cookie=true이고 삭제 뒤에는 local=null, session=null, cookie=false입니다. Ctrl+C로 종료합니다.
저장 뒤 새로고침하고 새 탭에서 확인하세요. localStorage와 쿠키는 보이지만 sessionStorage 초안은 탭별로 나뉩니다.
[흔한 실수]
file 주소 대신 로컬 HTTP 서버를 씁니다. 객체는 JSON.stringify와 JSON.parse를 사용합니다. sessionStorage는 로그인 세션이 아닙니다. 큰 쿠키는 통신량을 늘립니다.
[보안 주의]
실습은 본인 소유 127.0.0.1에서만 합니다. JavaScript가 읽을 수 있는 localStorage와 sessionStorage에는 비밀번호, 세션 ID, 접근·갱신 토큰을 두지 않습니다. JavaScript 쿠키에는 HttpOnly를 설정할 수 없어 예제 쿠키는 로그인용이 아닙니다. 실제 세션 쿠키는 서버가 HTTPS에서 Secure, HttpOnly, SameSite와 좁은 범위를 설정합니다. 저장값도 검증하고 HTML로 바로 삽입하지 않습니다.
[직접 해볼 과제]
글자 크기는 localStorage, 한 줄 초안은 sessionStorage에 저장하고 새로고침·새 탭·탭 종료 뒤 결과를 기록하세요.
[확인문제]
1. 요청에 자동 포함되지 않는 두 저장소는 무엇인가요?
2. 탭별 초안에 sessionStorage가 알맞은 이유는 무엇인가요?
3. JavaScript 쿠키를 로그인 세션용으로 쓰면 안 되는 이유는 무엇인가요?
[다음 학습]
BACK-009에서 메시지 큐와 비동기 작업으로 요청과 오래 걸리는 처리를 분리합니다.
[공식 참고 자료]
WHATWG HTML Standard — Web storage
https://html.spec.whatwg.org/multipage/webstorage.html
IETF RFC 6265 — HTTP State Management Mechanism
https://www.rfc-editor.org/rfc/rfc6265.html
OWASP HTML5 Security Cheat Sheet
https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html
OWASP Session Management Cheat Sheet
https://cheatsheetseries.owasp.org/cheatsheets/Session_Management_Cheat_Sheet.html
Python http.server 공식 문서
https://docs.python.org/3/library/http.server.html
localStorage, sessionStorage, 쿠키와 로그인 세션의 수명·공유 범위·서버 전송 여부를 비교합니다.
[선수지식]
출처(origin)는 스킴·호스트·포트로 정해지는 주소 경계입니다. HTML 작성과 Python 3가 필요합니다.
[학습목표]
1. 목적에 맞는 저장소를 고른다.
2. 쿠키와 Web Storage의 전송 차이를 설명한다.
3. 로그인 세션 식별자를 안전하게 다룬다.
[핵심개념]
localStorage는 출처에서 공유되고 다시 열어도 남을 수 있습니다. sessionStorage는 출처와 탭에 묶여 탭을 닫으면 끝납니다. 둘 다 문자열을 저장하며 요청에 자동 전송되지 않습니다.
쿠키는 속성으로 범위와 수명을 정하며 조건에 맞으면 요청에 포함됩니다. 로그인 세션은 여러 요청을 같은 사용자 상태로 잇는 서버 개념입니다. 보통 서버가 상태를 갖고 브라우저에는 세션 ID 쿠키만 둡니다.
[따라하기]
index.html을 만들고 저장합니다.
```html
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<title>WEB-009 저장소 실습</title>
<button id="save">저장</button>
<button id="clear">삭제</button>
<pre id="out">저장 전</pre>
<script>
const out = document.querySelector("#out");
function show() {
const cookie = document.cookie
.split("; ")
.includes("web009_theme=dark");
out.textContent = [
`local=${localStorage.getItem("web009_theme")}`,
`session=${sessionStorage.getItem("web009_draft")}`,
`cookie=${cookie}`,
].join("\n");
}
save.addEventListener("click", () => {
localStorage.setItem("web009_theme", "dark");
sessionStorage.setItem("web009_draft", "hello");
document.cookie = "web009_theme=dark; Path=/; SameSite=Lax";
show();
});
clear.addEventListener("click", () => {
localStorage.removeItem("web009_theme");
sessionStorage.removeItem("web009_draft");
document.cookie = "web009_theme=; Max-Age=0; Path=/; SameSite=Lax";
show();
});
</script>
</html>
```
Windows PowerShell은 `py -m http.server 8000 --bind 127.0.0.1`, macOS·Linux는 `python3 -m http.server 8000 --bind 127.0.0.1`을 실행합니다. http://127.0.0.1:8000/ 을 엽니다. 저장 결과는 local=dark, session=hello, cookie=true이고 삭제 뒤에는 local=null, session=null, cookie=false입니다. Ctrl+C로 종료합니다.
저장 뒤 새로고침하고 새 탭에서 확인하세요. localStorage와 쿠키는 보이지만 sessionStorage 초안은 탭별로 나뉩니다.
[흔한 실수]
file 주소 대신 로컬 HTTP 서버를 씁니다. 객체는 JSON.stringify와 JSON.parse를 사용합니다. sessionStorage는 로그인 세션이 아닙니다. 큰 쿠키는 통신량을 늘립니다.
[보안 주의]
실습은 본인 소유 127.0.0.1에서만 합니다. JavaScript가 읽을 수 있는 localStorage와 sessionStorage에는 비밀번호, 세션 ID, 접근·갱신 토큰을 두지 않습니다. JavaScript 쿠키에는 HttpOnly를 설정할 수 없어 예제 쿠키는 로그인용이 아닙니다. 실제 세션 쿠키는 서버가 HTTPS에서 Secure, HttpOnly, SameSite와 좁은 범위를 설정합니다. 저장값도 검증하고 HTML로 바로 삽입하지 않습니다.
[직접 해볼 과제]
글자 크기는 localStorage, 한 줄 초안은 sessionStorage에 저장하고 새로고침·새 탭·탭 종료 뒤 결과를 기록하세요.
[확인문제]
1. 요청에 자동 포함되지 않는 두 저장소는 무엇인가요?
2. 탭별 초안에 sessionStorage가 알맞은 이유는 무엇인가요?
3. JavaScript 쿠키를 로그인 세션용으로 쓰면 안 되는 이유는 무엇인가요?
[다음 학습]
BACK-009에서 메시지 큐와 비동기 작업으로 요청과 오래 걸리는 처리를 분리합니다.
[공식 참고 자료]
WHATWG HTML Standard — Web storage
https://html.spec.whatwg.org/multipage/webstorage.html
IETF RFC 6265 — HTTP State Management Mechanism
https://www.rfc-editor.org/rfc/rfc6265.html
OWASP HTML5 Security Cheat Sheet
https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html
OWASP Session Management Cheat Sheet
https://cheatsheetseries.owasp.org/cheatsheets/Session_Management_Cheat_Sheet.html
Python http.server 공식 문서
https://docs.python.org/3/library/http.server.html
- 이전글[BACK-009][중급] 오래 걸리는 작업을 줄 세워 처리하기 26.09.04
- 다음글[JSTS-009][중급] 파일을 읽어 로컬 서버로 전달하기 26.09.04
댓글목록
등록된 댓글이 없습니다.