1. Storage and Communication with
HTML5
Zohar Arad. March 2011
zohar@zohararad.com | www.zohararad.com
Saturday, March 26, 2011 1
2. We’re going to talk about
Cross-Origin Resource Sharing
Cross-Window message passing
Persistent data storage with localStorage
Persistent data storage with SQLite
Saturday, March 26, 2011 2
4. In the good ol’ days...
We had XHR (Thank you Microsoft)
We could make requests from the client to the server
without page reload
We were restricted to the same-origin security policy - No
cross-domain requests
Saturday, March 26, 2011 4
5. This led to things like
JSONP
Flash-driven requests
Server-side proxy
Using iframes (express your frustration here)
Saturday, March 26, 2011 5
6. Thankfully,
these days are (nearly) gone
Saturday, March 26, 2011 6
8. CORS is the new AJAX
Cross-domain requests are allowed
Server is responsible for defining the security policy
Client is responsible for enforcing the security policy
Works over standard HTTP
Saturday, March 26, 2011 8
9. CORS - Client Side
var xhr = new XMLHttpRequest();
xhr.open(‘get’, ‘http://www.somesite.com/some_resource/’, true);
xhr.onload = function(){ //instead of onreadystatechange
//do something
};
xhr.send(null);
Saturday, March 26, 2011 9
11. CORS - Client Side (IE)
var xhr = new XDomainRequest();
xhr.open(‘get’, ‘http://www.somesite.com/some_resource/’);
xhr.onload = function(){ //instead of onreadystatechange
//do something
};
xhr.send();
Saturday, March 26, 2011 11
12. CORS - Client Side API
abort() - Stop request that’s already in progress
onerror - Handle request errors
onload - Handle request success
send() - Send the request
responseText - Get response content
Saturday, March 26, 2011 12
13. CORS - Access Control Flow
The client sends ‘Access-Control’ headers to the server
during request preflight
The server checks whether the requested resource is
allowed
The client checks the preflight response and decides
whether to allow the request or not
Saturday, March 26, 2011 13
14. CORS - Server Side
Use Access-Control headers to allow
Origin - Specific request URI
Method - Request method(s)
Headers - Optional custom headers
Credentials - Request credentials (cookies, SSL, HTTP
authentication (not supported in IE)
Saturday, March 26, 2011 14
15. CORS - Server Side
Access-Control-Allow-Origin: http://www.somesite.com/some_resource
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: NCZ
Access-Control-Max-Age: 84600
Access-Control-Allow-Credentials: true
Saturday, March 26, 2011 15
16. CORS - Recap
Client sends a CORS request to the server
Server checks request headers for access control
according to URI, method, headers and credentials
Server responds to client with an access control response
Client decides whether to send the request or not
Saturday, March 26, 2011 16
17. CORS - Why should you use it?
It works on all modern browser (except IE7 and Opera)
It doesn’t require a lot of custom modifications to your code
Its the new AJAX (just like the new Spock)
You can fall back to JSONP or Flash
Using CORS will help promote it
Works on Mobile browsers (WebKit)
Saturday, March 26, 2011 17
19. Posting messages between windows
We have two windows under our control
They don’t necessarily reside under the same domain
How can we pass messages from one window to the
other?
Saturday, March 26, 2011 19
20. We used to hack it away
Change location.hash
Change document.domain (if subdomain is different)
Use opener reference for popups
Throw something really heavy, really hard
Saturday, March 26, 2011 20
21. No more evil hacks
postMessage brings balance to the force
Saturday, March 26, 2011 21
22. Message passing
Evented
Sender / Receiver model
Receiver is responsible for enforcing security
Saturday, March 26, 2011 22
23. postMessage - Receiver
window.addEventListener(“message”,onMessage,false);
function onMessage(e){
if(e.origin === ‘http://www.mydomain.com’){
console.log(‘Got a message’,e.data);
}
}
Saturday, March 26, 2011 23
24. postMessage - Sender
top.postMessage(‘Hi from iframe’,
‘http://www.mydomain.com’);
Saturday, March 26, 2011 24
25. postMessage - Sending to iframes
var el = document.getElementById(‘my_iframe’);
var win = el.contentWindow;
win.postMessage(‘Hi from iframe parent’,
‘http://www.mydomain.com’);
Saturday, March 26, 2011 25
26. postMessage - Sending to popup
var popup = window.open(......);
popup.postMessage(‘Hi from iframe parent’,
‘http://www.mydomain.com’);
Saturday, March 26, 2011 26
27. When should you use it?
Browser extensions
Embedded iframes (if you must use such evil)
Flash to Javascript
Saturday, March 26, 2011 27
29. Local Storage
Persistent key / value data store
Domain-specific
Limited to 5MB per domain
Not part of request
Completely cross-platform (yes, even IE7)
Saturday, March 26, 2011 29
30. localStorage - Basics
var s = window.localStorage;
s[‘somekey’] = ‘Some Value’;
console.log(s[‘somekey’];
Saturday, March 26, 2011 30
31. localStorage - API
getItem( key ) - get an item from data store
setItem( key, value ) - save item to data store
removeItem( key ) - remove item from data store
clear() - remove all items from data store
Saturday, March 26, 2011 31
32. localStorage - API
Or you can use Javascript array notation:
var s = window.localStorage;
s.myItem = “My Value”;
delete s.myItem;
Saturday, March 26, 2011 32
33. localStorage - Internet Explorer 7
var storage = document.createElement(‘var’);
storage.style.behaviour = “url(‘#default#userData’)”;
var b = document.getElementsByTagName(‘body’)[0];
b.appendChild(storage);
Saturday, March 26, 2011 33
34. localStorage - Internet Explorer 7
//setting a value
var now = new Date();
now.setYear(now.getYear() + 1);
var expires = now.toUTCString();
storage.setAttribute(“name”,”zohar”);
storage.expires = expires;
storage.save(“my_data_store”);
Saturday, March 26, 2011 34
35. localStorage - Internet Explorer 7
//getting a value
storage.load(“my_data_store”);
var v = storage.getAttribute(“name”);
//removing a value
storage.removeAttribute(“name”);
storage.save(“my_data_store”);
Saturday, March 26, 2011 35
36. localStorage - Internet Explorer 7
See http://msdn.microsoft.com/en-us/library/ms531424
(VS.85).aspx for a complete API reference
IE7 localStorage (data persistence) is limited to 128KB
Saturday, March 26, 2011 36
37. Web Storage with SQLite
Transactional offline data store
Saturday, March 26, 2011 37
38. Web Storage
Transactional
Data-type aware
Supports complex data structures
No size limit
Works on WebKit, Opera (SQLite) and Firefox 4 (IndexedDB)
Saturday, March 26, 2011 38
39. Web Storage - Why should you use it?
Browser-specific solutions (like extensions / apps)
Mobile browsers ?
Optimized data caching for offline access (did anyone say
mobile?)
Transactional operations
Saturday, March 26, 2011 39
40. Web Storage - WebKit Example
//create a DB and connect
var name = “app_db”;
var desc = “My Application DB”;
var ver = “1.0”;
var size = 10 * 1024 * 1024; // 10MB
var db = openDatabase(name,ver,desc,size);
Saturday, March 26, 2011 40
41. Web Storage - WebKit Example
// create a table
db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE foo
(id unique, text)’);
});
Saturday, March 26, 2011 41
42. Web Storage - WebKit Example
// insert some data
db.transaction(function (tx) {
tx.executeSql(‘insert into foo (text)
values ( ? )’,[“Hi There”]);
});
Saturday, March 26, 2011 42
43. Web Storage - WebKit Example
// read some data
db.transaction(function (tx) {
tx.executeSql(‘select * from foo where id > ?’, [10],
function(tx,results){
var data = {};
for (var i = 0; i < results.rows.length; i++) {
var row = results.rows.item(i);
data[row.id] = row.text;
}
someCallback(data);
});
});
Saturday, March 26, 2011 43
44. Web Storage - WebKit Example
// handle errors
db.transaction(function (tx) {
tx.executeSql(‘select * from foo where id > ?’, [10],
function(tx,results){
//... handle success
},
function(tx, errors){
//handle errors
}
);
});
Saturday, March 26, 2011 44
45. Resources
IndexedDB
http://www.html5rocks.com/tutorials/indexeddb/todo/
https://developer.mozilla.org/en/IndexedDB/IndexedDB_primer
Web SQL - http://www.html5rocks.com/tutorials/offline/storage/
CORS - http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-
with-cross-origin-resource-sharing/
Local Storage - http://html5tutorial.net/tutorials/working-with-html5-
localstorage.html
Saturday, March 26, 2011 45
46. Demo & Questions
Download demo from http://zohararad.com/sandbox/
cors.zip
gem install padrino
padrino start
Saturday, March 26, 2011 46