CORS (Kitworks Team Study 양다윗 발표자료 240510)

Kitworks Team Study

1. (ooo

2. (ooo (esa me Cons aman

BE: API BISSLICE.

FE: ZIABILICH

+++ (308 51)

FE : 2H API} St BOISE RIZ... ?
BE: (Postman #2! $) HIER?
FE : LocallA 2t #HOHSFXIEEI...
+. OHBDI BSS)

FE: MEINE OH SE SE HXI.?

Cross-origin-resource-sharing

3. 000 ( 2. Origin Et?

Origin(SA1)2H?

Origin

Protocol Host Port Path Query string Fragment

Ss / i /

HTTPS:// www.domain.com:3000/user?query=name&page=1 #first

+ URL2I Protocol, Host, Port 8 St 22 GNI CIE GAMA BIENES + SUCH.
+ PortDiXi= ESA 2201 (et 018 (ABS SE SAR CI ae BA)

4. 000 ( 2-2. Origin 34

+ ORIHIE SIEM! ABUS Port HS BNE LESA LE

5. 000

2-3. Origin 2a ii

URL2I 288 console.log(location.origin)® ES! BAB Y + LS

6. 3. Origin 312

http://localhost 2t 22 EH!
urle FAQ? B= 222

1. https://localhost
2. http://localhost:80
3. http:127.0.01

4. http://localhost/api/david

7. 000 [ 3-2 Origin Iz 38

http://localhost 2t 22 EH!
urle FAQ? B= 222

1 httpÉ//localhost

2. http://localhost:80

3. http:127.0.0.1 * browserdiiat DIE string ut

4. http://localhost/api/david

8. (ooo (sore

SOP (32 BA 83)

Same-Origin Policy

Same-Origin Policy

Servera. Server®

ES Beal + QE CIE BAO] ALAM ABS AO Mist She wet BA]

9. ¡MA

Ch)

https//hacker.ck

<Do>
PE

°LHE HEC” as
ZAER Si
</Do>

| 4. NER ESS 0188 Post MAL

ASIA

10. 000 6. SOPIEIREI 012 2

Origin : https://www.facebook.com/

+ xSS
+ CSRF

Cross Origin

http://hacker.ck

ASIA

HA

11. 000 á 7. Orgin Him} KEE Sate 74 SIC

AH 235 BSE 01247+ LEE MH HIS?

Browser
example .com

JavaScript Server

request
fetch(api .example.con/func) A /fune endpoint

response

errorrrrerrertt in. CLCOETEE

+ ENE WMO: SAS MON PAIE! AMO] OH SRE BIE! ABIOICE

12. 000 | = Origin0l2! Ct HE?

CORS 344 XI21

1. ime), video), (script), ink) END 5

+ él Dist ASBIE, REE! OIDIXI, AEN! AE 501 Cross-Origin SMS ZIM

13. (000 (350° aaa

SOP 344 XI21

2. XMLHttpRequest, Fetch API IE

> 212402 Some-Origin 848 U}

où

e CS Slo] 4401] Choy AFA SRE ajax RE API SBAl

Y Y ZE CSS MY LN @font-faceojlaj CHE EOIO] ZE 48 Al

+ AHASBIENIMEL RUE JENOE ME CHE EEMICION CAS! LAS Hore REIN.

14. 10. 23 224101 fat CHE CORS Bret 018%

img Bonet wet

15. (000 [cons er

(CE SHO Atel 38)

Cross-Origin Resource Sharing

CORS

Z7tHTTP dS ASSO, St SAMO Bet Sl
a ONS cIAOIMO! CHE SAO! Ast Aal BSS SUE Ast
Seem Sie MIMI

N

SES

mo

N

16. 000 [ 12.CORSIE SS

1. Bell 014) HTTP289] ACO Origins HOt AE

Browser
example.com
JavaScript Server

3, MOIRIE ON Origin MIZE UE Accass-Control~Alow= /fune endpoint
Origin Mac

2. Mbit SECO] Access-Control-Allew-Origin® Ot B2IOIAES WICH,

Con wr ol aan ses va gg ac area he EH 708
2 202 ALAN LOM 20 mau ang a

17. @OO [ 13.CORS ALIS

CORS 824101 AILt2i2

E S ©

OHI RE fe 238 21332 2 28

(Preflight Request) (Simple Request) (Credentialed Request)

18. Preflight Request
= >
E ES sis | OPTIONS 28
reso RETO O A à
— LAME AE HTTP OPTIONS ASE A ESPE BA BET,
wae sen MH HHO ON A
ms a7
Fo pre
nas ee.
rinse) ES

TES ES ES EEE

19. 000 ( 15. 041 23 21215171

+ BeOS MBE BCE
EI a0 ONIL 224(preflight) BU

— e o — ums DUE AR Be O

82 GETOIL POST] Of! OPTIONS Als UNG! 28 OME
waa ech

an M TPS 5

BAS Mu

20. (16. £18 28 (Simple Requset)

Simple Request

r - - N
[een |

a A Ga Fi ai.

0 cain te ic, A

crated on a am aus Bu
anne gee gag Hana as aan

[CAE

| te.) 7

+ BE 232 SANZ Ol QA(PrefilghS SEHD WE MO ABO E 28

21. (o © a 17. LISE! 23 (Credentialed Request)

©redentialed Request

ro

1381 QYS BOAT MHOIAI ALA 213 BW (Credential) E 40] QAR ASSIS VAOICt.

OHIA QOHE XA 93 Bw MM ID MAEIOQLE F3](Cookie) RS Authorization CIA) ABSHS EZ zt

on

ear ae
some-origin( 7182) Be #4 2 Qo IS BUS BS + Act.
include DE 28 03 AUS LES YO,

omit 28 UE BLS BA LEO,

+ 230 9151) BIE! BUS EE + AN HF SAO HE credentials BM 39M

22. OOO [ 18.2188 23 219181

B2HISEUM fetch® Cookie BO} EL}
Access-Control-Allow-Origin0ii= *& AH! + SUCH
38 SILI BEA Access-Control-Allow-Credentials: true} ZAHöh0tet

23. 000 ( 19. COR Gal

1. CORS AILS 215 ME ANOLE 2. Chrome #3 232718 018

‘Allow CORS: Access-Controt-Allow-Or.

om GF

24. © (| 20.CORS siz we

ZEA AOE 0135171

HBA (Proxy)zt BAIS MH ALOIS! 321 CHEIAOAT wei Eich

AH

\/
©
il

FE QIX BEA MH

20-0

| Ab CHO! MBIA SS DE 98 Ar ON
ETE MN FE DON

25. 000 [ 2 aor2m au we CORSA

CORS Bet #121 HOLE

eee + SOPOS Sz 010F8 IE 2144501 CORS SHOE ARE KOOL! EAN CHE tos
: + MO LIS ROO AAA 518 LEE SNE SS, HE HOMEM SRE E
+ HEA! WS ASH CHLISS 138501 ALOT AUS HE) Stew Url

BEA Cachelll 218! CORS EMI

+ Belge ODA HS NEE ealAA St! SAN SENO THEO cache HE
+ O1 SHAL JIS CHO AI BIA EE

+ CORS AA Ole48t HAI SH MRS EX] SHORE pert

yi ge Corsa MER

26. Webpack Dev Server 2IH£ 2a! 231 Is
(Beet Js)
CORSE 2IRISHL MH IBERIA RE

+

38 ICO SE Access-Control-Allow-Origin

ES
Client Side Server Side

27. Thank You : Wi
At

y