CORS

hyyyynjnยท2021๋…„ 6์›” 21์ผ
0
post-thumbnail

โœ…Origin

Origin(์ถœ์ฒ˜)
ํŠน์ • ํŽ˜์ด์ง€์— ์ ‘๊ทผํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋Š” URL์˜ Scheme(ํ”„๋กœํ† ์ฝœ), host(๋„๋ฉ”์ธ), ํฌํŠธ๋ฅผ ๋งํ•œ๋‹ค.

  • same-origin : scheme(ํ”„๋กœํ† ์ฝœ), host(๋„๋ฉ”์ธ), ํฌํŠธ๊ฐ€ ๊ฐ™๋‹ค๋Š” ๋ง
  • cross-origin : ์ด 3๊ฐ€์ง€ ์ค‘ ํ•˜๋‚˜๋ผ๋„ ๋‹ค๋ฅธ ๊ฒฝ์šฐ

๐Ÿ“Œ์˜ˆ์‹œ

  1. https://localhost
  2. http://localhost:80
  3. http://127.0.0.1
  4. http://localhost/api/cors
    ์—์„œ 2,4๋ฒˆ๋งŒ ๊ฐ™์€ ์ถœ์ฒ˜์ด๋‹ค.
  • 1๋ฒˆ ๐Ÿ‘‰ ํ”„๋กœํ† ์ฝœ์ด https์ด๋‹ค
  • 2,4๋ฒˆ ๐Ÿ‘‰ ํ”„๋กœํ† ์ฝœ http, ํ˜ธ์ŠคํŠธ localhost, ํฌํŠธ 80 ์ด ๋™์ผํ•˜๋ฏ€๋กœ ๋™์ผ์ถœ์ฒ˜์ด๋‹ค. (4๋ฒˆ์—์„œ path/api/cors๋Š” ์ถœ์ฒ˜ํŒ๋‹จ์— ์˜๋ฏธ์—†๋Š” ์ •๋ณด์ด๋‹ค)
  • 3๋ฒˆ ๐Ÿ‘‰ ํ˜ธ์ŠคํŠธ 127.0.0.1์˜ ip๋Š” localhost๊ฐ€ ๋งž์ง€๋งŒ, ๋ธŒ๋ผ์šฐ์ €๋Š” ํ˜ธ์ŠคํŠธ ์ •๋ณด์˜ String Value๋งŒ์œผ๋กœ ๋น„๊ตํ•˜๊ธฐ๋•Œ๋ฌธ์— localhost์™€ ๋‹ค๋ฅธ ์ถœ์ฒ˜๋ผ ์—ฌ๊ธด๋‹ค

โœ…SOP

SOP(Same Origin Policy)
๋‹ค๋ฅธ ์ถœ์ฒ˜์˜ ๋ฆฌ์†Œ์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ์ œํ•œํ•˜๋Š” ๋ณด์•ˆ ๋ฐฉ์‹

