cross-origin communication

unlocking the secrets






tl;dr







don't make cross-origin requests






Same Origin Policy

The S.O.P. provides...





  • Protection for server
  • Protection for clients

Since?





Netscape days
RFC 6454 - 1999?
6454 6454

Enforcement





All browsers:
  • javascript
  • *java
  • *flash

Browser Implementations






There's IE, and then there's everyone else...






Exemptions


What isn't restricted?





  • <script src="..."/>
  • <img/video src="..."/>
  • <a href="..."/>
  • form submission
  • iframe embedded pages






Restrictions & Workarounds


iframe access






Javascript cannot be used to access most iframe properties/content

workaround







HTML5 Web Messaging (window.postMessage)

Fine Uploader







  • Web Messaging (traditional endpoint)
  • 303 redirect (S3 endpoint)

Images and videos






Javascript access to properties, and the ability to export.

workarounds







  1. crossorigin attribute & Access-Control-Allow-Origin header (CORS)
  2. Proxying

Ajax requests






*Browsers will simply not send any cross-origin request

workarounds






CORS spec
JSONP

JSONP




Exploits <script src="..."> exemption
Supported in all browsers
GET only



CORS





Allows for cross-origin ajax requests:
  • servers must opt-in
  • full support in all modern browsers
  • IE9/8 have partial support
  • no support for IE7 & older

Modern browsers & "simple" CORS




  • XMLHttpRequest
  • methods: GET, POST, HEAD
  • headers: Accept, Accept-Language, Content-Language, Content-Type
  • Content-Type: text/plain, application/x-www-form-urlencoded, multipart/form-data
  • request includes an Origin header
  • response must include an Access-Control-Allow-Origin header
  • response optionally includes Access-Control-Expose-Headers

Old browsers & "simple" CORS




  • XDomainRequest
  • IE 8-9
  • methods: GET, POST, HEAD
  • cannot send ANY headers!
  • request includes an Origin header
  • response must include an Access-Control-Allow-Origin header
  • no access to response headers
  • no access to response status

Modern browsers & "non-simple" CORS


  • browser-preflighted XMLHttpRequest
  • methods: DELETE, PUT
  • or GET/POST w/ non-simple headers or Content-Type
  • browser "preflights" request (OPTIONS) w/ Origin, Access-Control-Request-Method, & Access-Control-Request-Headers headers
  • server must respond with Access-Control-Allow-Origin, Access-Control-Allow-Methods, & Access-Control-Allow-Headers headers
  • browser then sends the original request w/ Origin header
  • server must respond w/ Access-Control-Allow-Origin header

    • Old browsers & "non-simple" CORS






    Not supported, but workarounds available for some cases:
    • DELETE/PUT method -> POST w/ _method param

    Other





    cross-origin communication

    By Ray Nicholus

    Made with Slides.com

    cross-origin communication

    • 2,515

    More from Ray Nicholus