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
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
320
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
AIと新時代を切り拓く。これからのSREとメルカリIBISの挑戦
0gm
0
1.3k
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
kworkdev
PRO
1
450
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
kekke_n
1
420
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
rvirus0817
1
1.4k
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
khmoryz
0
200
We Built for Predictability; The Workloads Didn’t Care
stahnma
0
140
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
daitak
1
360
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
riku_423
2
570
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
sansantech
PRO
3
1.5k
ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup
torounit
0
470
仕様書駆動AI開発の実践: Issue→Skill→PRテンプレで 再現性を作る
knishioka
2
660
登壇駆動学習のすすめ — CfPのネタの見つけ方と書くときに意識していること
bicstone
3
110
Featured
See All Featured
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
1
53
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.4k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
230
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
66
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
120
My Coaching Mixtape
mlcsv
0
48
Reality Check: Gamification 10 Years Later
codingconduct
0
2k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
117
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
55
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