Sandboxed platform using IFrames,
postMessage and localStorage
Tomás Pérez - @tomasperezv
Sandboxed platform using IFrames
Good
- Separated execution context
- Better security and privacy
- We control the release...
How expensive are IFrames?

A lot(*):

(*) http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/
Extending IFrame’s security with CSP
Sandboxed IFrame’s
<iframe sandbox="allow-scripts allow-popups" href="..."></iframe>
Cross platform application development

postMessage transfer rate
Sending: content of the message
frame.contentWindow.postMessage(message, ...);
msg [in]
Type: any
One of the following:
● ...
Security
frame.contentWindow
.postMessage(..., 'https://example.com');

window.addEventListener('message', function(messag...
Communication between browser tabs

Communication with another browser window or tab
- server side
- postMessage
- Cookies...
Is localStorage always available?
window.localStorage
localStorage.setItem('key', 'value')
Storage
DOMException
constructo...
Third party security considerations and localStorage
localStorage locks
The UI Thread is stopped for some operations
Firefox and Chrome wait until the first read is requested,...
Cross platform application development

localStorage locks

http://calendar.perfplanet.com/2012/is-localstorage-performanc...
localStorage notifications via the storage event
window.addEventListener('storage', function() {}, false);

The event chan...
Can we trigger the event manually?
var evt = document.createEvent('StorageEvent');
evt.initStorageEvent('storage', ...);
w...
Cross platform application development

localStorage communication strategies
Options:
A) Create a new item every time, bu...
Notification delay
Chrome ~2 milliseconds
IE10 ~34 milliseconds
Performance improvements
Prefetch / Prerender
●

●

Rendering pages
<link rel="prerender" href="...">
Fetching static reso...
Cross platform application development

Potential improvements
Batching postMessages
Webworkers
Upcoming SlideShare
Loading in...5
×

Sandboxed platform using IFrames, postMessage and localStorage

1,472

Published on

Sandboxed platform using IFrames, postMessage and localStorage

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,472
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sandboxed platform using IFrames, postMessage and localStorage

  1. 1. Sandboxed platform using IFrames, postMessage and localStorage Tomás Pérez - @tomasperezv
  2. 2. Sandboxed platform using IFrames Good - Separated execution context - Better security and privacy - We control the release process Bad - More difficult communication - IFrames are expensive
  3. 3. How expensive are IFrames? A lot(*): (*) http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/
  4. 4. Extending IFrame’s security with CSP Sandboxed IFrame’s <iframe sandbox="allow-scripts allow-popups" href="..."></iframe>
  5. 5. Cross platform application development postMessage transfer rate
  6. 6. Sending: content of the message frame.contentWindow.postMessage(message, ...); msg [in] Type: any One of the following: ● JavaScript primitive, such as a string ● object ● Array ● ... (*)[object Object]
  7. 7. Security frame.contentWindow .postMessage(..., 'https://example.com'); window.addEventListener('message', function(messageEvt) { if (messageEvt.origin === 'https://valid-domain.com') { ... } });
  8. 8. Communication between browser tabs Communication with another browser window or tab - server side - postMessage - Cookies - localStorage
  9. 9. Is localStorage always available? window.localStorage localStorage.setItem('key', 'value') Storage DOMException constructor: StorageConstructor code: 22 length: 0 constructor: DOMExceptionConstructor message: "QUOTA_EXCEEDED_ERR: DOM Exception 22"
  10. 10. Third party security considerations and localStorage
  11. 11. localStorage locks The UI Thread is stopped for some operations Firefox and Chrome wait until the first read is requested, then load all the items
  12. 12. Cross platform application development localStorage locks http://calendar.perfplanet.com/2012/is-localstorage-performance-a-problem/
  13. 13. localStorage notifications via the storage event window.addEventListener('storage', function() {}, false); The event change is only emitted when the values actually change: use a timestamp if needed. {key: 'command', value: 'play', timestamp: 1373021690574}
  14. 14. Can we trigger the event manually? var evt = document.createEvent('StorageEvent'); evt.initStorageEvent('storage', ...); window.dispatchEvent(evt); Yes...although not to communicate between different windows.
  15. 15. Cross platform application development localStorage communication strategies Options: A) Create a new item every time, but remove it once it’s received. B) New item, don't remove once it’s received, instead do it regularly. C) Reuse always the same item (use timestamp)
  16. 16. Notification delay Chrome ~2 milliseconds IE10 ~34 milliseconds
  17. 17. Performance improvements Prefetch / Prerender ● ● Rendering pages <link rel="prerender" href="..."> Fetching static resources <link rel="prefetch" href="...">
  18. 18. Cross platform application development Potential improvements Batching postMessages Webworkers
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×