๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ’ป Computer Science/- Network

[HTTP] Cross Origin Resource Sharing, CORS๋ž€?

by Wonit 2020. 10. 9.

ํ•„์ž๊ฐ€ ๊ฐœ๋ฐœ์„ ๊ณต๋ถ€ํ•  ๋•Œ DevOps ๋ถ€๋ถ„์ด๋‚˜ Front๋‚˜ Back์—์„œ ๊ณตํ†ต์ ์œผ๋กœ ๋งˆ์ฃผํ–ˆ๋˜ ๋ฌธ์ œ ๋ช‡ ๊ฐ€์ง€๊ฐ€ ์žˆ์—ˆ๋Š”๋ฐ, CORS๋„ ๊ทธ ๋ฌธ์ œ๋“ค์— ํฌํ•จ๋œ๋‹ค.

 

์ด ๋ง์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

๋‚˜๋Š” Front ๊ฐœ๋ฐœ์ž์ธ๋ฐ CORS์— ๋Œ€ํ•ด์„œ ๋ชฐ๋ผ๋„ ๋˜๊ฒ ์ฃ ? ํ˜น์€ ๋‚œ ๊ด€๋ฆฌ ์œ ์ง€๋ณด์ˆ˜์ธ DevOps๋‹ˆ๊นŒ ๋ชฐ๋ผ๋„๋ ๊ฑฐ์•ผ ๋ผ๋Š” ์ƒ๊ฐ์„ ๋ฒ„๋ ค์•ผํ•œ๋‹ค.

 

์–ด๋””์—์„œ๋‚˜ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ์ค‘ ํ•˜๋‚˜๋กœ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์˜ ๋Œ€๋ถ€๋ถ„์€ ํ—ค๋”์™€ CORS ์ •์ฑ…์„ ์ ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์—, CORS ํ‘œ์ค€์„ ๋งž์ถ”๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ชจ๋“  ๊ฐœ๋ฐœ์ž ํ˜น์€ ๊ด€๋ฆฌ์ž๊ฐ€ ์•Œ์•„์•ผ ํ•œ๋‹ค.

 

์˜ค๋Š˜์€ ๊ทธ๊ฒŒ ์™œ ๋ฐœ์ƒํ•˜๊ณ  ์–ด๋–ค ์š”์ฒญ์ด CORS๋ฅผ ์‚ฌ์šฉํ•˜๋Š”์ง€ ๋“ฑ๋“ฑ์— ๊ด€ํ•ด ๋ฐฐ์›Œ๋ณด์ž.

CORS

CORS๋ž€ ํ˜„์žฌ Ip๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ Ip๋กœ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•˜๋Š” ๊ตฌ์กฐ๋ผ๊ณ  ์ผ๋‹จ์€ ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.

 

ํ•„์ž๊ฐ€ CORS์— ๋Œ€ํ•ด์„œ ์ž˜ ์ดํ•ด๊ฐ€ ๊ฐ€์ง€ ์•Š์•„์„œ ์—ฌ๋Ÿฌ ์„ค๋ช…์„ ์ฐพ์•„๋ณด๊ณ  ๋น„๊ตํ•ด๋ดค์ง€๋งŒ ํ•ญ์ƒ ์ฒ˜์Œ์— ๋ณด๋Š” ๋ฌธ๊ตฌ๋Š” ์œ„์—์„œ ๋ง ํ–ˆ๋˜ ๊ฒƒ์ด์—ˆ๋‹ค.

 

์ดํ•ด๊ฐ€ ์ž˜ ๊ฐ€์ง€ ์•Š์ง€๋งŒ ์ดํ•ด๋ฅผ ํ•˜๊ณ  ๋ณด๋‹ˆ ์ € ์„ค๋ช…์ด ๊ฐ€์žฅ ์„ค๋ช…ํ•˜๊ธฐ ์ข‹์€ ๋ฌธ๊ตฌ์ธ๊ฒƒ ๊ฐ™๋‹ค.

 

