Upload
christian-heilmann
View
4.970
Download
0
Tags:
Embed Size (px)
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.
Citation preview
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?
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
★ 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!