$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CORS - Cross-Origin Resource Sharing
Search
Sander van Zoest
June 05, 2012
Technology
1
180
CORS - Cross-Origin Resource Sharing
Introduction to CORS for the San Diego JavaScript gruop
Sander van Zoest
June 05, 2012
Tweet
Share
More Decks by Sander van Zoest
See All by Sander van Zoest
Continuous Delivery in Test
svanzoest
0
310
Stay C.A.L.M.S.: A local company's journey into DevOps
svanzoest
4
1.3k
Graphite: Scalable Real-time Graphing
svanzoest
1
290
Opscode Chef
svanzoest
0
92
Other Decks in Technology
See All in Technology
MapKitとオープンデータで実現する地図情報の拡張と可視化
zozotech
PRO
1
120
AI時代の開発フローとともに気を付けたいこと
kkamegawa
0
2.1k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
11
390k
今からでも間に合う!速習Devin入門とその活用方法
ismk
1
430
著者と読み解くAIエージェント現場導入の勘所 Lancers TechBook#2
smiyawaki0820
12
5.9k
Lambdaの常識はどう変わる?!re:Invent 2025 before after
iwatatomoya
0
300
日本Rubyの会の構造と実行とあと何か / hokurikurk01
takahashim
4
930
EM歴1年10ヶ月のぼくがぶち当たった苦悩とこれからへ向けて
maaaato
0
270
pmconf2025 - 他社事例を"自社仕様化"する技術_iRAFT法
daichi_yamashita
0
780
Kubernetes Multi-tenancy: Principles and Practices for Large Scale Internal Platforms
hhiroshell
0
110
グレートファイアウォールを自宅に建てよう
ctes091x
0
140
eBPFとwaruiBPF
sat
PRO
4
2.5k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Making the Leap to Tech Lead
cromwellryan
135
9.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.1k
How to Think Like a Performance Engineer
csswizardry
28
2.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
How to train your dragon (web standard)
notwaldorf
97
6.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Designing for humans not robots
tammielis
254
26k
Building Applications with DynamoDB
mza
96
6.8k
How to Ace a Technical Interview
jacobian
280
24k
Transcript
Cross-Origin Resource Sharing Sander van Zoest San Diego JS, June
5th, 2012 © Copyright 2012 OneHealth Solutions, Inc http://sander.vanzoest.com/ http://www.linkedin.com/in/svanzoest http://github.com/svanzoest http://gplus.to/svanzoest
Same-Origin Policy (SOP) • Central Security Concept • They prevent
a script hosted at one origin from reading or writing to the DOM of another. • Origin - <protocol>://<domain>:<port> © Copyright 2012 OneHealth Solutions, Inc 9/19/13 2
What about Cross-Origin? • JSONP - Error handling tricky -
Authentication primarily via cookies • Proxy Requests via the Server - Extra overhead of a server • Message Passing via iFrames - Cumbersome and confusing • CORS - Made to solve this mess © Copyright 2012 OneHealth Solutions, Inc 9/19/13 3
Cross-Origin Resource Sharing • Similar to Flash’s crossdomain.xml but more
granular. - Per request control - Managed by Application, not Systems • Supports all REST HTTP Methods - Such as PUT, DELETE • Better Error Handling • Plays nice with Authentication Methods © Copyright 2012 OneHealth Solutions, Inc 9/19/13 4
Simple Requests • Request only uses GET or POST. -
If POST is used to send data to the server, the Content-Type of the data sent to the server with the HTTP POST request is one of • application/x-www-form-urlencoded, • multipart/form-data • text/plain. • Does not set custom HTTP Headers • Otherwise, you need to preflight the request © Copyright 2012 OneHealth Solutions, Inc 9/19/13 5
Preflight Request 1. send an HTTP OPTIONS request - in
order to determine whether the actual request is safe to send. © Copyright 2012 OneHealth Solutions, Inc 9/19/13 6 OPTIONS /resources/post-here/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 … Origin: http://foo.example Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER
Preflight Request 2. server responds - in order to determine
whether the actual request is safe to send. © Copyright 2012 OneHealth Solutions, Inc 9/19/13 7 HTTP/1.1 200 OK Date: Mon, 04 June 2012 01:15:39 GMT Server: Apache/2.4.0 (Unix) Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: X-PINGOTHER Access-Control-Max-Age: 1728000 … Content-Length: 0 Content-Type: text/plain
Preflight Request 3. Actual request happens - Now that we
have permission, we make the true call. © Copyright 2012 OneHealth Solutions, Inc 9/19/13 8 POST /resources/post-here/ HTTP/1.1 Host: bar.other … X-PINGOTHER: pingpong Content-Type: text/xml; charset=UTF-8 Referer: http://foo.example/examples/preflight.html Content-Length: 55 Origin: http://foo.example Pragma: no-cache Cache-Control: no-cache <?xml version="1.0"?><person><name>Arun</name></person>
Potential Security Concerns • Universal Allow: • Site-level Cross Origin
Access: • Access-control decision based on Origin header: • Origin Header Can Easily Be spoofed, - like the Referrer Header • Prolonged caching of Preflight responses • Misplaced-trust • Processing rogue COR © Copyright 2012 OneHealth Solutions, Inc 9/19/13 9
Resources • http://enable-cors.org • http://www.w3.org/TR/cors/ • http://arunranga.com/examples/access-control/ • http://code.google.com/p/html5security/wiki/ CrossOriginRequestSecurity
• https://developer.mozilla.org/en/http_access_control • http://dev.opera.com/articles/view/dom-access-control-using-cross- origin-resource-sharing/ • http://html5security.org/ • http://html5sec.org/ © Copyright 2012 OneHealth Solutions, Inc 9/19/13 10
p.s. We are hiring! http://www.onehealth.com/about/careers/ http://www.onehealth.com/ © Copyright 2012 OneHealth
Solutions, Inc 9/19/13 11