๐Ÿ’œ ์Šคํ”„๋ฆฐํŠธ FE 9๊ธฐ/weekly ํŽ˜์ดํผ ๐Ÿ“

๐Ÿ“Œ week(15) - ์„ธ์…˜ ๊ธฐ๋ฐ˜ ์ธ์ฆ๊ณผ ํ† ํฐ ๊ธฐ๋ฐ˜ ์ธ์ฆ์„ ๋น„๊ตํ•ด์„œ ์„ค๋ช…ํ•ด ์ฃผ์„ธ์š”.

yyezzzy 2024. 10. 12. 01:43

์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธํ•˜๋Š” ๋ฐฉ๋ฒ• ์ค‘ session ๊ธฐ๋ฐ˜ ์ธ์ฆ, token ๊ธฐ๋ฐ˜ ์ธ์ฆ(JWT)์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ณ  ๊ฐ๊ฐ ์ฐจ์ด์ ์ด ๋ญ”์ง€ ์‚ดํŽด๋ณด์ž ๐Ÿง


1๏ธโƒฃ ์„ธ์…˜ ๊ธฐ๋ฐ˜ ์ธ์ฆ

๊ฐœ๋…
์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธํ•˜๋ฉด ์„œ๋ฒ„๋Š” ๊ณ ์œ ํ•œ ์„ธ์…˜ ID๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ์„œ๋ฒ„์˜ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅํ•˜๊ณ , ํ•ด๋‹น ์„ธ์…˜ ID๋ฅผ ํด๋ผ์ด์–ธํŠธ์— ์ฟ ํ‚ค ํ˜•ํƒœ๋กœ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.
์ดํ›„ ํด๋ผ์ด์–ธํŠธ๋Š” ์„œ๋ฒ„์— ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ ์ด ์„ธ์…˜ ID๋ฅผ ํฌํ•จํ•˜์—ฌ ์ „์†กํ•ฉ๋‹ˆ๋‹ค.

์„ธ์…˜ ๊ธฐ๋ฐ˜ ์ธ์ฆ ๊ณผ์ •

์œ„ ๊ทธ๋ฆผ์—์„œ 3๋‹จ๊ณ„๋Š” ์„œ๋ฒ„๊ฐ€ ์„ธ์…˜ ID๋ฅผ ์ฟ ํ‚ค ํ˜•ํƒœ๋กœ ํด๋ผ์ด์–ธํŠธ์— ๋ณด๋‚ธ๋‹ค. ํด๋ผ์ด์–ธํŠธ๋Š” ์ด ์„ธ์…˜ ID ์ฟ ํ‚ค๋ฅผ ์ €์žฅํ•œ๋‹ค.

4๋‹จ๊ณ„๋Š” ๋ธŒ๋ผ์šฐ์ €๋Š” ์ดํ›„ ๋ชจ๋“  ์š”์ฒญ๋งˆ๋‹ค ์ €์žฅํ•œ ์„ธ์…˜ ID ์ฟ ํ‚ค๋ฅผ ์ž๋™์œผ๋กœ ์„œ๋ฒ„์— ํฌํ•จํ•ด ๋ณด๋ƒ…๋‹ˆ๋‹ค. ์„œ๋ฒ„๋Š” ์ด ์„ธ์…˜ ID๋ฅผ ํ†ตํ•ด ์œ ์ €๋ฅผ ์‹๋ณ„ํ•˜๊ณ , ์ธ์ฆ๋œ ์ƒํƒœ์ž„์„ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

์ดํ›„ 5๋‹จ๊ณ„์—์„œ ์œ ์ € ์ธ์ฆ ํ›„, 6๋‹จ๊ณ„์—์„œ๋Š” ์„œ๋ฒ„๊ฐ€ HTTP ์‘๋‹ต์„ ๋ณด๋‚ผ ๋•Œ ์„ธ์…˜ ID๋ฅผ Set-Cookie ํ—ค๋”์— ํฌํ•จ๋˜์–ด ์ „๋‹ฌ
HTTP/1.1 200 OK
Content-Type: application/json
Set-Cookie: sessionId=abc123; HttpOnly; Secure; Path=/; Max-Age=3600

โ–ธ Set-Cookie โ€ข ์„ธ์…˜ ID๊ฐ€ sessionId=abc123๋กœ ์„ค์ •๋˜์–ด ๋ธŒ๋ผ์šฐ์ €์— ์ €์žฅ๋ฉ๋‹ˆ๋‹ค.

