๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Front-end/Browser

Client - Server : SOP์™€ CORS

by ciocio 2021. 9. 10.

๐Ÿ“Œ  SOP? (Same Origin Policy)

 

๋™์ผ ์ถœ์ฒ˜ ์ •์ฑ…์œผ๋กœ, ํ•˜๋‚˜์˜ Origin์—์„œ ๋กœ๋“œ๋œ ๋ฌธ์„œ๋‚˜ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋‹ค๋ฅธ Origin์˜ ์ž์›๊ณผ ์ƒํ˜ธ์ž‘์šฉํ•˜์ง€ ๋ชปํ•˜๋„๋ก ์ œํ•œํ•˜๋Š” ๊ฒƒ.

 

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

โœ”  URL Scheme (http, https ... etc URL SCHEME ์ข…๋ฅ˜ ์ฐธ๊ณ )
โœ”  Hostname [NodeName] (localhost, ๋‚ด ๋ธ”๋กœ๊ทธ ๊ธฐ์ค€ -> code-designer)
โœ”  port (3000, 8080 ...)

 

์˜ˆ์ „์—๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด, ์„œ๋ฒ„์—์„œ ํ•ด๋‹นํ•˜๋Š” ๋กœ์ง์„ ์ˆ˜ํ–‰ํ•œ ๋’ค "HTML์„ ์™„์„ฑ์‹œ์ผœ ๋ฐ˜ํ™˜"ํ•ด์คฌ๋‹ค.

์ฆ‰, ํ•˜๋‚˜์˜ ์„œ๋ฒ„(๋™์ผํ•œ Origin)์—์„œ ๋ชจ๋“  ์ž‘์—…์ด ์ˆ˜ํ–‰๋˜์—ˆ๋‹ค.

๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €์™€ ๊ต๋ฅ˜ํ•  ์ผ๋„ ์ ์—ˆ๊ณ ,

๋งŒ์•ฝ ์šฐ๋ฆฌ ์„œ๋ฒ„์™€ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์ง€ ์•Š์€ ๊ณณ์—์„œ ์š”์ฒญ์ด ๋“ค์–ด์˜ค๋ฉด ๋ณด์•ˆ์ƒ ๊ณต๊ฒฉ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๊ธฐ ๋•Œ๋ฌธ์—, SOP ์ •์ฑ…์ด ์œ ์ง€๋  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

 

 

๐Ÿ“Œ  CORS?  (Cross-Origin Resource Sharing)

 

๋‚ ๋กœ ๋‹คํ˜•ํ™”๋˜๋Š” ์›น ํŽ˜์ด์ง€๋ฅผ ๊ฐ๋‹นํ•˜๊ธฐ ์œ„ํ•ด ๋“ฑ์žฅํ•œ ๊ฒƒ์ด CORS๋‹ค. ๋ฌผ๋ก  SOP์˜ ๋‹จ์ ๋„ ์ปค๋ฒ„ํ•œ๋‹ค.

๊ต์ฐจ ์ถœ์ฒ˜ ๋ฆฌ์†Œ์Šค ๊ณต์œ  ์ •์ฑ…์œผ๋กœ, ๋‹ค๋ฅธ Origin๊ณผ ์ƒํ˜ธ์ž‘์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ์ ‘๊ทผ ๊ถŒํ•œ์„ ํ™•์ธํ•˜๊ณ , ๋ถ€์—ฌํ•˜๋Š” ๋ฐฉ์‹์˜ ๊ทœ์•ฝ์ด๋‹ค.

 

๋ง์ด ์ข€ ์–ด๋ ค์šด๋ฐ, ์‰ฝ๊ฒŒ ํ’€์–ด๋ณด์ž๋ฉด