๐Ÿ“ŒSOP ๋ฐฉ์‹

  1. ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์Šค๋ถ์— ๋กœ๊ทธ์ธ ๐Ÿ‘‰ ์ธ์ฆํ† ํฐ์„ ๋ฐ›๋Š”๋‹ค
  2. ํ•ด์ปค๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ http://hacker.ck ๋งํฌ๋ฅผ ๋ณด๋‚ธ๋‹ค
  3. ์‚ฌ์šฉ์ž๋Š” http://hacker.hk ๋งํฌ๋ฅผ ๋ˆ„๋ฅธ๋‹ค ๐Ÿ‘‰ ์ž์‹ ์˜ ํŽ˜์ด์Šค๋ถ ์ธ์ฆ ํ† ํฐ์„ ์•ฝํƒˆ๋‹นํ•œ๋‹ค
  4. http://hacker.hk ๋งํฌ๋ฅผ ํ†ตํ•ด ํŽ˜์ด์Šค๋ถ ํฌ์ŠคํŠธ ๊ฒŒ์‹œ ์š”์ฒญ์„ ํ•œ๋‹ค
  5. ํŽ˜์ด์Šค๋ถ์€ ์ž์‹ ์˜ Origin(https://www.facebook.com/)๊ณผOrigin(http://hacker.ck)๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅธ ์ถœ์ฒ˜์ž„์„ ํŒ๋‹จํ•œ๋‹ค
    ๐Ÿ‘‰ Cross Origin
    ๐Ÿ‘‰ SOP์— ์œ„๋ฐ˜๋œ๋‹ค
    ๐Ÿ‘‰ ํ•ด๋‹น ์š”์ฒญ์„ ๋ฐ›์•„๋“ค์ด์ง€ ์•Š๋Š”๋‹ค.

โœ…CORS

CORS(Cross-origin Resource Sharing)
๊ต์ฐจ ์ถœ์ฒ˜ ๋ฆฌ์†Œ์Šค ๊ณต์œ (CORS)๋Š” ์ถ”๊ฐ€ HTTP ํ—ค๋”๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ, ํ•œ ์ถœ์ฒ˜์—์„œ ์‹คํ–‰ ์ค‘์ธ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋‹ค๋ฅธ ์ถœ์ฒ˜์˜ ์„ ํƒํ•œ ์ž์›์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๊ถŒํ•œ์„ ๋ถ€์—ฌํ•˜๋„๋ก ๋ธŒ๋ผ์šฐ์ €์— ์•Œ๋ ค์ฃผ๋Š” ์ฒด์ œ์ด๋‹ค.
๐Ÿ‘‰ ๋‹ค๋ฅธ ์ถœ์ฒ˜์˜ ์ž์›์— ์ ‘๊ทผํ•œ๋‹ค๋Š” ์‚ฌ์‹ค์„ ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์•Œ๋ ค์ฃผ๋Š” ์ฒด์ œ์ด๋‹ค
๐Ÿ‘‰ ๋‹ค๋ฅธ ์ถœ์ฒ˜์˜ ๋ฆฌ์†Œ์Šค๋ฅผ ๊ณต์œ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ธ CORS๋ฅผ ์ด์šฉํ•˜์—ฌ ๋‹ค๋ฅธ ์ถœ์ฒ˜์˜ ๋ฆฌ์†Œ์Šค๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค

๐Ÿ“ŒCORS ์ ‘๊ทผ์ œ์–ด ์‹œ๋‚˜๋ฆฌ์˜ค

๐Ÿ‘Preflight Request

Preflight Request
OPTION ๋ฉ”์†Œ๋“œ๋ฅผ ํ†ตํ•ด ๋‹ค๋ฅธ ๋„๋ฉ”์ธ์˜ ๋ฆฌ์†Œ์Šค์— ๋Œ€ํ•œ ์š”์ฒญ์ด ๊ฐ€๋Šฅํ•œ์ง€ ํ™•์ธํ•œ ๋’ค, ๊ฐ€๋Šฅํ•œ ๊ฒฝ์šฐ ์‹ค์ œ ์š”์ฒญ(Actual Request)๋ฅผ ๋ณด๋‚ด๋Š” ์ž‘์—….

๐Ÿฅฆ Preflight ๊ณผ์ •

๐Ÿฅฆ Preflight Request ํฌ๋งท

OPTIONS /resources/post-here/ HTTP/1.1
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
  • 3๊ฐ€์ง€ ์ •๋ณด
    ๐Ÿ‘‰ ์š”์ฒญ ์ถœ์ฒ˜(Origin),
    ์‹ค์ œ ์š”์ฒญ์˜ ๋ฉ”์†Œ๋“œ(Access-Control-Request-Method),
    ์‹ค์ œ ์š”์ฒญ์˜ ์ถ”๊ฐ€ ํ—ค๋”(Access-Control-Request-Headers)

๐Ÿฅฆ Preflight Response ํฌ๋งท

Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
  • 4๊ฐ€์ง€ ์ •๋ณด
    ๐Ÿ‘‰ ์„œ๋ฒ„ ์ธก ํ—ˆ๊ฐ€ ์ถœ์ฒ˜(Access-Control-Allow-Origin),
    ์„œ๋ฒ„ ์ธก ํ—ˆ๊ฐ€ ๋ฉ”์†Œ๋“œ(Access-Control-Allow-Methods),
    ์„œ๋ฒ„ ์ธก ํ—ˆ๊ฐ€ ํ—ค๋”(Access-Control-Allow-Headers),
    preflight ์‘๋‹ต ์บ์‹œ ๊ธฐ๊ฐ„(Access-Control-Max-Age)
  • ์‘๋‹ต ์ฝ”๋“œ๋Š” 200๋Œ€์—ฌ์•ผ ํ•œ๋‹ค
  • ์‘๋‹ต body๋Š” ๋น„์–ด์žˆ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค

๐Ÿ‘Simple Request

Simple Request
preflight ์š”์ฒญ์—†์ด ๋ฐ”๋กœ ์š”์ฒญ์„ ๋‚ ๋ฆฐ๋‹ค.

๐Ÿฅฆ Simple Request ๊ณผ์ •

๐Ÿฅฆ Simple Request๊ฐ€ ๋งŒ์กฑํ•ด์•ผํ•˜๋Š” ์กฐ๊ฑด

  1. ์„œ๋ฒ„ ์ธก ํ—ˆ๊ฐ€ ๋ฉ”์†Œ๋“œ(Access-Control-Allow-Methods)
    ๐Ÿ‘‰ GET, POST, HEAD๋งŒ ๊ฐ€๋Šฅ
  2. ์œ ์ € ์—์ด์ „ํŠธ๊ฐ€ ์ž๋™์œผ๋กœ ์„ค์ •ํ•œ ํ—ค๋” ์™ธ์—, ์ˆ˜๋™์œผ๋กœ ์„ค์ • ๊ฐ€๋Šฅํ•œ ํ—ค๋”
    ๐Ÿ‘‰ Accept, Accept-Language, Content-Language, Content-Type ๋งŒ ํ—ˆ์šฉ
  3. Content-Type ํ—ค๋”๋กœ ํ—ˆ์šฉ๋œ ๊ฐ’
    ๐Ÿ‘‰ application/x-www-form-urlencoded, multipart/form-data, text/plain

โ“ ๊ทธ๋Ÿผ Preflight๋Š” ์™œ ํ•„์š”ํ• ๊นŒ โ“

CORS spec์ด ์ƒ๊ธฐ๊ธฐ ์ด์ „์— ๋งŒ๋“ค์–ด์ง„ ์„œ๋ฒ„๋“ค์€
๋ธŒ๋ผ์šฐ์ €์˜ SOP(same origin policy) request๋งŒ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฐ€์ •ํ•˜์— ๋งŒ๋“ค์–ด์กŒ์—ˆ๋‹ค.
cross-site request๊ฐ€ CORS๋กœ ์ธํ•ด์„œ ๊ฐ€๋Šฅํ•ด์กŒ๊ธฐ ๋–„๋ฌธ์—
์ด๋Ÿฐ ์„œ๋ฒ„๋“ค์€ cross-site request์— ๋Œ€ํ•œ security mechanism์ด ์—†๋‹ค๋ณด๋‹ˆ ๋ณด์•ˆ์ ์œผ๋กœ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธธ์ˆ˜ ์žˆ์œผ๋‹ˆ, ์ด๋Ÿฐ ๊ฒƒ๋“ค๋กœ ๋ณดํ˜ธํ•˜๊ธฐ ์œ„ํ•ด CORS spec์— preflight request๋ฅผ ํฌํ•จํ•œ ๊ฒƒ์ด๋‹ค.
๐Ÿ‘‰ Preflight request๋กœ ์„œ๋ฒ„๊ฐ€ CORS๋ฅผ ์ธ์‹ํ•˜๊ณ  ํ•ธ๋“คํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ๋จผ์ € ํ™•์ธ์„ ํ•จ์œผ๋กœ์จ CORS๋ฅผ ์ธ์‹ํ•˜์ง€ ๋ชปํ•˜๋Š” ์„œ๋ฒ„๋“ค์„ ๋ณดํ˜ธํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

๐Ÿฅฆ Preflight ์—†์ด ๋ฐ”๋กœ Actual Request๋ฅผ ๋ณด๋‚ผ ๊ฒฝ์šฐ์˜ ๋ฌธ์ œ

  • ํด๋ผ์ด์–ธํŠธ๋Š” CORS ๊ด€๋ จ ์„ค์ •์ด ์—†๋Š” ์„œ๋ฒ„์— request๋ฅผ ๋ณด๋‚ธ๋‹ค
  • ๋ธŒ๋ผ์šฐ์ €๋Š” ํด๋ผ์ด์–ธํŠธ์˜ origin (bom.com) ์ •๋ณด๋ฅผ ์„œ๋ฒ„์—๊ฒŒ ์ „๋‹ฌํ•œ๋‹ค
  • ์„œ๋ฒ„๋Š” ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•ด ๋ฐ›์€ ํด๋ผ์ด์–ธํŠธ์˜ request์— ๋งž๋Š” ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•œ๋‹ค(์‹ฌ๊ฐํ•œ ๋ฌธ์ œ)
  • ํ•˜์ง€๋งŒ ์„œ๋ฒ„๋Š” allow-origin ์ •๋ณด๊ฐ€ ์—†๋Š” response๋ฅผ ๋ธŒ๋ผ์šฐ์ €์— ๋ณด๋‚ธ๋‹ค
  • โ—โ— ๊ทธ์ œ์„œ์•ผ ๋ธŒ๋ผ์šฐ์ €์—์„œ CORS ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ๋‹ค.
  • preflight๋ฅผ ํ†ตํ•ด, ์„œ๋ฒ„์—์„œ ์˜๋„์น˜ ์•Š์€ ์ž‘์—…์ด ์ˆ˜ํ–‰๋˜๋Š” ๊ฒƒ์„ ๋ง‰์„ ์ˆ˜ ์žˆ๋‹ค

๐Ÿ‘Credentialed Request

Credentialed Request
์ธ์ฆ ๊ด€๋ จ ํ—ค๋”๋ฅผ ํฌํ•จํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์š”์ฒญ์ด๋‹ค. (์ฟ ํ‚ค, JWT ํ† ํฐ์„ ํด๋ผ์ด์–ธํŠธ์—์„œ ํ—ค๋”์— ๋‹ด์•„์„œ ์„œ๋ฒ„๋กœ ์ „๋‹ฌํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์š”์ฒญ๋ฐฉ์‹)

๐Ÿฅฆ Credentialed Request์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ์กฐ๊ฑด

  • ํด๋ผ์ด์–ธํŠธ ์ธก
    • Credentialed Request์„ ๋ณด๋‚ด๊ธฐ ์œ„ํ•ด์„œ credentials : include ์„ค์ •ํ•œ๋‹ค
  • ์„œ๋ฒ„ ์ธก
    • Credentialed Request์„ ๋ฐ›๊ธฐ ์œ„ํ•ด์„œ Accestt-Control-Allow-Credentials : true ์„ค์ •ํ•ด์•ผ ํ•œ๋‹ค.
    • Accestt-Control-Allow-Credentials : true ์„ค์ •์„ ํ•˜๋ฉด, Access-Control-Allow-Origin : *์œผ๋กœ ์„ค์ •ํ•˜๋ฉด ์•ˆ๋œ๋‹ค. ํŠน์ •ํ•œ origin์„ ์„ค์ •ํ•ด์ค˜์•ผํ•œ๋‹ค.

๐Ÿ“ข CORS ์ •์ฑ… ์œ„๋ฐ˜ ์—๋Ÿฌ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

๐Ÿ‘ํ”„๋ก ํŠธ ํ”„๋ก์‹œ ์„œ๋ฒ„ ์„ค์ •

  • ๋ธŒ๋ผ์šฐ์ €๋Š” ํด๋ผ์ด์–ธํŠธ์˜ 8081ํฌํŠธ์˜ request๋ฅผ front server์— ๋ณด๋‚ธ๋‹ค
  • front server์— proxy ์„ค์ •ํ•œ๋‹ค
    • bom.com:8081/api/~์™€ ๊ฐ™์ด path์— api๊ฐ€ ํฌํ•จ๋œ ๊ฒฝ์šฐ ํฌํŠธ๋ฒˆํ˜ธ๋ฅผ 8080์œผ๋กœ ๋ณ€๊ฒฝํ•œ๋’ค ์„œ๋ฒ„๋กœ ์š”์ฒญ์„ ์ „๋‹ฌํ•œ๋‹ค
      ๐Ÿ‘‰ ํฌํŠธ๋ฅผ 8080, 8081๋กœ ๋ฐ”๊ฟ”๊ฐ€๋ฉด์„œ requestํ•˜์ง€ ์•Š๊ณ  8081์œผ๋กœ ํ†ต์ผํ•˜์—ฌ requestํ•˜๊ธฐ ๋•Œ๋ฌธ์— CORS ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค.

๐Ÿ‘์Šคํ”„๋ง ๋ถ€ํŠธ์—์„œ ์„ค์ •

0๊ฐœ์˜ ๋Œ“๊ธ€