Origin(์ถ์ฒ)
ํน์ ํ์ด์ง์ ์ ๊ทผํ ๋ ์ฌ์ฉ๋๋ URL์ Scheme(ํ๋กํ ์ฝ), host(๋๋ฉ์ธ), ํฌํธ๋ฅผ ๋งํ๋ค.
- same-origin : scheme(ํ๋กํ ์ฝ), host(๋๋ฉ์ธ), ํฌํธ๊ฐ ๊ฐ๋ค๋ ๋ง
- cross-origin : ์ด 3๊ฐ์ง ์ค ํ๋๋ผ๋ ๋ค๋ฅธ ๊ฒฝ์ฐ
https://localhost
http://localhost:80
http://127.0.0.1
http://localhost/api/cors
https
์ด๋คhttp
, ํธ์คํธ localhost
, ํฌํธ 80
์ด ๋์ผํ๋ฏ๋ก ๋์ผ์ถ์ฒ์ด๋ค. (4๋ฒ์์ path/api/cors
๋ ์ถ์ฒํ๋จ์ ์๋ฏธ์๋ ์ ๋ณด์ด๋ค)127.0.0.1
์ ip๋ localhost
๊ฐ ๋ง์ง๋ง, ๋ธ๋ผ์ฐ์ ๋ ํธ์คํธ ์ ๋ณด์ String Value๋ง์ผ๋ก ๋น๊ตํ๊ธฐ๋๋ฌธ์ localhost
์ ๋ค๋ฅธ ์ถ์ฒ๋ผ ์ฌ๊ธด๋ค SOP(Same Origin Policy)
๋ค๋ฅธ ์ถ์ฒ์ ๋ฆฌ์์ค๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ์ ํํ๋ ๋ณด์ ๋ฐฉ์
์ฌ์ฉ์
๊ฐ ํ์ด์ค๋ถ
์ ๋ก๊ทธ์ธ ๐ ์ธ์ฆํ ํฐ์ ๋ฐ๋๋คํด์ปค
๋ ์ฌ์ฉ์
์๊ฒ http://hacker.ck
๋งํฌ๋ฅผ ๋ณด๋ธ๋ค์ฌ์ฉ์
๋ http://hacker.hk
๋งํฌ๋ฅผ ๋๋ฅธ๋ค ๐ ์์ ์ ํ์ด์ค๋ถ
์ธ์ฆ ํ ํฐ์ ์ฝํ๋นํ๋คhttp://hacker.hk
๋งํฌ๋ฅผ ํตํด ํ์ด์ค๋ถ
ํฌ์คํธ ๊ฒ์ ์์ฒญ์ ํ๋คํ์ด์ค๋ถ
์ ์์ ์ Origin(https://www.facebook.com/
)๊ณผOrigin(http://hacker.ck
)๊ฐ ์๋ก ๋ค๋ฅธ ์ถ์ฒ์์ ํ๋จํ๋คCORS(Cross-origin Resource Sharing)
๊ต์ฐจ ์ถ์ฒ ๋ฆฌ์์ค ๊ณต์ (CORS)๋ ์ถ๊ฐ HTTP ํค๋๋ฅผ ์ฌ์ฉํ์ฌ, ํ ์ถ์ฒ์์ ์คํ ์ค์ธ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ด ๋ค๋ฅธ ์ถ์ฒ์ ์ ํํ ์์์ ์ ๊ทผํ ์ ์๋ ๊ถํ์ ๋ถ์ฌํ๋๋ก ๋ธ๋ผ์ฐ์ ์ ์๋ ค์ฃผ๋ ์ฒด์ ์ด๋ค.
๐ ๋ค๋ฅธ ์ถ์ฒ์ ์์์ ์ ๊ทผํ๋ค๋ ์ฌ์ค์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์๋ ค์ฃผ๋ ์ฒด์ ์ด๋ค
๐ ๋ค๋ฅธ ์ถ์ฒ์ ๋ฆฌ์์ค๋ฅผ ๊ณต์ ํ๋ ๋ฐฉ๋ฒ์ธ CORS๋ฅผ ์ด์ฉํ์ฌ ๋ค๋ฅธ ์ถ์ฒ์ ๋ฆฌ์์ค๋ฅผ ์ฌ์ฉํ๋ค
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
๐ฅฆ 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
200
๋์ฌ์ผ ํ๋คSimple Request
preflight ์์ฒญ์์ด ๋ฐ๋ก ์์ฒญ์ ๋ ๋ฆฐ๋ค.
๐ฅฆ Simple Request ๊ณผ์
๐ฅฆ Simple Request๊ฐ ๋ง์กฑํด์ผํ๋ ์กฐ๊ฑด
- ์๋ฒ ์ธก ํ๊ฐ ๋ฉ์๋(Access-Control-Allow-Methods)
๐GET
,POST
,HEAD
๋ง ๊ฐ๋ฅ- ์ ์ ์์ด์ ํธ๊ฐ ์๋์ผ๋ก ์ค์ ํ ํค๋ ์ธ์, ์๋์ผ๋ก ์ค์ ๊ฐ๋ฅํ ํค๋
๐Accept
,Accept-Language
,Content-Language
,Content-Type
๋ง ํ์ฉ- 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
์ธ์ฆ ๊ด๋ จ ํค๋๋ฅผ ํฌํจํ ๋ ์ฌ์ฉํ๋ ์์ฒญ์ด๋ค. (์ฟ ํค, JWT ํ ํฐ์ ํด๋ผ์ด์ธํธ์์ ํค๋์ ๋ด์์ ์๋ฒ๋ก ์ ๋ฌํ ๋ ์ฌ์ฉํ๋ ์์ฒญ๋ฐฉ์)
๐ฅฆ Credentialed Request์ ์ฌ์ฉํ๊ธฐ ์ํ ์กฐ๊ฑด
- ํด๋ผ์ด์ธํธ ์ธก
Credentialed Request
์ ๋ณด๋ด๊ธฐ ์ํด์credentials : include
์ค์ ํ๋ค- ์๋ฒ ์ธก
Credentialed Request
์ ๋ฐ๊ธฐ ์ํด์Accestt-Control-Allow-Credentials : true
์ค์ ํด์ผ ํ๋ค.Accestt-Control-Allow-Credentials : true
์ค์ ์ ํ๋ฉด,Access-Control-Allow-Origin : *
์ผ๋ก ์ค์ ํ๋ฉด ์๋๋ค. ํน์ ํ origin์ ์ค์ ํด์ค์ผํ๋ค.
- ๋ธ๋ผ์ฐ์ ๋ ํด๋ผ์ด์ธํธ์ 8081ํฌํธ์ request๋ฅผ front server์ ๋ณด๋ธ๋ค
- front server์ proxy ์ค์ ํ๋ค
bom.com:8081/api/~
์ ๊ฐ์ด path์api
๊ฐ ํฌํจ๋ ๊ฒฝ์ฐ ํฌํธ๋ฒํธ๋ฅผ 8080์ผ๋ก ๋ณ๊ฒฝํ๋ค ์๋ฒ๋ก ์์ฒญ์ ์ ๋ฌํ๋ค
๐ ํฌํธ๋ฅผ 8080, 8081๋ก ๋ฐ๊ฟ๊ฐ๋ฉด์ requestํ์ง ์๊ณ 8081์ผ๋ก ํต์ผํ์ฌ requestํ๊ธฐ ๋๋ฌธ์ CORS ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์๋๋ค.