โ–ธ HttpOnly โ€ข ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ด ์ฟ ํ‚ค์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋„๋ก ์„ค์ •, ๋ณด์•ˆ์„ ๊ฐ•ํ™”ํ•ฉ๋‹ˆ๋‹ค.

โ–ธ Secure โ€ข HTTPS ์—ฐ๊ฒฐ์—์„œ๋งŒ ์ „์†ก๋ฉ๋‹ˆ๋‹ค.

โ–ธ Path=/ โ€ข ์ด ์ฟ ํ‚ค๊ฐ€ ์–ด๋А ๊ฒฝ๋กœ์—์„œ ์œ ํšจํ•œ์ง€ ์„ค์ •.

โ–ธ Max-Age โ€ข ์ฟ ํ‚ค์˜ ์œ ํšจ ๊ธฐ๊ฐ„์„ ์ดˆ ๋‹จ์œ„๋กœ ์„ค์ • 

 


์„ธ์…˜ ๊ธฐ๋ฐ˜ ์ธ์ฆ์˜ ์žฅ์ ๊ณผ ๋‹จ์ 

์žฅ์  - ๋ณด์•ˆ์ด ๊ฐ•ํ•˜๋‹ค

์„ธ์…˜ ๋ฐ์ดํ„ฐ๋Š” ์„œ๋ฒ„์— ์ €์žฅ๋˜๋ฏ€๋กœ, ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ๋ณ€์กฐ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.

์„œ๋ฒ„์—์„œ ์„ธ์…˜ ์ •๋ณด๋ฅผ ์ง์ ‘ ๊ด€๋ฆฌํ•˜๋ฏ€๋กœ, ๋ฏผ๊ฐํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ ํด๋ผ์ด์–ธํŠธ์— ์ €์žฅ๋˜์ง€ ์•Š๊ณ  ์•ˆ์ „ํ•˜๊ฒŒ ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ๋ณด์•ˆ์ด ์ค‘์š”ํ•œ ์€ํ–‰ ์›น์‚ฌ์ดํŠธ, ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋‹จ์  - ์„œ๋ฒ„ ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ

์„œ๋ฒ„ ๋ฉ”๋ชจ๋ฆฌ์— ์„ธ์…˜ ์ •๋ณด๋ฅผ ์ €์žฅํ•ด์•ผ ํ•˜๋ฏ€๋กœ, ์ ‘์†ํ•˜๋Š” ์œ ์ €๊ฐ€ ๋งŽ์•„์งˆ์ˆ˜๋ก ์„œ๋ฒ„์˜ ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ๋Ÿ‰์ด ๋Š˜์–ด๋‚ฉ๋‹ˆ๋‹ค.

๋Œ€๊ทœ๋ชจ ํŠธ๋ž˜ํ”ฝ ํ™˜๊ฒฝ์—์„œ ์„œ๋ฒ„ ๋ถ€ํ•˜๊ฐ€ ์ฆ๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 


2๏ธโƒฃ ํ† ํฐ ๊ธฐ๋ฐ˜ ์ธ์ฆ (JWT)

๊ฐœ๋…
์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธํ•˜๋ฉด ์„œ๋ฒ„๋Š” ํ† ํฐ(JWT)์„ ์ƒ์„ฑํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ์— ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.
ํด๋ผ์ด์–ธํŠธ๋Š” ์ด ํ† ํฐ์„ 
๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€๋‚˜ ์„ธ์…˜ ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅํ•˜๊ณ , ์ดํ›„ ์š”์ฒญ ์‹œ๋งˆ๋‹ค ํ† ํฐ์„ ํ—ค๋”์— ํฌํ•จํ•˜์—ฌ ์„œ๋ฒ„์— ์ „์†กํ•ฉ๋‹ˆ๋‹ค.

ํ† ํฐ ๊ธฐ๋ฐ˜ ์ธ์ฆ ๊ณผ์ •

์œ„ ๊ทธ๋ฆผ 2๋‹จ๊ณ„์—์„œ ์ƒ์„ฑ๋œ JWT๋ฅผ ํฌํ•จํ•œ HTTP ์‘๋‹ต์˜ ํ˜•์‹

HTTP/1.1 200 OK
Content-Type: application/json

{
  "token": "your.jwt.token.here"
}

 


ํ† ํฐ ๊ธฐ๋ฐ˜ ์ธ์ฆ์˜ ์žฅ์ ๊ณผ ๋‹จ์ 