SOP ๋ฐฉ์‹์ด ์žˆ์—ˆ๋˜ ๊ฑด ๊ฒฐ๊ตญ ๋ณด์•ˆ ๋ฌธ์ œ์˜€๋‹ค. ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•˜๊ณ  ์žˆ๋Š” ๋ธŒ๋ผ์šฐ์ € ์ด์™ธ์˜ ์ ‘๊ทผ์€ ๋งˆ์Œ๊ป ํ—ˆ์šฉํ•  ์ˆ˜ ์—†์—ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์„œ๋ฒ„์—์„œ "์ด๋Ÿฐ Origin ๋“ค์€ ์ ‘๊ทผํ•ด๋„ ๊ดœ์ฐฎ์•„" ๋ผ๋ฉฐ ๋ฏฟ์„๋งŒํ•œ Origin๋“ค์„ ์ง€์ •ํ•ด ์ค€๋‹ค๋ฉด ?! ์•ˆ์ „ํ•˜๊ฒŒ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ์ง€ ์•Š๋‚˜?!

์ฆ‰ ์„œ๋ฒ„๊ฐ€ ํ—ˆ์šฉํ•œ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ๋งŒ ์‘๋‹ตํ•  ์ˆ˜ ์žˆ๊ฒŒ๋” (์•ˆ์ „๋„ ์ฑ™๊ธฐ๊ณ  ๋‹คํ˜•์„ฑ๋„ ์ฑ™๊ธฐ๊ณ ) ๋งŒ๋“  ์ •์ฑ…์ด CORS์ธ๊ฑฐ๋‹ค ^____&

 

CORS๋Š” ์•„๋ž˜ 3๊ฐ€์ง€ ์š”์ฒญ์— ๋”ฐ๋ผ ๋‹ค๋ฅด๊ฒŒ ๋™์ž‘ํ•œ๋‹ค.

โœ”  Simple Request ( ๋‹จ์ˆœ ์š”์ฒญ )
     ** ์‚ฌ์‹ค CORS๋ฅผ ์ •์˜ํ•œ Fetch ๋ช…์„ธ๋Š” 'Simple Request'๋ผ๋Š” ์šฉ์–ด๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.**
     ** Preflight Request์™€ ๋Œ€๋น„๋˜๊ฒŒ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์ž„์˜์ ์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.**
โœ”  Preflight Request ( ์‚ฌ์ „ ์š”์ฒญ )
โœ”  Credentialed Request ( ์ธ์ฆ ์ •๋ณดๆœ‰ ์š”์ฒญ )

 

โ—พ  Simple Request 

 

 

https://ko.javascript.info/fetch-crossorigin

 

Simple Request๋ฅผ ๋ณด๋‚ด๊ธฐ ์œ„ํ•ด์„œ๋Š”, ๋ณธ ์š”์ฒญ์ด ์„œ๋ฒ„๊ฐ€ ์›ํ•˜๋Š” ๋ฉ”์„œ๋“œ์™€ ํ—ค๋”๋ฅผ ์ง€๋‹ˆ๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค.

1. ์š”์ฒญ ๋ฉ”์„œ๋“œ๊ฐ€ ์•„๋ž˜ ์ค‘ ํ•˜๋‚˜์—ฌ์•ผ ํ•œ๋‹ค.

      โœ”  GET 
      โœ”  POST 
      โœ”  HEAD 

2. ์š”์ฒญ ๋ฉ”์„œ๋“œ๊ฐ€ POST๋ผ๋ฉด, ์š”์ฒญ ๋ฉ”์„œ๋“œ์˜ Content-Type์ด ์•„๋ž˜ ์ค‘ ํ•˜๋‚˜์—ฌ์•ผ ํ•œ๋‹ค.

      โœ”  application/x-www-form-urlencoded
      โœ”  multipart/form-data
      โœ”  text/plain

