secure web messaging in html5

20
Krishna Chaitanya T Microsoft MVP, Internet Explorer Secure Web Messaging in HTML5 @novogeek MUGH Developer Day 29 th Jan, 2012

Upload: krishna-t

Post on 27-May-2015

2.549 views

Category:

Technology


4 download

TRANSCRIPT

Page 1: Secure web messaging in HTML5

Krishna Chaitanya TMicrosoft MVP, Internet Explorer

Secure Web Messaging in HTML5

@novogeek

MUGH Developer Day

29th Jan, 2012

Page 2: Secure web messaging in HTML5

CommunicationTraditional data exchange & drawbacks

HTML5How the new Web Messaging API helps

SecuritySolved problems & new concerns

Case study of few Mashups

Understanding their technical limitations

Quick overview: JavaScript, Ajax, Browser Sandbox, SOP, Frames, Navigation policies, Fragment Identifier

Why there is a need for a new specification for web based messaging,

Reduced scope for XSS

Improved trust model

Newer security concerns

Counter measures

Web 2.0A quick overview of new needs of Web 2.0 era

Agenda

Page 3: Secure web messaging in HTML5

A mashup with widgets

PageFlakes.com

Page 4: Secure web messaging in HTML5

An interactive mashup

HousingMaps.com

Page 5: Secure web messaging in HTML5

Embedding Remote JS

Assumption - script is from trusted source

No isolation of origins

Runs in the context of window

Has complete access to DOM

Can read & export your data

No user involvement needed

“A mashup is a self-inflicted XSS attack”

-Douglas Crockford,Inventor of JSON

Page 6: Secure web messaging in HTML5

Same Origin Policy

Browser has to isolate different origins

Origin = protocol://host:port Ex: http://bing.com, http://localhost:81/, https://icicibank.com

Privileges within origin Full network access Read/Write access to DOM Storage

Embedded scripts have privileges of imported page, NOT source server

AJAX calls to cross domains fail due to SOP.

Page 7: Secure web messaging in HTML5

Same Origin Policy in action!

Demo

Page 8: Secure web messaging in HTML5

Isolation with Frames Different security contexts for different origins

Brings modularity but less interactive than embedding JS

No standard communication mechanism

Comply with SOP - Run remote code safely

<!-- This is allowed --> <iframe src="sameDomainPage.html"> </iframe> alert(frames[0].contentDocument.body); //works fine

<!-- This is **NOT** allowed --> <iframe src="http://crossDomain.com"> </iframe> alert(frames[0].contentDocument.body); //throws error

Page 9: Secure web messaging in HTML5

Frame Navigation Beware! Frames can be navigated to different origins!

Frame-Frame relationships Can script in Frame A modify DOM of Frame B? Can Script in Frame A “navigate” or change the origin of Frame B?

Frame navigation is NOT the same as SOP - often mistaken!

<iframe src=“http://crossDomain.com"> </iframe>

<!-- This is **NOT** allowed --> alert(frames[0].src); //throws error – SOP restriction

<!-- This is allowed --> alert(frames[0].src=“http://bing.com”); //works fine - frame navigation

Page 10: Secure web messaging in HTML5

Cross-Window Attack!

Courtesy: Stanford Web Security Lab

awglogin

window.open("https://attacker.com/", "awglogin");

Page 11: Secure web messaging in HTML5

Same-Window attack!

Courtesy: Stanford Web Security Lab

top.frames[1].location = "http://www.attacker.com/...";top.frames[2].location = "http://www.attacker.com/...";

...

Page 12: Secure web messaging in HTML5

Frame Navigation Policies

Permissive

Child

Descendant

Window

Page 13: Secure web messaging in HTML5

Frame Communication

Page 14: Secure web messaging in HTML5

Fragment Identifier Messaging Work around before HTML5

Limited data, no acknowledgements.

Navigation doesn’t reload page

Not a secure channel.

//Sender.htmlfunction send(){ iframe.src=“http://localhost/receiver.html#data”; }//Receiver.htmlwindow.onload=function(){ data=window.location.hash;}

Page 15: Secure web messaging in HTML5

HTML5 Post Message API

Cross-origin client side communication

Network-like channel between frames

Securely abstracts multiple principals

Frames can now integrate widgets with improved trust

Page 16: Secure web messaging in HTML5

HTML5 Post Message API

targetOrigin can be a trusted source or wild card [“*”]

//Posting message to a cross domain partner.frames[0].postMessage(“Hello Partner!”, "http://localhost:81/");

//Retrieving message from the senderwindow.onmessage = function (e) { if (e.origin == 'http://localhost') { //sanitize and accept data }};

Syntax: otherwindow.postMessage(message, targetOrigin);

Page 17: Secure web messaging in HTML5

Few security considerations Do not configure target origin to “*”.

Sensitive data can be leaked to unknown widgets

Always check for sender’s origin Client side DoS attacks can be launched

Always validate data before use. Do not consume data directly with eval() or innerHTML Follow best practices of DOM based XSS prevention

Eavesdropping with framing attacks! In spite of above checks, data can still be lost Ex: Recursive Mashup attack Follow frame busting techniques

Page 18: Secure web messaging in HTML5

Playing with HTML5 Post Message API

Bonus (if time permits) – Recursive Mashup Attack!

Demo

Page 19: Secure web messaging in HTML5

References & Reading “Secure Frame Communication in Browsers”-Adam Barth,

Collin Jackson, John Mitchell-Stanford Web Security Research Lab

W3C HTML5 Web Messaging Specification - http://dev.w3.org/html5/postmsg/#authors

Dive into HTML5 – http://diveintohtml5.info

IE9 Guide for Developers - http://msdn.microsoft.com/en-us/ie/hh410106.aspx

Page 20: Secure web messaging in HTML5

Thank You!

http://novogeek.com | @novogeek

http://mugh.net