Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

Frontloaded and zipped up - the full frontal keynote

on

  • 7,456 views

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.

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.

Statistics

Views

Total Views
7,456
Views on SlideShare
6,068
Embed Views
1,388

Actions

Likes
9
Downloads
90
Comments
0

15 Embeds 1,388

http://www.wait-till-i.com 761
http://christianheilmann.com 528
http://mashed08.backnetwork.com 42
http://icant.co.uk 14
http://www.cnblogs.com 12
http://seenthis.net 10
http://www.slideshare.net 6
http://translate.googleusercontent.com 4
http://lanyrd.com 4
http://131.253.14.66 2
http://feeds2.feedburner.com 1
http://webcache.googleusercontent.com 1
http://www.hanrss.com 1
http://archive.cnblogs.com 1
resource://brief-content 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

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

Frontloaded and zipped up - the full frontal keynote Presentation Transcript

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

  • 2. A
quick
look
back
in
7me...
  • 3. Bring
on
the
bling!
 h"p://www.flickr.com/photos/dancentury/2072499619/
  • 4. More
bling! h"p://www.flickr.com/photos/kidperez/3204305300/
  • 5. var
gright=120 var
gbo"om=40 var
n
=
(document.layers)
?
1:0; var
ie
=
(document.all)
?
1:0; funcLon
makeObj(obj,nest){ 
 nest=(!nest)
?
'':'document.'+nest+'.' 



 this.css=(n)
?
eval(nest+'document.'+obj):eval(obj+'.style')
 
 
 
 
 
 
 
 this.moveIt=b_moveIt; } funcLon
b_moveIt(x,y){ 
 this.x=x;
this.y=y 



 this.css.leX=this.x 
 this.css.top=this.y } var
