Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
120
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
190
Stay C.A.L.M.S.: A local company's journey into DevOps
svanzoest
4
1.2k
Graphite: Scalable Real-time Graphing
svanzoest
1
270
Opscode Chef
svanzoest
0
85
Other Decks in Technology
See All in Technology
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
240
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
オブジェクト指向宗教史
tanakahisateru
13
12k
大規模データとの戦い方
knih
1
460
OpenTelemetry実践 はじめの一歩
taxin
0
310
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2k
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
20
4k
Cloud Deploy と仲良くなりたい
phaya72
1
100
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
16
3.2k
Featured
See All Featured
Building Applications with DynamoDB
mza
88
5.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Designing with Data
zakiwarfel
94
4.8k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Making Projects Easy
brettharned
106
5.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
57
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Typedesign – Prime Four
hannesfritz
36
2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
The Invisible Side of Design
smashingmag
293
49k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
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