3. User-Agent๊ฐ€ ์ž๋™์œผ๋กœ ์„ค์ •ํ•œ header๋‚˜
    CORS-safelisted request-header๋กœ ์ •์˜๋œ ํ—ค๋”
    ์™ธ์˜ ์ปค์Šคํ…€ ํ—ค๋”๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋œ๋‹ค. ( ์•„๋ž˜๋Š” ํ—ˆ์šฉ. ์ด์™ธ๋Š” ๊ธˆ์ง€ !! )

     ๐Ÿ“ forbidden header name  (์ˆ˜๋™์œผ๋กœ ์„ค์ • ๋ถˆ๊ฐ€)
      โœ”  Accept-Charset
      โœ”  Accept-Encoding
      โœ”  Access-Control-Request-Headers
      โœ”  Access-Control-Request-Method
      โœ”  Connection
      โœ”  Content-Length
      โœ”  Cookie
      โœ”  Cookie2
      โœ”  Date
      โœ”  DNT
      โœ”  Expect
      โœ”  Host
      โœ”  Keep-Alive
      โœ”  Origin  
      โœ”  Referer
      โœ”  TE
      โœ”  Trailer
      โœ”  Transfer-Encoding
      โœ”  Upgrade
      โœ”  Via

     ๐Ÿ“ CORS-safelisted request-header name (์ˆ˜๋™์œผ๋กœ ์„ค์ • ๊ฐ€๋Šฅ) โญโญ
      โœ”  Accept
      โœ”  Accept-Language
      โœ”  Content-Language
      โœ”  Content-Type

 

Simple Request ๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด๊ธฐ๋ž€ .. ๊ฝค ์–ด๋ ต๋‹ค. 

์ผ๋ฐ˜์ ์œผ๋กœ HTTP API๋Š” Content-Type์œผ๋กœ application/json ํƒ€์ž…์„ ๊ฐ€์ง€๋„๋ก ์„ค๊ณ„ํ•˜๊ณ , (๋ณดํ†ต JSONํ˜•์‹์œผ๋กœ ์ฃผ๊ณ ๋ฐ›์œผ๋‹ˆ)

ํ† ํฐ์„ ์ธ์ฆํ•ด์•ผํ•˜๋Š” (๋กœ๊ทธ์ธ, ๋น„๋ฐ€๋ฒˆํ˜ธ ๋“ฑ) ๊ฒฝ์šฐ์—๋Š” Authorization header๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  .. !!

์‹ค์ œ๋กœ Simple Request๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ๋˜๋Š” ๋นˆ๋„๊ฐ€ ๊ถ๊ธˆํ•˜๊ธด ํ•˜๋‹ค ใ…‹ใ…‹

 

Simple Request ๋กœ ์„œ๋ฒ„์— ์š”์ฒญ์„ ๋ณด๋‚ด๊ฒŒ ๋˜๋ฉด,

ํ•ด๋‹น Origin์˜ ํ—ˆ์šฉ ์—ฌ๋ถ€ ( Access-Control-Allow-Origin ) ๋ฅผ ๊ฒ€์‚ฌํ•œ ํ›„ ํ†ต๊ณผํ–ˆ์„ ๋•Œ

๋ธŒ๋ผ์šฐ์ €์— ์š”์ฒญ์— ๋Œ€ํ•œ ์‘๋‹ต์„ ์ „๋‹ฌํ•œ๋‹ค.

 

 

โ—พ  Preflight Request

 

 

https://ko.javascript.info/fetch-crossorigin

 

Simple Request ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๋Š” Preflight Request ๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰๋œ๋‹ค.

Preflight Request ๋Š” ์•ž์„  Simple Request์ฒ˜๋Ÿผ ๋ฐ”๋กœ ๋ณธ ์š”์ฒญ์„ ๋ณด๋‚ด์ง€ ์•Š๋Š”๋‹ค.

"๋‚ด๊ฐ€ ์ด๋Ÿฐ ๋ฉ”์„œ๋“œ, ์ด๋Ÿฐ ํ—ค๋”๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ ๋„ˆํฌ ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•ด๋„ ๋˜๊ฒ ๋‹ˆ ..?" ๋ผ๋Š” ์˜ˆ๋น„ ์š”์ฒญ์„ ๋ณด๋‚ต๊ณ 

