Relaxing the Same Origin Policy

Unlocking cross-‐domain communication RomaJS 23 april 2014

@netamorfose – www.marcoloche.com – [email protected]

An open system for browsing, sharing and including resources

¡  A mechanism to enforce data conﬁdentiality and integrity.
¡  Pages of the same origin can manipulate each other's DOM ¡  Extended to other aspects : HTTP Cookies, XMLHttpRequest

¡  "origin" of a URI is speciﬁed in RFC 6454,
Section 4. §  http://tools.ietf.org/html/rfc6454 ¡  For HTML5 §  http://www.w3.org/TR/html5/browsers.html#origin ¡  trusted === {scheme, host, port}

¡  http://www.example.com/index.html ¡  http://www.example.com/content/ page2.html ¡  http://user:[email protected]/data/ data.js

§  http://www.example.com/index.html ¡  Different port §  http://www.example.com:81/content/page2.html
¡  Different protocol §  https://www.example.com/content/page2.html ¡  Different Host : exact matching needed §  http://api.example.com/content/page2.html §  http://example.com/content/page2.html

Deal with the policy! ¡  document.domain property
¡  Cross-‐document messaging ¡  JSONP ¡  Cross-‐Origin Resource Sharing

The store site needs to acces some values deﬁned
in www site http://www.site1.local http://store.site1.local http://www.site1.local:3000/unrelaxed.html

http://www.site1.local:3000/relaxed.domain.html <!DOCTYPE html>! ! <html>! <head>! <title>Site
1 - Unrelaxed</title>! <script>! var sensitiveValue = "SENSITIVE VALUE!”;! </script>! </head>! <body>! <h1>WWW Site 1</h1>! <p>This page demonstrate normal Same Origin Policy</p>! <iframe src="http:// store.site1.local:3000/index.html" name="store" style="height:400px"></ iframe>! </body>! </html>! http:///store.site1.local:3000/relaxed.domain.html <!DOCTYPE html>! ! <html>! <head>! <title>Store Site 1</title>! </head>! <script>! function readInfo() {! alert('Accessing from '+location.host +' to a sensitive value ' + parent.sensitiveValue);! }! document.domain = 'site1.local';! </script>! <body>! <h1>Store Site 1</h1>! <input type="button" value="Read info" onclick="readInfo()">! </body>! </html>!

document.domain = 'site1.local';! http://www.site1.local:3000/relaxed.domain.html

¡  All modern browsers support document.domain! ¡  BUT
§  Only for DOM Access, not for XHR §  Only if applications share the same SLD §  Can be interferred by other application in same SLD (invoice.site1.local) §  It’s a read/write property once given the access §  Do not use it in shared hosting (as w3c.org says!)