์žฅ์  - ๊ด€๋ฆฌ ์šฉ์ด์„ฑ

ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ์ฟ ํ‚ค๋ฅผ ์ž๋™์œผ๋กœ ๋ณด๋‚ด๋ฏ€๋กœ ํ† ํฐ ๊ด€๋ฆฌ๋ฅผ ๊ฐ„ํŽธํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ex) ๋กœ๊ทธ์ธ๋œ ๊ธฐ๊ธฐ ๊ด€๋ฆฌ

๋‹จ์  - ๋ณด์•ˆ ์œ„ํ—˜

์ฟ ํ‚ค์— ๋ฏผ๊ฐํ•œ ์ •๋ณด๊ฐ€ ํฌํ•จ๋˜๋ฉด *CSRF(Cross-Site Request Forgery) ๊ณต๊ฒฉ์— ์ทจ์•ฝํ•ด์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

CSRF๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ธ์ฆ๋œ ์ƒํƒœ์—์„œ ๊ณต๊ฒฉ์ž๊ฐ€ ์˜๋„์น˜ ์•Š์€ ์š”์ฒญ์„ ๋ณด๋‚ด๋Š” ๋ฐฉ์‹์œผ๋กœ, ์‚ฌ์šฉ์ž ์ •๋ณด๋ฅผ ํƒˆ์ทจํ•  ์œ„ํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค.

 


ํ† ํฐ ๊ธฐ๋ฐ˜ ์ธ์ฆ์˜ ์‚ฌ์šฉ ์˜ˆ์‹œ

โ–ธ RESTful API - GitHub API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž ๋ฆฌํฌ์ง€ํ† ๋ฆฌ ๋ชฉ๋ก์„ ๊ฐ€์ ธ์˜ค๋Š” ์š”์ฒญ. ์‚ฌ์šฉ์ž๋Š” ์ธ์ฆ ํ›„ JWT๋ฅผ ํ—ค๋”์— ํฌํ•จํ•˜์—ฌ API์— ์ ‘๊ทผํ•ฉ๋‹ˆ๋‹ค.

โ–ธ Single Page Applications (SPAs) 

โ–ธ Mobile Applications - ์ฃผ๋กœ ํ•ญ๊ณต์‚ฌ ์•ฑ์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธํ•œ ํ›„, JWT๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์˜ˆ์•ฝ ์ •๋ณด๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ์ฒดํฌ์ธํ•  ๋•Œ ์„œ๋ฒ„์— ์š”์ฒญํ•ฉ๋‹ˆ๋‹ค.

โ–ธ OAuth 2.0 - ๊ตฌ๊ธ€ ์•„์ด๋””๋‚˜ ์นด์นด์˜คํ†ก์˜ ๊ฐ„ํŽธ ์†Œ์…œ ๋กœ๊ทธ์ธ

 


๐Ÿ“Œ ์ฐจ์ด์  ์š”์•ฝ

  ์„ธ์…˜ ๊ธฐ๋ฐ˜ ์ธ์ฆ ํ† ํฐ ๊ธฐ๋ฐ˜ ์ธ์ฆ (JWT)
์ €์žฅ ์œ„์น˜ ์„œ๋ฒ„ ๋ฉ”๋ชจ๋ฆฌ์— ์„ธ์…˜ ์ €์žฅ ํด๋ผ์ด์–ธํŠธ ๋กœ์ปฌ/์„ธ์…˜ ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅ
์ƒํƒœ ๊ด€๋ฆฌ ์„œ๋ฒ„๊ฐ€ ์ƒํƒœ๋ฅผ ์ €์žฅ ์„œ๋ฒ„๊ฐ€ ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜์ง€ ์•Š์Œ
๋ณด์•ˆ ์„ธ์…˜ ์ •๋ณด๊ฐ€ ์„œ๋ฒ„์— ์žˆ์–ด ๋ณด์•ˆ์„ฑ์ด ๋†’์Œ ํ† ํฐ์ด ํƒˆ์ทจ๋˜๋ฉด ์œ„ํ—˜
ํ™•์žฅ์„ฑ ์„œ๋ฒ„ ๋ฉ”๋ชจ๋ฆฌ ๋ถ€๋‹ด์ด ์ปค์ง ์„œ๋ฒ„ ๋ถ€ํ•˜๊ฐ€ ์ ๊ณ  ํ™•์žฅ์„ฑ ๋†’์Œ