re-introduction to third-party scripting

a re-introductionto third-party scripting

techtalksTOSunday, September 18, 2011

who invited this guy?

• name’s ben• former torontonian• working at disqus in san francisco

Sunday, September 18, 2011

DISQUS

• dis·cuss • dĭ-skŭs'• third-party commenting platform• customers: CNN, MLB, IGN, and other

exciting acronyms• 500 million visitors/month

third-party scripts

• js written by someone else• executing on your website• loaded from a remote server

third-party scripts

simple concept, powerful results

ad scripts

Google AdSense (http://adsense.com)

analytics

CrazyEgg (http://crazyegg.com)

embedded widgets

Disqus (http://disqus.com)

widgets cont’d

Guestlist (http://guestlistapp.com)

browser plugins

Rapportive (http://rapportive.com)

js apis/sdks

LinkedIn (http://developer.linkedin.com/javascript)

writing them != easy

• operate in unknown, uncontrolled environment

• shared DOM, globals• browser limitations• debugging remote sites is hard

the good news

it’s getting better

• new browser features• newly discovered techniques (hacks)• powerful new open source libraries• published literature?

let’s take the tour

script loading

blocking includes

• standard script includes block rendering

• giving us a bad rep!• culprit: document.write

document.write

example: github gists

embedded gists

HTML5’s async attr

async-friendly insert

async browser support

• Firefox 3.6+• Chrome 7+• Safari 5.0• IE 10 (!)• Notably absent: Opera

dynamic script creation

first impressions count

• hard to get website owners to update their script includes

• people are still using blocking disqus include (deprecated mid-2009)

• who still uses blocking GA include?

shared environment

global collisions

• unknown scripts executing on same page

• may introduce conflicting variables• DOM queries may inadvertently

select your elements (or vice versa)

namespace your js!

bonus points: html

• id=”dsq-comment-8”• class=”dsq-comment”• data-dsq-username=”jimbob”• Bad: class=”dsq-comment active”

js libs

• you should use ‘em• what if they already exist on the

$.noConflict

• utility method for assigning jQuery global ($) to a variable

• great for namespacing• becoming a standard pattern

libs w/ noConflict

• LABjs• Underscore.js• Backbone.js• Ender.js and its assoc. microlibs• easyXDM

destructive libs

sandboxing

• run your code inside a src-less iframe• clean js environment• no global state leak

twitter @anywhere

• twitter widget library• supports multiple lib versions/

instances per page• each version is sandboxed in a

separate iframe

twitter @anywhere

iframe A

iframe B

hiro.js

• QUnit-like js testing library• each test suite runs in a new iframe• optional: seed iframe environment

Hiro (http://github.com/antonkovalyov/hiro)

cross-domain ajax

• can’t initiate XmlHttpRequest from foo.com to bar.com

• same-origin policy (host, port, protocol)

• subdomains a#ected too

w/o same-origin pol.

• What if I hosted a page with the following ...

• Cross-Origin Resource Sharing• special http headers that permit XD

access to resources• W3C working draft• Firefox 3.5+, Chrome 3+, Safari 4+,

CORS headers

Cors Example (http://saltybeagle.com/cors)Sunday, September 18, 2011

• load JSON using <script> elements• script element bypasses same-origin

policy• built-in helpers in most js frameworks

JSONP example

JSONP cont’d

• only supports GET requests• script loading can’t detect 400, 500

errors (rely on timeouts)• caching complications when

generating new response each time

postMessage

• HTML5 API for cross-window communication

• works with iframes, new windows• Firefox 3+, Safari 4+, Chrome (all),

postMessagefoo.com

bar.com

iframe tunnels

foo.com

bar.com/tunnel.html bar.com/api

xhrpostMessage

easyXDM

• postMessage-like API for window objs• uses Flash, obscure transport

protocols when postMessage is n/a• wider browser support• Disqus, Twitter, Scribd, LinkedIn ...

easyXDM (http://easyxdm.net)

debugging

how do you debug this mess?

switches

• serve unminified js for specific sites, users*

proxies

• send all http tra$c to a proxy server• rewrite production urls• from widget.com to ...• localhost• staging.widget.com• newfeature.staging.widget.com

wrapping up

thanks

• @bentlegen• disqus is hiring js/python/django

in san francisco• (canadians welcome)• book coming early 2018

re-introduction to third-party scripting

Technology

third-party network devices with scripting service in the...

third party process

third party license

third-party custody

third party submission

third party trust

third-party ecosystem: why rethink third-party risk? ·...

third party information security principles -...

third party right

party with third party final

third party monitoring

third party act

private equity club simplification presentation ·...

a re-introduction to third-party scripting

third party operations

third party ownership

third party

third-party network devices with scripting service in the...

manage third-party gadgets · upload third-party gadgets...

third party supplier