Storage and Communication with HTML5 Zohar Arad. March 2011 [email protected] | www.zohararad.com 1 Saturday, March 26, 2011
May 10, 2015
Storage and Communication with HTML5Zohar Arad. March 2011
[email protected] | www.zohararad.com
1Saturday, March 26, 2011
We’re going to talk about
Cross-Origin Resource Sharing
Cross-Window message passing
Persistent data storage with localStorage
Persistent data storage with SQLite
2Saturday, March 26, 2011
Cross-Origin Resource SharingThe evolution of XHR
3Saturday, March 26, 2011
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
4Saturday, March 26, 2011
This led to things like
JSONP
Flash-driven requests
Server-side proxy
Using iframes (express your frustration here)
5Saturday, March 26, 2011
Thankfully,these days are (nearly) gone
6Saturday, March 26, 2011
Say Hello to CORS
7Saturday, March 26, 2011
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
8Saturday, March 26, 2011
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);
9Saturday, March 26, 2011
Someone has to be different
10Saturday, March 26, 2011
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();
11Saturday, March 26, 2011
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
12Saturday, March 26, 2011
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
13Saturday, March 26, 2011
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)
14Saturday, March 26, 2011
CORS - Server SideAccess-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
15Saturday, March 26, 2011
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
16Saturday, March 26, 2011
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)
17Saturday, March 26, 2011
Cross-Window MessagingLook Ma, no hacks
18Saturday, March 26, 2011
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?
19Saturday, March 26, 2011
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
20Saturday, March 26, 2011
No more evil hackspostMessage brings balance to the force
21Saturday, March 26, 2011
Message passing
Evented
Sender / Receiver model
Receiver is responsible for enforcing security
22Saturday, March 26, 2011
postMessage - Receiver
window.addEventListener(“message”,onMessage,false);
function onMessage(e){if(e.origin === ‘http://www.mydomain.com’){ console.log(‘Got a message’,e.data);}
}
23Saturday, March 26, 2011
postMessage - Sender
top.postMessage(‘Hi from iframe’, ‘http://www.mydomain.com’);
24Saturday, March 26, 2011
postMessage - Sending to iframes
var el = document.getElementById(‘my_iframe’);
var win = el.contentWindow;
win.postMessage(‘Hi from iframe parent’, ‘http://www.mydomain.com’);
25Saturday, March 26, 2011
postMessage - Sending to popup
var popup = window.open(......);
popup.postMessage(‘Hi from iframe parent’, ‘http://www.mydomain.com’);
26Saturday, March 26, 2011
When should you use it?
Browser extensions
Embedded iframes (if you must use such evil)
Flash to Javascript
27Saturday, March 26, 2011
Local Persistent StorageGoodbye Cookies
28Saturday, March 26, 2011
Local Storage
Persistent key / value data store
Domain-specific
Limited to 5MB per domain
Not part of request
Completely cross-platform (yes, even IE7)
29Saturday, March 26, 2011
localStorage - Basics
var s = window.localStorage;
s[‘somekey’] = ‘Some Value’;
console.log(s[‘somekey’];
30Saturday, March 26, 2011
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
31Saturday, March 26, 2011
localStorage - API
Or you can use Javascript array notation:
var s = window.localStorage;s.myItem = “My Value”;
delete s.myItem;
32Saturday, March 26, 2011
localStorage - Internet Explorer 7
var storage = document.createElement(‘var’);storage.style.behaviour = “url(‘#default#userData’)”;
var b = document.getElementsByTagName(‘body’)[0];b.appendChild(storage);
33Saturday, March 26, 2011
localStorage - Internet Explorer 7
//setting a valuevar now = new Date();now.setYear(now.getYear() + 1);var expires = now.toUTCString();
storage.setAttribute(“name”,”zohar”);storage.expires = expires;storage.save(“my_data_store”);
34Saturday, March 26, 2011
localStorage - Internet Explorer 7
//getting a value
storage.load(“my_data_store”);var v = storage.getAttribute(“name”);
//removing a valuestorage.removeAttribute(“name”);storage.save(“my_data_store”);
35Saturday, March 26, 2011
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
36Saturday, March 26, 2011
Web Storage with SQLiteTransactional offline data store
37Saturday, March 26, 2011
Web Storage
Transactional
Data-type aware
Supports complex data structures
No size limit
Works on WebKit, Opera (SQLite) and Firefox 4 (IndexedDB)
38Saturday, March 26, 2011
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
39Saturday, March 26, 2011
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; // 10MBvar db = openDatabase(name,ver,desc,size);
40Saturday, March 26, 2011
Web Storage - WebKit Example
// create a table
db.transaction(function (tx) { tx.executeSql(‘CREATE TABLE foo (id unique, text)’);});
41Saturday, March 26, 2011
Web Storage - WebKit Example
// insert some data
db.transaction(function (tx) { tx.executeSql(‘insert into foo (text) values ( ? )’,[“Hi There”]);});
42Saturday, March 26, 2011
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);
});});
43Saturday, March 26, 2011
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 } );});
44Saturday, March 26, 2011
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
45Saturday, March 26, 2011
Demo & Questions
Download demo from http://zohararad.com/sandbox/cors.zip
gem install padrino
padrino start
46Saturday, March 26, 2011