OWASP BeNeLux 2012: Secure Web Integration Patterns in the Era of HTML5 - John Wilander

Old / classic web integration patterns to avoid same-origin restrictions: do NOT use it anymore (security / manageability issues)

• crafted <img /> tag
• JSONP (Json "Padding")
  • JS wiring of 2 domains with callback
  • JQuery calls JSONP "Crossdamain
  • blind trustassociation
  • check the origin
• document.domain
  • change in both script providers to same common part

New HTML5 web integration patterns:

• CORS: Cross Origin Resource Sharing
  • Ajax + header: Access-Control-Allow-Origin: allowed.domain.com
  • explicit cookie sharing with xhr.withCredentials = true
  • special headers:
    • setRequestHeader
    • ! check "origin" header on servers (whitelist based)!
• Sandboxed iframe
  • iframe tag +  sandbox
  • optional & explicit features: allow-same-origin, allow-scripts, allow-forms
  • ideal to isolate legacy web apps, even served from the same domain
• postMessage:
  • textbased message channels between 2 domains
  • whitelist checks
  • keep handle of windows -> communiction between windows (tabs...)
  • combine postMessage + sandboxed IFrames to integrate legacy webapps with new HTML5 apps: limits risks to iframe.

Demo's: OWASP One-Liners