Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Same origin policy

2,105 views

Published on

Same origin policy with JSONP and CORS

Published in: Technology
  • Be the first to comment

Same origin policy

  1. 1. JSONP & CORS Same origin policy
  2. 2. Same origin policy(SOP) <ul><li>Document loaded from different origin are isolated each other </li></ul><ul><li>Same origin  same transfer protocal,same host and same port </li></ul><ul><li>Example, http://myapp.com/dir/page.html </li></ul>Different host Failure http://otherapp.com/dir/other.html Different port Failure http://myapp.com:81/dir/etc.html Different protocol Failure https://myapp.com/secure.html   Success http://myapp.com/dir/inner/another.html   Success http://myapp.com/dir2/other.html Reason Outcome URL
  3. 3. Error due to SOP <ul><li>Uncaught exception: Access to restricted URI denied, xhr.open(‘GET’, http://otherapp.com) </li></ul><ul><li>Permission denied to get property Window.document, iFrame.contentWindow.document.body.innerHtml </li></ul>
  4. 4. JSONP(JSON with Padding) <ul><li>Mould both request to response </li></ul><ul><li>Cross site callbacks </li></ul><ul><li>Example, </li></ul><ul><li>Client, http://myapp.com </li></ul><ul><li><script src=http://otherapp.com?jsonp=callbackfn/> </li></ul><ul><li>function callbackfn(result){ </li></ul><ul><li>alert(result.x+” “+result.y) </li></ul><ul><li>} </li></ul><ul><li>Server, http://otherapp.com </li></ul><ul><li>Public void get(){ </li></ul><ul><li>str callback = request.get(“jsonp”) </li></ul><ul><li>response.write(callback+”{x:10,y:20}”) </li></ul><ul><li>} </li></ul>
  5. 5. CORS <ul><li>Request header,Origin: http://myapp.com </li></ul><ul><li>Response header, Access-Control-Allow-Origin:* </li></ul><ul><li>Preflight request(POST) </li></ul><ul><li>Request header, </li></ul><ul><li>origin: http://myapp.com </li></ul><ul><li>Access-Control-Request-Method: POST </li></ul><ul><li>Access-Control-Request-Header: x-header </li></ul><ul><li>Response header, </li></ul><ul><li>Access-Control-Allow-Origin: http://myapp.com </li></ul><ul><li>Access-Control-Request-Method: POST </li></ul><ul><li>Access-Control-Request-Header: x-header </li></ul><ul><li>Access-Control-Max-Age: 6000 </li></ul>
  6. 6. Document.domain <ul><li>http://myapp.com:6666 </li></ul><ul><li>http://myapp.com:9999 </li></ul><ul><li>document.domain = myapp.com </li></ul><ul><li>Same origin checks will get satisfied </li></ul>
  7. 7. Thank you

×