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

wonjunhwang11 100 views 27 slides May 13, 2024
Slide 1
Slide 1 of 27
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27

About This Presentation

Kitworks Team Study


Slide Content

(ooo

(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

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)

000 ( 2-2. Origin 34

+ ORIHIE SIEM! ABUS Port HS BNE LESA LE

000

2-3. Origin 2a ii

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

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

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

(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]

¡MA

Ch)

https//hacker.ck

<Do>
PE

°LHE HEC” as
ZAER Si
</Do>

| 4. NER ESS 0188 Post MAL

ASIA

000 6. SOPIEIREI 012 2

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

+ xSS
+ CSRF

Cross Origin

http://hacker.ck

ASIA

HA

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

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

(000 (350° aaa

SOP 344 XI21

2. XMLHttpRequest, Fetch API IE

> 212402 Some-Origin 848 U}



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.

10. 23 224101 fat CHE CORS Bret 018%

img Bonet wet

(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

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

@OO [ 13.CORS ALIS

CORS 824101 AILt2i2

E S ©

OHI RE fe 238 21332 2 28

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

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

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

(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

(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

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

000 ( 19. COR Gal

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

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

om GF

© (| 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

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

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

Thank You : Wi
At

y
Tags