์šฐ๋ฆฌ๋Š” ์ด CORS์— ๋Œ€ํ•ด์„œ ์•Œ์•„๊ฐ€๊ธฐ ์œ„ํ•ด์„œ ์˜ค๋Š˜ 3๊ฐ€์ง€๋ฅผ ๋ฐฐ์šธ ๊ฒƒ์ด๋‹ค.

 

  1. Origin (Cross Origin VS Same Origin
  2. SOP
  3. Access-Control-Allow-Origin

์ € ์„ธ๊ฐ€์ง€๋ฅผ ๋ชจ๋‘๊ฐ€ CORS์— ๊ด€๋ จ๋œ ๊ฒƒ๋“ค์ด๋‹ค.

 

์ด์ œ ํ•˜๋‚˜ ํ•˜๋‚˜ ์•Œ์•„๊ฐ€ ๋ณด์ž.

1. Origin

Origin์€ ์š”์ฒญ์ด ์‹œ์ž‘๋œ ์„œ๋ฒ„์˜ ์œ„์น˜๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š”๋ฌธ๊ตฌ์ด๋‹ค.

 

๋งŒ์•ฝ ๋‚ด๊ฐ€ Naver ๋กœ๊ทธ์ธ ์„œ๋ฒ„๋กœ ๋กœ๊ทธ์ธ ์š”์ฒญ์„ ํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๋ฉด, ์•„๋งˆ ๊ณผ์ •์„ ๊ทธ๋ ค๋ณด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์„ ๊ฒƒ์ด๋‹ค.

 

์—ฌ๊ธฐ์„œ ์„œ๋ฒ„ Ip๋Š” 2๊ฐœ๊ฐ€ ์กด์žฌํ•œ๋‹ค.

  1. Client ์„œ๋ฒ„
  2. ๋กœ๊ทธ์ธ API ์„œ๋ฒ„

์ด 2๊ฐœ์˜ IP๋Š” ์„œ๋กœ ๋‹ค๋ฅธ IP์˜ ๋ฒˆํ˜ธ๋ฅผ ๊ฐ–๊ณ  ์žˆ๊ฒŒ ๋œ๋‹ค.

 

์˜ˆ๋ฅผ ๋“ค์–ด Client ์„œ๋ฒ„๋Š” http://client:80 ์ด๋ผ๊ณ  ํ•˜๊ณ  ๋กœ๊ทธ์ธ ์„œ๋ฒ„๋Š” http://login:3000/์ด๋ผ๊ณ  ํ•ด๋ณด์ž.

 

๊ทธ๋Ÿผ ์—ฌ๊ธฐ์„œ ํด๋ผ์ด์–ธํŠธ ์„œ๋ฒ„(http://client:80)๊ฐ€ ๋กœ๊ทธ์ธ ์„œ๋ฒ„(http://login:3000/)์—๊ฒŒ HTTP ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ Origin ์ด ๋‹ค๋ฅด๋‹ค๋ผ๊ณ  ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

์ด๋ฅผ Cross Origin์ด๋ผ๊ณ  ํ•˜๊ณ , ๋งŒ์•ฝ ๋กœ๊ทธ์ธ ์„œ๋ฒ„๊ฐ€ ๋‚ด๋ถ€ ํ†ต์‹ ์„(๊ทธ๋Ÿด ์ผ์€ ๋“œ๋ฌผ๊ฒ ์ง€๋งŒ) ํ•ด์„œ ์„œ๋ฒ„ ๋‚ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค๋ฉด ๊ทธ ๊ฒƒ์€ Same Origin์ด๋ผ๊ณ  ํ•œ๋‹ค.

๊ทธ๋Ÿผ ์—ฌ๊ธฐ์„œ ์–ด๋–ป๊ฒŒ Origin์„ ๊ตฌ๋ถ„ํ• ๊นŒ?

Origin์„ ๊ตฌ๋ถ„ํ•˜๋Š” ๋ฐฉ๋ฒ•

Origin์„ ๊ตฌ๋ถ„ํ•  ๋•Œ๋Š” 3๊ฐ€์ง€๋ฅผ ์ด์šฉํ•œ๋‹ค.

  1. ์Šคํ‚ค๋งˆ
  2. HOST
  3. Port

์˜ˆ๋ฅผ ๋“ค๋ฉด https://wonit.tistory:80์ด๋ผ๋Š” ๊ฒฝ๋กœ๊ฐ€ ์žˆ๋‹ค๋ฉด ์—ฌ๊ธฐ์— ์Šคํ‚ค๋งˆ, Host, Port๋ชจ๋‘๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋‹ค.

2. SOP

SOP๋Š” Same Origin Policy๋ฅผ ๋œปํ•œ๋‹ค.

 

Same Origin Policy๋ž€? 2011๋…„ RFC 6454์—์„œ ๋“ฑ์žฅํ•œ ๋ณด์•ˆ ์ •์ฑ…์œผ๋กœ ๋™์ผํ•œ ์ถœ์ฒ˜์˜ Origin๋งŒ ๋ฆฌ์†Œ์Šค๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

 

์šฐ๋ฆฌ๊ฐ€ ์ด SOP ๋•Œ๋ฌธ์— ์‚ฌ์‹ค์ƒ CORS ๋ฌธ์ œ์— ํ—ˆ๋•์ธ๋‹ค๊ณ  ํ•ด๋„ ๊ณผ์–ธ์ด ์•„๋‹ˆ๋‹ค.

 

์ด SOP ํ‘œ์ค€์— ๋”ฐ๋ผ์•ผ์ง€ XSS๋ผ๋˜์ง€ CSRF๋ผ๋Š” ๋ณด์•ˆ์ƒ์˜ Issue๋ฅผ ๋ง‰์„ ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

3. Access-Control-Allow-Origin

์ด Access-Control-Allow-Origin์€ ๋ฐ”๋กœ CORS๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๊ณ ๋งˆ์šด ๋…€์„์ด๋‹ค.

 

์šฐ๋ฆฌ๊ฐ€ SOP ์ •์ฑ…์— ๋”ฐ๋ผ์„œ ๊ฐ™์€ Origin์˜ ์ž์›๋งŒ ๊ณต์œ  ๊ฐ€๋Šฅํ•˜๋‹ค๊ณ  ํ–ˆ๋Š”๋ฐ, ๊ทธ๋Ÿผ ๋‹ค๋ฅธ Origin์—์„œ ์ž์›์ด์šฉ์„ ๋ชปํ•˜๋Š” ๊ฒƒ์ผ๊นŒ?

 

์›น์ด๋ผ๋Š” ์ƒํƒœ๊ณ„๋Š” ๋‹ค๋ฅธ ๋ฆฌ์†Œ์Šค์˜ ๊ณต์œ ๋ฅผ ์ˆ˜๋„ ์—†์ด ๋งŽ์ด ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์œ„์˜ ๋ง๋Œ€๋กœ ์ž์› ์ด์šฉ์„ ๋ชปํ•œ๋‹ค๋ฉด SOP๊ฐ€ ์‚ฌ๋ผ์กŒ๊ฑฐ๋‚˜ ์›น์ด ์‚ฌ๋ผ์กŒ๊ฑฐ๋‚˜ ๋‘˜ ์ค‘ ํ•˜๋‚˜๊ฒ ์ง€๋งŒ ์ด Access-Control-Allow-Origin ๋•๋ถ„์— ์„œ๋กœ ๋‹ค๋ฅธ Origin ์—์„œ ์ž์› ๊ณต์œ ๊ฐ€ ๊ฐ€๋Šฅํ•ด์กŒ๋‹ค.

๊ฒฐ๋ก ์ธ CORS๋Š” ์–ด๋–ป๊ฒŒ ๋™์ž‘์‹œํ‚ฌ๊นŒ?

์ด์ œ ๊ฒฐ๋ก ์œผ๋กœ ๋‹ค๋‹ค๋ž๋‹ค.

 

Cross Origin์—์„œ ์ž์›์„ ์š”์ฒญํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ณผ์ •์„ ๊ฑฐ์นœ๋‹ค.

 

  1. HTTP ํ†ต์‹  ํ—ค๋”์ธ Origin ํ—ค๋”์— ์š”์ฒญ์„ ๋ณด๋‚ด๋Š” ๊ณณ์˜ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์„œ๋ฒ„๋กœ ์š”์ฒญ์„ ๋ณด๋‚ธ๋‹ค.
  2. ์ดํ›„ ์„œ๋ฒ„๋Š” Access-Control-Allow-Originํ—ค๋”์— ํ—ˆ์šฉ๋œ Origin์ด๋ผ๋Š” ์ •๋ณด๋ฅผ ๋‹ด์•„ ๋ณด๋‚ธ๋‹ค
  3. ํด๋ผ์ด์–ธํŠธ๋Š” ํ—ค๋”์˜ ๊ฐ’๊ณผ ๋น„๊ตํ•ด ์ •์ƒ ์‘๋‹ต์ž„์„ ํ™•์ธํ•˜๊ณ  ์ง€์ •๋œ ์š”์ฒญ์„ ๋ณด๋‚ธ๋‹ค.
  4. ์„œ๋ฒ„๋Š” ์š”์ฒญ์„ ์ˆ˜ํ–‰ํ•˜๊ณ  200OK ์ฝ”๋“œ๋ฅผ ์‘๋‹ตํ•œ๋‹ค.

๋Œ“๊ธ€