Frontloadedandzippedup.Doloosetypessinkships?

Chris7anHeilmann,FullFrontal,Brighton,20thofNovember2009

Aquicklookbackin7me...

Bringonthebling!

h"p://www.flickr.com

/pho

tos/dancen

tury/207

2499

619/

Morebling!

h"p://www.flickr.com

/pho

tos/kidp

erez/320

4305

300/

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;

Ajaxforthewin!

Ajaxmisconcep7ons.

Securityscares.

IsJavaScriptnottobetrusted?

Backendissues.

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

Implementa7onversuslanguage.

JavaScriptequality.

hPp://www.flickr.com

/pho

tos/pjork/33

8742

1683

/hPp://www.flickr.com

/pho

tos/carbon

nyc/30

3636

3927

/

Stealingcookies.

Surprisingresults.

Pluginsareabigsecurityissue.

SonomoreJavaScript?

hPp://www.flickr.com

/pho

tos/thevoicewithin/52

3034

888/

ThejoyofJavaScript

LearningJavaScript

hPp://www.opera.com/company/educa7on/curriculum/

hPp://developer.yahoo.net/blogs/theater/archives/douglas_crockford/

★ Sensi7veinforma7on(creditcardnumbers,anyrealuserdata)

★ Cookiehandlingcontainingsessiondata★ Tryingtoprotectcontent(right‐clickscripts,emailobfusca7on)

★ Replacingyourserver/savingonservertrafficwithoutafallback

WhattonotuseJavaScriptfor:

★ slickerinterfaces(autocomplete,asynchronousuploading)

★ warningusersaboutflawedentries(passwordstrengthforexample)

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

★ AnyvisualeffectthatcannotbedonesafelywithCSS(anima7on,menus...)

WhattouseJavaScriptfor:

Whatifyouneedmore?

Onewayistolimityourself.

hPp://www.adsafe.org/

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

Anotheristopre‐process

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

CajaandHTML

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

CajaandJavaScript

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

CajaandCSS

hPp://developer.yahoo.com/yap/guide/caja‐ready‐code‐exs.html

Makingiteasier.

Libraries.

(...)✔

hPp://developer.yahoo.com/yap/guide/yapdev‐yml.html

YML‐abstrac7ngthepain.

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

Extendingbrowsers.

Movingoutofthebrowser

Widgetframeworks

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

archives/2009/04/introduction_to.html

W3Cwidgets

Air

hPp://www.mozilla.org/rhino/

JavaScriptmashupsaswebservices?

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

★ useYahooasaratelimi7ngandcachingproxywhenprovidingdata.

YQLop7ons

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

OutputformatXML:

OutputformatJSON

OutputformatJSON‐P

OutputformatJSON‐P‐X

Ge{ngphotosofLondon,UK.

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

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

CopyintoascriptsrcandwriteafewlinesofDomScrip7ng.

PROFIT!

hPp://isithackday.com/hacks/ajaxexperience/flickrgeophotos.html

Turningthisintoawebservice.

YQLopentablescanhaveembeddedJSthatrunsontheYQLserver(withRhino)andsupportsXMLna7velywithE4X.

FlickrphotosasULsnow:

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

DisplaywithJavaScript:

DisplaywithPHP:

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/

oAuthinJavaScript?

SwitchingenvironmentsliberatesourJavaScriptsolu7onsandgivesusmuch7ghtersecurity.

Soopenyourmindsanddon’tjudgeJavaScriptbyitsimplementa7on.

Insteadhavefunwithitanduseitwisely.Withgreatpowercomesgreatresponsibility.

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

Thanks!