Frontloaded and zipped up - the full frontal keynote

59
Frontloaded and zipped up. Do loose types sink ships? Chris7an Heilmann, Full Frontal, Brighton, 20th of November 2009

description

The keynote of the Full Frontal JavaScript conference held in Brighton, England talking about the security issues of JavaScript and how to work around them with Caja and server-side solutions.

Transcript of Frontloaded and zipped up - the full frontal keynote

Page 1: Frontloaded and zipped up - the full frontal keynote

Frontloadedandzippedup.Doloosetypessinkships?

Chris7anHeilmann,FullFrontal,Brighton,20thofNovember2009

Page 2: Frontloaded and zipped up - the full frontal keynote

Aquicklookbackin7me...

Page 3: Frontloaded and zipped up - the full frontal keynote

Bringonthebling!

h"p://www.flickr.com

/pho

tos/dancen

tury/207

2499

619/

Page 4: Frontloaded and zipped up - the full frontal keynote

Morebling!

h"p://www.flickr.com

/pho

tos/kidp

erez/320

4305

300/

Page 5: Frontloaded and zipped up - the full frontal keynote

vargright=120vargbo"om=40varn=(document.layers)?1:0;varie=(document.all)?1:0;funcLonmakeObj(obj,nest){ nest=(!nest)?'':'document.'+nest+'.' this.css=(n)?eval(nest+'document.'+obj):eval(obj+'.style') this.moveIt=b_moveIt;}funcLonb_moveIt(x,y){ this.x=x;this.y=y this.css.leX=this.x this.css.top=this.y}varpageWidth,pageHeightfuncLongeoInit(){ oTest=newmakeObj('divBo"om') pageWidth=(ie)?document.body.offsetWidth‐4:innerWidth; pageHeight=(ie)?document.body.offsetHeight‐2:innerHeight; checkIt() //setstheresizehandler. onresize=resized if(ie)window.onscroll=checkIt;}funcLoncheckIt(){ if(ie)oTest.moveIt(document.body.scrollLeX+pageWidth‐gright,document.body.scrollTop+pageHeight‐gbo"om) elseif(n){ oTest.moveIt(window.pageXOffset+pageWidth‐gright,window.pageYOffset+pageHeight‐gbo"om) setTimeout('checkIt()',20) }}funcLonresized(){ pageWidth=(ie)?document.body.offsetWidth‐4:innerWidth; pageHeight=(ie)?document.body.offsetHeight‐2:innerHeight; if(ie)checkIt()}onload=geoInit;

Page 6: Frontloaded and zipped up - the full frontal keynote

Ajaxforthewin!

Page 7: Frontloaded and zipped up - the full frontal keynote

Ajaxmisconcep7ons.

Page 8: Frontloaded and zipped up - the full frontal keynote

Securityscares.

Page 9: Frontloaded and zipped up - the full frontal keynote

IsJavaScriptnottobetrusted?

Page 10: Frontloaded and zipped up - the full frontal keynote

Backendissues.

Source:CenzichPp://www.cenzic.com/downloads/Cenzic_AppSecTrends_Q1‐Q2‐2009.pdf

Page 11: Frontloaded and zipped up - the full frontal keynote

Implementa7onversuslanguage.

Page 12: Frontloaded and zipped up - the full frontal keynote

JavaScriptequality.

hPp://www.flickr.com

/pho

tos/pjork/33

8742

1683

/hPp://www.flickr.com

/pho

tos/carbon

nyc/30

3636

3927

/

Page 13: Frontloaded and zipped up - the full frontal keynote

Stealingcookies.

Page 14: Frontloaded and zipped up - the full frontal keynote

Surprisingresults.

Page 15: Frontloaded and zipped up - the full frontal keynote

Pluginsareabigsecurityissue.

Page 16: Frontloaded and zipped up - the full frontal keynote

SonomoreJavaScript?

hPp://www.flickr.com

/pho

tos/thevoicewithin/52

3034

888/

Page 17: Frontloaded and zipped up - the full frontal keynote

ThejoyofJavaScript

Page 19: Frontloaded and zipped up - the full frontal keynote

★ Sensi7veinforma7on(creditcardnumbers,anyrealuserdata)

★ Cookiehandlingcontainingsessiondata★ Tryingtoprotectcontent(right‐clickscripts,emailobfusca7on)

★ Replacingyourserver/savingonservertrafficwithoutafallback

WhattonotuseJavaScriptfor:

Page 20: Frontloaded and zipped up - the full frontal keynote

★ slickerinterfaces(autocomplete,asynchronousuploading)

★ warningusersaboutflawedentries(passwordstrengthforexample)

★ extendingtheinterfaceop7onsofHTMLtobecomeanapplica7onlanguage(sliders,maps,comboboxes...)

★ AnyvisualeffectthatcannotbedonesafelywithCSS(anima7on,menus...)

WhattouseJavaScriptfor:

Page 21: Frontloaded and zipped up - the full frontal keynote

Whatifyouneedmore?

Page 22: Frontloaded and zipped up - the full frontal keynote

Onewayistolimityourself.

hPp://www.adsafe.org/

Page 23: Frontloaded and zipped up - the full frontal keynote

hPp://code.google.com/p/google‐caja/

Anotheristopre‐process

Page 24: Frontloaded and zipped up - the full frontal keynote

★ nameaPributes★ customaPributes★ customtags★ unclosedtags★ <embed>★ <iframe>★ <linkrel=‘…★ javascript:void(0)★ radiobuPonsinIE★ rela7veURLs

CajaandHTML

Page 25: Frontloaded and zipped up - the full frontal keynote

