Cross Domain Access Policy solution using Cross Origin Resource sharing

  • 2,988 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,988
On Slideshare
0
From Embeds
0
Number of Embeds
17

Actions

Shares
Downloads
21
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Storage and Communication with HTML5 Zohar Arad. March 2011 zohar@zohararad.com | www.zohararad.comSaturday, 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 SQLiteSaturday, March 26, 2011 2
  • 3. Cross-Origin Resource Sharing The evolution of XHRSaturday, March 26, 2011 3
  • 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. 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) goneSaturday, March 26, 2011 6
  • 7. Say Hello to CORSSaturday, March 26, 2011 7
  • 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. 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. Someone has to be differentSaturday, March 26, 2011 10
  • 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 contentSaturday, 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 notSaturday, 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: trueSaturday, 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 notSaturday, 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
  • 18. Cross-Window Messaging Look Ma, no hacksSaturday, March 26, 2011 18
  • 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 hardSaturday, March 26, 2011 20
  • 21. No more evil hacks postMessage brings balance to the forceSaturday, March 26, 2011 21
  • 22. Message passing Evented Sender / Receiver model Receiver is responsible for enforcing securitySaturday, 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 JavascriptSaturday, March 26, 2011 27
  • 28. Local Persistent Storage Goodbye CookiesSaturday, March 26, 2011 28
  • 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 storeSaturday, 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 128KBSaturday, March 26, 2011 36
  • 37. Web Storage with SQLite Transactional offline data storeSaturday, 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 operationsSaturday, 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.htmlSaturday, March 26, 2011 45
  • 46. Demo & Questions Download demo from http://zohararad.com/sandbox/ cors.zip gem install padrino padrino startSaturday, March 26, 2011 46