Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Relaxing the Same Origin Policy

Relaxing the Same Origin Policy

The Same Origin Policy is an important security layer for browsers, but in some case we need to deal with it and find a way to relax it.
This presentation describes 4 "standard" techniques to enable cross domain communication.

Presentation given to the RomaJS community in april 2014 (www.romajs.org)
Related source code with examples and playground available at https://github.com/marco-loche/RomaJS-SameOriginPolicyTalk

86db2617dad3a827499c0bc0a253ea63?s=128

Marco Loche

April 23, 2014
Tweet

More Decks by Marco Loche

Other Decks in Programming

Transcript

  1. Unlocking  cross-­‐domain  communication   RomaJS   23  april  2014  

  2. @netamorfose  –  www.marcoloche.com  –  marco@marcoloche.com  

  3. An  open  system  for  browsing,   sharing  and  including  resources

     
  4. None
  5. ¡  A  mechanism  to  enforce  data  confidentiality   and  integrity.

      ¡  Pages  of  the  same  origin  can  manipulate   each  other's  DOM   ¡  Extended  to  other  aspects  :  HTTP  Cookies,   XMLHttpRequest  
  6. ¡  "origin"  of  a  URI  is  specified  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}  
  7. ¡  http://www.example.com/index.html   ¡  http://www.example.com/content/ page2.html   ¡  http://user:pwd@www.example.com/data/ data.js

     
  8. §  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  
  9. None
  10. Deal  with  the  policy!     ¡  document.domain  property  

    ¡  Cross-­‐document  messaging   ¡  JSONP   ¡  Cross-­‐Origin  Resource  Sharing  
  11. The  store  site  needs  to   acces  some  values  defined

      in  www  site     http://www.site1.local   http://store.site1.local   http://www.site1.local:3000/unrelaxed.html    
  12. http://www.site1.local:3000/relaxed.domain.html     <!DOCTYPE html>! <!--www.site1.local UNRELAXED-->! <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>! <!--store.site1.local-->! <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>!
  13. document.domain = 'site1.local';!  http://www.site1.local:3000/relaxed.domain.html    

  14. ¡  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!)  
  15. 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}!
  16.     ! ! function readInfo() {! parent.window.postMessage(! 'Give me

    sensitive value', ! 'http://www.site1.local:3000');! }! http://store.local:3000/relaxed.message.html    
  17.   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    
  18. ¡  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  
  19.   A  web  app  which  needs  to  access  a  REST

     API   http://www.site1.local   http://api.site2.local   GET !/messages!
  20. 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>!  
  21. 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>!  
  22. ¡  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  
  23.   A  web  app  which  needs  to  access  a  REST

     API   http://www.site1.local   http://api.site2.local   GET !/messages! ! POST !/messages!
  24. ¡  W3C  Specification  (16  january  2014)   ¡  Enable  true

     cross  domain  communication  for   JavaScript  application   ¡  Build  on  top  of  the  XHR  
  25. ¡  CORS  is  handled   by  browser  and   must

     be   managed  by   server  
  26. ¡  Simple  CORS  request  available  for   §  HEAD  

    §  GET   §  POST  
  27. 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!
  28. ¡  Complex  CORS  request     §  HTTP  verbs  :

     PUT  or  DELETE   §  Content-­‐Type     §  Custome  Headers   ¡  Preflight  request  +  actual  request  
  29. Preflight  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: …! ! Preflight  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!
  30. 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!
  31. Client  side:   ¡  Request  Object  Wrapper’s  Nicolas  Zakas  

    ¡  jQuery     Server  side:   ¡  ExpressJs  has  a  cors  module  
  32.   You  must!  

  33. ¡  Yes  some  :   ¡  Limitations  with  IE,  fully

      supported  by    IE  >=  10   ¡  http://caniuse.com/cors   ¡  Security  
  34. ¡  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/  
  35. ¡  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/    
  36. §  GO       §  Fork   §  Play

     !   §  Open  issues  for  comments  and  tak     https://github.com/marco-­‐loche/RomaJS-­‐SameOriginPolicyTalk    
  37. ¡  Intrested  ?  I’m  looking  for  Javascripter   ¡  join

     me  @capturator   §  Send  me  your  linkedin  profile   §  Send  me  your  github  profile  
  38. ¡  @netamorfose   ¡  http://it.linkedin.com/in/marcoloche   ¡  www.marcoloche.com