2. A web application which combines content from
multiple origins to create a new service
Integrator-party combining the content
Gadget-integrated content
Provides more value add
Fun, easy to DIY. It’s all JS madness!
3.
4. Approaches
Embedding external scripts
Loading content via iframes
Requirements
Interaction
Communication
Security
Isolation of origins
Secure data exchange
5. Browser has to isolate different origins
Origin = protocol://host:port
http://bing.com, http://localhost:81/, https://icicibank.com
Privileges within origin
Full network access
Read/Write access to DOM
Storage
Scripts of one origin cannot access DOM of another
Strangely, scripts themselves are exempted from SOP!!
6. Very good interactivity
Assumption – Script is from trusted source
No isolation of origin
Embedded scripts have privileges of imported page,
NOT source server
Ads, widgets, AJAX libraries all have same rights
7. “SOP-Prevents useful things. Allows dangerous things”
“If there is script from two or more sources, the
application is not secure. Period.”
“Fundamentally, XSS is a confusion of interests”
“A mashup is a self-inflicted XSS attack!”
Douglas Crockford - JavaScript Architect, Yahoo
8. Restricting JavaScript to a subset
Object-capability security model
Idea: If an object in JavaScript has no reference to
“XMLHttpRequest” object, an AJAX call cannot be made.
Popular JavaScript subsets:
Caja (iGoogle)
FBJS (Facebook)
ADSafe (Yahoo)
Learning curve, usability issues
9. Separate security context for each origin
Less interactive than JS approach
Comply with SOP
<!-- This is allowed -->
<iframe src="sameDomainPage.html"> </iframe> //page in same origin
alert(frames[0].contentDocument.body); //works fine
<!-- This is **NOT** allowed -->
<iframe src="http://crossDomain.com"> </iframe> //page outside origin
alert(frames[0].contentDocument.body); //throws error
10. Beware! Frames can be navigated to different origins!
Frame navigation is NOT the same as SOP!
Frame-Frame relationships
Can script in Frame A modify DOM of Frame B?
Can Script in Frame A “navigate” Frame B?
<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
14. FIM=Fragment Identifier Messaging
Limited data, no acknowledgements.
Navigation doesn’t reload page
Not a secure channel
//Sender.html
function send(){
iframe.src=“http://localhost/receiver.html#data”;
}
//Receiver.html
window.onload=function(){
data=window.location.hash;
}
15. HTML5 postMessage API-the savior!
Cross-origin client side communication
Network-like channel between frames
Securely abstracts multiple principals
Frames can integrate widgets with improved trust!
16. Syntax:
otherwindow.postMessage(message, targetOrigin);
targetOrigin can be a trusted source/wildcard *“*”+
//Posting message to a cross domain partner.
frames[0].postMessage(“Hello Partner!”, "http://localhost:81/");
//Retrieving message from the sender
window.onmessage = function (e) {
if (e.origin == 'http://localhost') {
//sanitize and accept data
}
};
17. Sandbox – whitelisting restrictions on iframe content
<iframe sandbox src="http://attacker.com"></iframe>
Disable scripts, forms, popups, top navigation etc.
CORS – Access-Control-Allow-Origin
AJAX
PostMessage
CORS
18. Framed sites are susceptible to clickjacking & frame
phishing attacks
Bust frames, avoid surprises.
Left: Genuine communication
Right: Stealing data with Recursive Mashup Attack
19. References
“Secure Frame Communication in Browsers”-Adam
Barth, Collin Jackson, John Mitchell-Stanford Web
Security Research Lab
W3C HTML5 Specification -
http://www.w3.org/TR/html5/
Dive into HTML5 – http://diveintohtml5.info