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

Bleeding Edge HTML5

Paul Kinlan
This presentation demonstrated some ongoing - bleeding edge - development in html5:

• : section that can be collapsed: no extra javascript required
• : highlight portions of text
  • less javascript
  • easier for to handle
• input-tag adds support for speech-to-text input
• video & animations: check if the current tab is visible. Allows to stop a video when the tab is inactive
• a link can suggest the browser to pre-fetch the contents of links the user will likely click --> the page is pre-loaded
• intents: loosely coupling/integration of services from different websites. Cfr Android intents: an application asks a photo viewer and Android lets the user choose which one he wants.
• check online / offline status in javascript or use a callback. --> clean handling of unconnected status.
• paste of images in browser
• camera / microphone support
• full-screen support, callable from javascript (user must grant permission)
• WebRTC: real-time communication: Real time Video / audio for communication
• much better audio support

check out http://html5hacks.com