SENDER otherWindow.postMessage(! message, ! targetOrigin, ! [transfer]);! ! RECEIVER
window.addEventListener(! !"message", ! !receiveMessage, ! !false); ! function receiveMessage(event) {! if (event.origin !== "http://example.org") ! !// DO STUFF HERE WITH event.data}!

! ! function readInfo() {! parent.window.postMessage(! 'Give me
sensitive value', ! 'http://www.site1.local:3000');! }! http://store.local:3000/relaxed.message.html

sensitiveValue = "SENSITIVE VALUE!";! ! function receiver(event) {! if
(event.origin == 'http://store.site1.local:3000’){! if (event.data == 'Give me sensitive value') {! event.source.postMessage(! ! sensitiveValue, event.origin);! alert(sensitiveValue);! }! }! }! window.addEventListener('message', receiver);! http://www.site1.local:3000/relaxed.message.html

¡  www.caniuse.com/x-‐doc-‐messaging ¡  BETTER: §  2 actors contract
§  tabs/window communication ¡  BUT §  Only for DOM Access, not for XHR §  Risky if you don’t check origin §  Risky if you don’t check the expected data format §  It’s still a draft

A web app which needs to access a REST
API http://www.site1.local http://api.site2.local GET !/messages!

JSONP relies on SOP relaxing for <script>! ! <script !
type="text/javascript" ! src="http://api.site2.local:3000/messages? callback=handleJsonp">! </script>! Equivalent to : ! <script type="text/javascript”>! !handleJsonp({ /** remote json data */ });! </script>!

JSONP relies on SOP relaxing for <script>! ! <script !
type="text/javascript" ! src="http://api.site2.local:3000/messages? callback">! </script>! Equivalent to : ! <script type="text/javascript”>! ! { /** remote json data */ };! </script>!

¡  It’s allowed by SOP ¡  Server must manage
the GET parameter callback to generate the response ! ¡  COOL: §  Supported by jQuery (with extended features) ▪  http://api.jquery.com/jquery.getjson/ §  Supported by ExpressJS ▪  res.jsonp(object);! ¡  BUT §  Not secure : browsers accept arbitrary JS. §  Incomplete : only GET

A web app which needs to access a REST
API http://www.site1.local http://api.site2.local GET !/messages! ! POST !/messages!

¡  W3C Speciﬁcation (16 january 2014) ¡  Enable true
cross domain communication for JavaScript application ¡  Build on top of the XHR

¡  CORS is handled by browser and must
be managed by server

¡  Simple CORS request available for §  HEAD
§  GET §  POST

CORS Request GET /cors HTTP/1.1 ! Origin: http://www.site1.local! Host:
api.site2.local ! Accept-Language: en-US ! Connection: …! User-Agent: …! ! CORS Response Access-Control-Allow-Origin: http://www.site1.local! Access-Control-Allow-Credentials: true ! Content-Type: text/html; charset=utf-8!

¡  Complex CORS request §  HTTP verbs :
PUT or DELETE §  Content-‐Type §  Custome Headers ¡  Preﬂight request + actual request

Preﬂight CORS Request OPTIONS /cors HTTP/1.1 ! Origin: http://www.site1.local!
Access-Control-Request-Method: PUT ! Access-Control-Request-Headers: X-Custom-Header! Host: api.site2.local ! Accept-Language: en-US ! Connection: …! User-Agent: …! ! Preﬂight CORS Response Access-Control-Allow-Origin: http://www.site1.local! Access-Control-Allow-Methods: GET, POST, PUT ! Access-Control-Allow-Headers: X-Custom-Header! Access-Control-Max-Age: 3600! Content-Type: text/html; charset=utf-8!

ActualCORS Request PUT /cors HTTP/1.1 ! Origin: http://www.site1.local! Host:
api.site2.local ! X-Custom-Header: value! Accept-Language: en-US ! Connection: …! User-Agent: … ! Actual CORS Response Access-Control-Allow-Origin: http://www.site1.local! Content-Type: text/html; charset=utf-8!

Client side: ¡  Request Object Wrapper’s Nicolas Zakas
¡  jQuery Server side: ¡  ExpressJs has a cors module

You must!

¡  Yes some : ¡  Limitations with IE, fully
supported by IE >= 10 ¡  http://caniuse.com/cors ¡  Security

¡  http://www.w3.org/TR/DOM-‐Level-‐2-‐HTML/ html.html#ID-‐2250147 ¡  http://dev.w3.org/html5/postmsg/ ¡  http://www.json-‐p.org/
¡  http://www.w3.org/TR/cors/

¡  http://en.wikipedia.org/wiki/Cross-‐ origin_resource_sharing ¡  https://code.google.com/p/browsersec/wiki/ Part2#Standard_browser_security_features ¡  http://powerofcommunity.net/poc2008/
kuza55.pdf ¡  http://www.html5rocks.com/en/tutorials/ cors/ ¡  http://enable-‐cors.org/

§  GO §  Fork §  Play
! §  Open issues for comments and tak https://github.com/marco-‐loche/RomaJS-‐SameOriginPolicyTalk

¡  Intrested ? I’m looking for Javascripter ¡  join
me @capturator §  Send me your linkedin proﬁle §  Send me your github proﬁle

¡  @netamorfose ¡  http://it.linkedin.com/in/marcoloche ¡  www.marcoloche.com

Relaxing the Same Origin Policy

Relaxing the Same Origin Policy

More Decks by Marco Loche

Other Decks in Programming

Featured

Transcript