Storage and Communication with            HTML5            Zohar Arad. March 2011            zohar@zohararad.com | www.zoh...
We’re going to talk about                  Cross-Origin Resource Sharing                  Cross-Window message passing    ...
Cross-Origin Resource Sharing            The evolution of XHRSaturday, March 26, 2011                    3
In the good ol’ days...                  We had XHR (Thank you Microsoft)                  We could make requests from the...
This led to things like                  JSONP                  Flash-driven requests                  Server-side proxy  ...
Thankfully,                           these days are (nearly) goneSaturday, March 26, 2011                                ...
Say Hello to CORSSaturday, March 26, 2011        7
CORS is the new AJAX                  Cross-domain requests are allowed                  Server is responsible for defining...
CORS - Client Side             var xhr = new XMLHttpRequest();             xhr.open(‘get’, ‘http://www.somesite.com/some_r...
Someone has to be differentSaturday, March 26, 2011                  10
CORS - Client Side (IE)             var xhr = new XDomainRequest();             xhr.open(‘get’, ‘http://www.somesite.com/s...
CORS - Client Side API                  abort() - Stop request that’s already in progress                  onerror - Handl...
CORS - Access Control Flow                  The client sends ‘Access-Control’ headers to the server                  durin...
CORS - Server Side                  Use Access-Control headers to allow                           Origin - Specific request...
CORS - Server Side            Access-Control-Allow-Origin: http://www.somesite.com/some_resource            Access-Control...
CORS - Recap                  Client sends a CORS request to the server                  Server checks request headers for...
CORS - Why should you use it?                  It works on all modern browser (except IE7 and Opera)                  It d...
Cross-Window Messaging            Look Ma, no hacksSaturday, March 26, 2011             18
Posting messages between windows                  We have two windows under our control                  They don’t necess...
We used to hack it away                  Change location.hash                  Change document.domain (if subdomain is dif...
No more evil hacks            postMessage brings balance to the forceSaturday, March 26, 2011                             ...
Message passing                  Evented                  Sender / Receiver model                  Receiver is responsible...
postMessage - Receiver            window.addEventListener(“message”,onMessage,false);            function onMessage(e){   ...
postMessage - Sender            top.postMessage(‘Hi from iframe’,                            ‘http://www.mydomain.com’);Sa...
postMessage - Sending to iframes            var el = document.getElementById(‘my_iframe’);            var win = el.content...
postMessage - Sending to popup            var popup = window.open(......);            popup.postMessage(‘Hi from iframe pa...
When should you use it?                  Browser extensions                  Embedded iframes (if you must use such evil) ...
Local Persistent Storage            Goodbye CookiesSaturday, March 26, 2011               28
Local Storage                  Persistent key / value data store                  Domain-specific                  Limited ...
localStorage - Basics            var s = window.localStorage;            s[‘somekey’] = ‘Some Value’;            console.l...
localStorage - API                  getItem( key ) - get an item from data store                  setItem( key, value ) - ...
localStorage - API            Or you can use Javascript array notation:            var s = window.localStorage;           ...
localStorage - Internet Explorer 7            var storage = document.createElement(‘var’);            storage.style.behavi...
localStorage - Internet Explorer 7            //setting a value            var now = new Date();            now.setYear(no...
localStorage - Internet Explorer 7            //getting a value            storage.load(“my_data_store”);            var v...
localStorage - Internet Explorer 7                  See http://msdn.microsoft.com/en-us/library/ms531424                  ...
Web Storage with SQLite            Transactional offline data storeSaturday, March 26, 2011                      37
Web Storage                  Transactional                  Data-type aware                  Supports complex data structu...
Web Storage - Why should you use it?                  Browser-specific solutions (like extensions / apps)                  ...
Web Storage - WebKit Example            //create a DB and connect            var            name = “app_db”;            va...
Web Storage - WebKit Example            // create a table            db.transaction(function (tx) {              tx.execut...
Web Storage - WebKit Example            // insert some data            db.transaction(function (tx) {              tx.exec...
Web Storage - WebKit Example            // read some data            db.transaction(function (tx) {              tx.execut...
Web Storage - WebKit Example            // handle errors            db.transaction(function (tx) {              tx.execute...
Resources                  IndexedDB                           http://www.html5rocks.com/tutorials/indexeddb/todo/        ...
Demo & Questions                  Download demo from http://zohararad.com/sandbox/                  cors.zip              ...
Upcoming SlideShare
Loading in …5
×

Cross Domain Access Policy solution using Cross Origin Resource sharing

3,926 views

Published on

html5, Ajax, JQuery, Cross Origin Resource Sharing,Cross Origin Access Policy

Published in: Technology, Business
  • Be the first to comment

Cross Domain Access Policy solution using Cross Origin Resource sharing

  1. 1. Storage and Communication with HTML5 Zohar Arad. March 2011 zohar@zohararad.com | www.zohararad.comSaturday, March 26, 2011 1
  2. 2. We’re going to talk about Cross-Origin Resource Sharing Cross-Window message passing Persistent data storage with localStorage Persistent data storage with SQLiteSaturday, March 26, 2011 2
  3. 3. Cross-Origin Resource Sharing The evolution of XHRSaturday, March 26, 2011 3
  4. 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 requestsSaturday, March 26, 2011 4
  5. 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. 6. Thankfully, these days are (nearly) goneSaturday, March 26, 2011 6
  7. 7. Say Hello to CORSSaturday, March 26, 2011 7
  8. 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 HTTPSaturday, March 26, 2011 8
  9. 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
  10. 10. Someone has to be differentSaturday, March 26, 2011 10
  11. 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. 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 contentSaturday, March 26, 2011 12
  13. 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 notSaturday, March 26, 2011 13
  14. 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. 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: trueSaturday, March 26, 2011 15
  16. 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 notSaturday, March 26, 2011 16
  17. 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
  18. 18. Cross-Window Messaging Look Ma, no hacksSaturday, March 26, 2011 18
  19. 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. 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 hardSaturday, March 26, 2011 20
  21. 21. No more evil hacks postMessage brings balance to the forceSaturday, March 26, 2011 21
  22. 22. Message passing Evented Sender / Receiver model Receiver is responsible for enforcing securitySaturday, March 26, 2011 22
  23. 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. 24. postMessage - Sender top.postMessage(‘Hi from iframe’, ‘http://www.mydomain.com’);Saturday, March 26, 2011 24
  25. 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. 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. 27. When should you use it? Browser extensions Embedded iframes (if you must use such evil) Flash to JavascriptSaturday, March 26, 2011 27
  28. 28. Local Persistent Storage Goodbye CookiesSaturday, March 26, 2011 28
  29. 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. 30. localStorage - Basics var s = window.localStorage; s[‘somekey’] = ‘Some Value’; console.log(s[‘somekey’];Saturday, March 26, 2011 30
  31. 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 storeSaturday, March 26, 2011 31
  32. 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. 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. 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. 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. 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 128KBSaturday, March 26, 2011 36
  37. 37. Web Storage with SQLite Transactional offline data storeSaturday, March 26, 2011 37
  38. 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. 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 operationsSaturday, March 26, 2011 39
  40. 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. 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. 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. 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. 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. 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.htmlSaturday, March 26, 2011 45
  46. 46. Demo & Questions Download demo from http://zohararad.com/sandbox/ cors.zip gem install padrino padrino startSaturday, March 26, 2011 46

×