★ eval()★ newFunc7on()★ stringsaseventhandlers(node.onclick='...';)★ namesendingwithdouble/tripleunderscores★ withfunc7on(with(obj){...})★ implicitglobalvariables(specifyvarvariable)★ callingamethodasafunc7on★ document.write★ window.event★ ajaxrequestsreturningJS

CajaandJavaScript

Page 26: Frontloaded and zipped up - the full frontal keynote

★ *hacks★ _hacks★ IEcondi7onals★ Insert‐aserclearfix★ expression()★ @import

CajaandCSS

Page 28: Frontloaded and zipped up - the full frontal keynote

Makingiteasier.

Page 29: Frontloaded and zipped up - the full frontal keynote

Libraries.

(...)✔

Page 31: Frontloaded and zipped up - the full frontal keynote

YMLTags(LargeView)

yml:ayml:adyml:audioyml:formyml:friend‐selectoryml:if‐envyml:messageyml:nameyml:profile‐picyml:pronounyml:shareyml:swfyml:user‐badge

YMLLiteTags(SmallView)

yml:ayml:audioyml:formyml:if‐envyml:nameyml:profile‐picyml:pronounyml:user‐badge

Page 32: Frontloaded and zipped up - the full frontal keynote

Extendingbrowsers.

Page 33: Frontloaded and zipped up - the full frontal keynote

Movingoutofthebrowser

Page 34: Frontloaded and zipped up - the full frontal keynote

Widgetframeworks

Page 35: Frontloaded and zipped up - the full frontal keynote

http://www.w3.org/TR/widgets/http://www.quirksmode.org/blog/

archives/2009/04/introduction_to.html

W3Cwidgets

Page 36: Frontloaded and zipped up - the full frontal keynote

Air

Page 38: Frontloaded and zipped up - the full frontal keynote

JavaScriptmashupsaswebservices?

Page 39: Frontloaded and zipped up - the full frontal keynote

★ mashupdatawithaSQL‐stylesyntax★ filterdowntotheabsolutelynecessarydata★ returnasXML,JSON,JSON‐PandJSON‐P‐X★ useYahooasahigh‐speedproxytoretrievedatafromvarioussources.

★ useYahooasaratelimi7ngandcachingproxywhenprovidingdata.

YQLop7ons

Page 40: Frontloaded and zipped up - the full frontal keynote

select*fromhtmlwhereurl="hPp://2009.fullfrontal.org"andxpath="//h3"

Page 41: Frontloaded and zipped up - the full frontal keynote

OutputformatXML:

Page 42: Frontloaded and zipped up - the full frontal keynote

OutputformatJSON

Page 43: Frontloaded and zipped up - the full frontal keynote

OutputformatJSON‐P

Page 44: Frontloaded and zipped up - the full frontal keynote

OutputformatJSON‐P‐X

Page 45: Frontloaded and zipped up - the full frontal keynote

Ge{ngphotosofLondon,UK.

selectfarm,id,secret,owner.realname,server,7tle,urls.url.contentfromflickr.photos.infowherephoto_idin(selectidfromflickr.photos.searchwherewoe_idin(selectwoeidfromgeo.placeswheretext="london"))

Page 46: Frontloaded and zipped up - the full frontal keynote

SelectformatJSON,defineacallbackandcopyandpastetheURL.

hPp://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20flickr.photos.info%20where%20photo_id%20in%20(select%20id%20from%20flickr.photos.search%20where%20woe_id%20in%20(select%20woeid%20from%20geo.places%20where%20text%3D%22london%22))&format=json&diagnos7cs=false&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=flickr

Page 47: Frontloaded and zipped up - the full frontal keynote

CopyintoascriptsrcandwriteafewlinesofDomScrip7ng.

Page 49: Frontloaded and zipped up - the full frontal keynote

Turningthisintoawebservice.

YQLopentablescanhaveembeddedJSthatrunsontheYQLserver(withRhino)andsupportsXMLna7velywithE4X.

Page 50: Frontloaded and zipped up - the full frontal keynote
Page 51: Frontloaded and zipped up - the full frontal keynote

FlickrphotosasULsnow:

select*fromflickr.photolistwheretext="me"andloca7on="uk"andamount=20

Page 52: Frontloaded and zipped up - the full frontal keynote

DisplaywithJavaScript:

Page 53: Frontloaded and zipped up - the full frontal keynote

DisplaywithPHP:

Page 54: Frontloaded and zipped up - the full frontal keynote

HowaboutscrapingHTMLthatneedsPOSTdatainJavaScript?

select*fromhtmlpostwhereurl='hPp://isithackday.com/hacks/htmlpost/index.php'andpostdata="foo=foo&bar=bar"andxpath="//p"

hPp://www.wait‐7ll‐i.com/2009/11/16/using‐yql‐to‐read‐html‐from‐a‐document‐that‐requires‐post‐data/

Page 55: Frontloaded and zipped up - the full frontal keynote

oAuthinJavaScript?

Page 56: Frontloaded and zipped up - the full frontal keynote

SwitchingenvironmentsliberatesourJavaScriptsolu7onsandgivesusmuch7ghtersecurity.

Page 57: Frontloaded and zipped up - the full frontal keynote

Soopenyourmindsanddon’tjudgeJavaScriptbyitsimplementa7on.

Page 58: Frontloaded and zipped up - the full frontal keynote

Insteadhavefunwithitanduseitwisely.Withgreatpowercomesgreatresponsibility.

Page 59: Frontloaded and zipped up - the full frontal keynote

Chris7anHeilmannhPp://wait‐7ll‐i.comhPp://developer‐evangelism.comhPp://twiPer.com/codepo8

Thanks!