"์Œ ๋‚˜๋Š” ์ด๋Ÿฐ ๋ฉ”์„œ๋“œ, ์ด๋Ÿฐ ํ—ค๋”๋ฅผ ํ—ˆ์šฉํ•ด. ๋„Œ ๋“ค์–ด์™€๋„ ๋˜๊ฒ ๋‹ค/์•ˆ ๋˜๊ฒ ๋‹ค." ๋“ฑ์˜ ์‘๋‹ต์„ ๋ฐ›๋Š” ํ›„ ๋ณธ ์š”์ฒญ์„ ๋ณด๋‚ธ๋‹ค.

๋‹น์—ฐํžˆ "๋„Œ ์•ˆ๋ผ" ๋ผ๋Š” ์‘๋‹ต์„ ๋ฐ›์œผ๋ฉด ๋ฐ์ดํ„ฐ ์š”์ฒญ์€ ๊ฑฐ๋ถ€๋œ๋‹ค. ํ—ˆ์šฉ๋์„ ์‹œ์—๋งŒ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

์ดํ›„ ๋ณธ ์š”์ฒญ์ด ์ˆ˜ํ–‰๋˜๋Š” ๊ณผ์ •์€ Simple Request์™€ ๋™์ผํ•˜๋‹ค.

 

Simple Request์™€ Preflight Request์˜ ๊ต๋ฅ˜ ๋ฐฉ์‹์„ ๋ณด๋ฉด ์•Œ๊ฒ ์ง€๋งŒ, ์„œ๋ฒ„์—๊ฒŒ๋Š” ๋ฉ”์„œ๋“œ์™€ ํ—ค๋”๊ฐ€ ์ •๋ง ์ค‘์š”ํ•œ ๊ฒƒ ๊ฐ™๋‹ค.

์›ํ•˜๋Š” ๋ฉ”์„œ๋“œ์™€ ํ—ค๋”๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉด ํ•ด๋‹น Origin์„ ํ—ˆ์šฉํ•˜๋Š” ์ง€ ์—ฌ๋ถ€๋งŒ ๋”ฐ์ง€๊ณ  ๋ฐ์ดํ„ฐ ๋ฐ˜ํ™˜ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค.

Preflight Request๋„ ๋ฉ”์„œ๋“œ์™€ ํ—ค๋”๋ฅผ ๊ฒ€์‚ฌํ•ด์„œ ํ—ˆ์šฉ๋˜์ง€ ์•Š์œผ๋ฉด ์‘๋‹ต์„ ๊ฑฐ๋ถ€ํ•˜๋Š” ๋กœ์ง์„ ๋ณด๋ฉฐ ์ถ”์ธกํ•  ์ˆ˜ ์žˆ๋‹ค.

 

 

โ—พ  Credentialed Request

 

์•„์ง ์จ๋ณด์ง€ ์•Š์•„์„œ ... ์‚ฌ์šฉํ•ด ๋ณธ ๋‹ค์Œ์— ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๊ฒ ๋‹ค

 

 

 

 

 

 

 

 

 

 

์ฐธ๊ณ  > request-header ์ธ์ง€ response-header ์ธ์ง€ ๋ถ„๋ณ„์„ ์ž˜ ํ•ด์•ผํ•œ๋‹ค.

 

๐Ÿ“ CORS-safelisted request-header name      

      โœ”  Accept
      โœ”  Accept-Language
      โœ”  Content-Language
      โœ”  Content-Type

 

๐Ÿ“ CORS-safelisted response-header name 

     โœ”  Cache-Control

     โœ”  Content-Language
     โœ”  Content-Length

     โœ”  Content-Type
     โœ”  Expires
     โœ”  Last-Modified
     โœ”  Pragma 

 

 

 

 

 

 

์ฐธ๊ณ  ์ž๋ฃŒ

https://ko.javascript.info/fetch-crossorigin

https://kyu9341.github.io/WEB/2020/10/24/WEB_CORS/

https://developer.mozilla.org/en-US/docs/Glossary/CORS

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Allow

https://sowells.tistory.com/170

https://fetch.spec.whatwg.org/#http-new-header-syntax

https://docs.aws.amazon.com/ko_kr/apigateway/latest/developerguide/how-to-cors.html

https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€