pageWidth,pageHeight funcLon
geoInit(){ 
 oTest=new
makeObj('divBo"om') 
 pageWidth=(ie)?document.body.offsetWidth‐4:innerWidth; 
 pageHeight=(ie)?document.body.offsetHeight‐2:innerHeight; 
 checkIt() 
 //sets
the
resize
handler. 
 onresize=resized 
 if(ie)
window.onscroll=checkIt; } funcLon
checkIt(){ 
 if(ie)
oTest.moveIt(document.body.scrollLeX
+pageWidth‐gright,document.body.scrollTop+pageHeight‐gbo"om) 
 else
if(n){ 
 
 oTest.moveIt(window.pageXOffset+pageWidth‐gright,
window.pageYOffset+pageHeight‐gbo"om) 
 
 setTimeout('checkIt()',20) 
 } } funcLon
resized(){ 
 pageWidth=(ie)?document.body.offsetWidth‐4:innerWidth; 
 pageHeight=(ie)?document.body.offsetHeight‐2:innerHeight; 
 if(ie)
checkIt() } onload=geoInit;
  • 6. Ajax
for
the
win!
  • 7. Ajax
misconcep7ons.
  • 8. Security
scares.
  • 9. Is
JavaScript
not
to
be
 trusted?
  • 10. Backend
issues. Source:
Cenzic
hPp://www.cenzic.com/downloads/Cenzic_AppSecTrends_Q1‐Q2‐2009.pdf
  • 11. Implementa7on
versus
 language.
  • 12. JavaScript
equality. hPp://www.flickr.com/photos/pjork/3387421683/


hPp://www.flickr.com/photos/carbonnyc/3036363927/
  • 13. Stealing
cookies.
  • 14. Surprising
results.
  • 15. Plugins
are
a
big
security
 issue.
  • 16. So
no
more
JavaScript? hPp://www.flickr.com/photos/thevoicewithin/523034888/
  • 17. The
joy
of
JavaScript
  • 18. Learning
JavaScript hPp://www.opera.com/company/educa7on/curriculum/ hPp://developer.yahoo.net/blogs/theater/archives/douglas_crockford/
  • 19. What
to
not
use
JavaScript
 for: ★ Sensi7ve
informa7on
(credit
card
numbers,
any
real
 user
data) ★ Cookie
handling
containing
session
data ★ Trying
to
protect
content
(right‐click
scripts,
email
 obfusca7on) ★ Replacing
your
server
/
saving
on
server
traffic
without
 a
fallback
  • 20. What
to
use
JavaScript
for: ★ slicker
interfaces
(autocomplete,
asynchronous
 uploading) ★ warning
users
about
flawed
entries
(password
strength
 for
example) ★ extending
the
interface
op7ons
of
HTML
to
become
an
 applica7on
language
(sliders,
maps,
comboboxes...) ★ Any
visual
effect
that
cannot
be
done
safely
with
CSS
 (anima7on,
menus...)
  • 21. What
if
you
need
more?
  • 22. One
way
is
to
limit
yourself. hPp://www.adsafe.org/
  • 23. Another
is
to
pre‐process hPp://code.google.com/p/google‐caja/
  • 24. Caja
and
HTML ★ name
aPributes
 ★ custom
aPributes ★ custom
tags ★ unclosed
tags ★ <embed> ★ <iframe> ★ <link
rel=‘… ★ javascript:void(0)
 ★ radio
buPons
in
IE ★ rela7ve
URLs
  • 25. Caja
and
JavaScript ★ eval() ★ new
Func7on() ★ strings
as
event
handlers
(node.onclick
=
'...';) ★ names
ending
with
double
/
triple
underscores ★ with
func7on
(with
(obj)
{
...
}) ★ implicit
global
variables
(specify
var
variable) ★ calling
a
method
as
a
func7on ★ document.write
 ★ window.event ★ ajax
requests
returning
JS
  • 26. Caja
and
CSS ★ *
hacks ★ _
hacks ★ IE
condi7onals ★ Insert‐aser
clear
fix ★ expression() ★ @import
  • 27. hPp://developer.yahoo.com/yap/guide/caja‐ready‐code‐exs.html
  • 28. Making
it
easier.
  • 29. Libraries. ✔ (...)
  • 30. YML
‐
abstrac7ng
the
pain. hPp://developer.yahoo.com/yap/guide/yapdev‐yml.html
  • 31. YML
Tags
(Large
View) YML
Lite
Tags
(Small
View) yml:a yml:a yml:ad yml:audio yml:audio yml:form yml:form yml:if‐env yml:friend‐selector yml:name yml:if‐env yml:profile‐pic yml:message yml:pronoun yml:name yml:user‐badge yml:profile‐pic yml:pronoun yml:share yml:swf yml:user‐badge


  • 32. Extending
browsers.
  • 33. Moving
out
of
the
browser
  • 34. Widget
frameworks
  • 35. W3C
widgets http://www.quirksmode.org/blog/ http://www.w3.org/TR/widgets/ archives/2009/04/introduction_to.html
  • 36. Air
  • 37. hPp://www.mozilla.org/rhino/
  • 38. JavaScript
mashups
as
webservices?
  • 39. YQL
op7ons ★ mashup
data
with
a
SQL‐style
syntax ★ filter
down
to
the
absolutely
necessary
data ★ return
as
XML,
JSON,
JSON‐P
and
JSON‐P‐X ★ use
Yahoo
as
a
high‐speed
proxy
to
retrieve
data
from
 various
sources. ★ use
Yahoo
as
a
rate
limi7ng
and
caching
proxy
when
 providing
data.
  • 40. select
*
from
html
where
 url="hPp://2009.fullfrontal.org"
 and
xpath="//h3"

  • 41. Output
format
XML:
  • 42. Output
format
JSON
  • 43. Output
format
JSON‐P
  • 44. Output
format
JSON‐P‐X
  • 45. Ge{ng
photos
of
London,
UK. select

farm,
id,
secret,owner.realname,
server,
 7tle,urls.url.content
 from
flickr.photos.info
where
photo_id
in( select
id
from
flickr.photos.search
where
woe_id
 in
(select
woeid
from
geo.places
where
 text="london"))
  • 46. Select
format
JSON,
define
a
 callback
and
copy
and
paste
the
 URL. 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
  • 47. Copy
into
a
script
src
and
write
a
 few
lines
of
Dom
Scrip7ng.
  • 48. PROFIT! hPp://isithackday.com/hacks/ajaxexperience/flickrgeophotos.html
  • 49. Turning
this
into
a
web
service. YQL
open
tables
can
have
 embedded
JS
that
runs
on
the
YQL
 server
(with
Rhino)
and
supports
 XML
na7vely
with
E4X.
  • 50. Flickr
photos
as
ULs
now: select
*
from
flickr.photolist
where
 text="me"
and
loca7on="uk"
and
 amount=20
  • 51. Display
with
JavaScript:
  • 52. Display
with
PHP:
  • 53. How
about
scraping
HTML
that
 needs
POST
data
in
JavaScript? select
*
from
htmlpost
where url='hPp://isithackday.com/hacks/htmlpost/index.php'
 and
postdata="foo=foo&bar=bar"
and
xpath="//p" hPp://www.wait‐7ll‐i.com/2009/11/16/using‐yql‐to‐read‐html‐from‐a‐document‐that‐requires‐post‐data/
  • 54. oAuth
in
JavaScript?
  • 55. Switching
 environments
 liberates
our
 JavaScript
 solu7ons
and
 gives
us
much
 7ghter
security.
  • 56. So
open
your
minds
and
 don’t
judge
JavaScript
by
 its
implementa7on.
  • 57. Instead
have
fun
with
it
 and
use
it
wisely.
 With
great
power
comes
 great
responsibility.
  • 58. 
Chris7an
Heilmann 
hPp://wait‐7ll‐i.com
 Thanks! 
hPp://developer‐evangelism.com 
hPp://twiPer.com/codepo8