Abusing HTML5

Video thumbnail (Frame 0) Video thumbnail (Frame 1450) Video thumbnail (Frame 5241) Video thumbnail (Frame 9456) Video thumbnail (Frame 10249) Video thumbnail (Frame 11155) Video thumbnail (Frame 12047) Video thumbnail (Frame 13128) Video thumbnail (Frame 14226) Video thumbnail (Frame 15711) Video thumbnail (Frame 17972) Video thumbnail (Frame 19710) Video thumbnail (Frame 21443) Video thumbnail (Frame 22608) Video thumbnail (Frame 24633) Video thumbnail (Frame 26120) Video thumbnail (Frame 27114) Video thumbnail (Frame 28280) Video thumbnail (Frame 29393) Video thumbnail (Frame 31759) Video thumbnail (Frame 32771) Video thumbnail (Frame 35135) Video thumbnail (Frame 37313) Video thumbnail (Frame 38123) Video thumbnail (Frame 39443) Video thumbnail (Frame 40397) Video thumbnail (Frame 41523) Video thumbnail (Frame 42831) Video thumbnail (Frame 43931) Video thumbnail (Frame 45946) Video thumbnail (Frame 46947) Video thumbnail (Frame 50429) Video thumbnail (Frame 51664) Video thumbnail (Frame 53427) Video thumbnail (Frame 56735)
Video in TIB AV-Portal: Abusing HTML5

Formal Metadata

Abusing HTML5
Title of Series
CC Attribution 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date

Content Metadata

Subject Area
The spike of i(Phone, Pod Touch, Pad), Android, and other mobile devices that do not support Flash has spurred the growth and interest in HTML5, even though the standard is still evolving. The power of HTML5 allows developers to create almost full-fledged web applications, not just structured content. HTML5's new features has increased the attack surface. It has been demonstrated that the HTML5 offline application cache can be abused. In addition, the support for client-side storage will open up the opportunity for SQL injection attack on client machines. There has been chatter regarding the new attack opportunities that the audio, video, and canvas tags will present, considering they require JavaScript and image-related functions such as SVG. This presentation will demonstrate the issues of HTML5 and how they can be abused and mitigated with good-old techniques. This presentation will also delve into the writing malicious web pages with web workers, abusing cross-origin JavaScript requests, how not to do cross-document messaging, and abusing geolocation. Ming Chow is a Lecturer at the Tufts University Department of Computer Science. His areas of interests are computer security, game development, web application security, and Computer Science in Education. He was also a web application developer for ten years at Harvard University for University Operations Services. Ming co-edited a special issue of IEEE Security & Privacy on securing online games with Gary McGraw of Cigital, Inc. published in May 2009. Ming is a frequent guest speaker and have spoke at numerous organizations, including the New England Chapter of the High Technology Crime Investigation Association (HTCIA-NE), the Greater Boston Chapter of the Association of Certified Fraud Examiners (ACFE), the Massachusetts Office of the Attorney General (AGO), and OWASP. Ming mentored a team of students from Tufts to the Microsoft Imagine Cup Game Design Competition US Finals in 2010. Finally, Ming is a SANS GIAC Certified Incident Handler (GCIH).
Tablet computer Web application Goodness of fit Channel capacity Code Flash memory Website Web browser Number
Presentation of a group Equaliser (mathematics) Multiplication sign Client (computing) Mereology Computer font Semantics (computer science) Mathematics Graphical user interface Different (Kate Ryan album) Videoconferencing Internet Explorer Error message Scalable Coherent Interface Scripting language Presentation of a group Email Pattern recognition Electric generator Data storage device Inflection point Arithmetic mean Digital photography Vector space Website Right angle Arithmetic progression Navigation Point (geometry) Web page Server (computing) Markup language Real number Video game Maxima and minima Web browser Content (media) Event horizon Field (computer science) Power (physics) 2 (number) Attribute grammar Revision control Goodness of fit Googol Electric field Integrated development environment Directed graph Form (programming) Standard deviation Validity (statistics) Content (media) Interactive television Division (mathematics) Web browser Mathematics Graphical user interface Particle system Uniform resource locator Error message Integrated development environment Personal digital assistant Revision control Videoconferencing
Touchscreen Image resolution Videoconferencing Price index Student's t-test Social class
Web 2.0 Lie group Modal logic Price index Plug-in (computing) Computer programming Bookmark (World Wide Web) Social class Mach's principle
Moment (mathematics) Modal logic Videoconferencing Student's t-test Physical system
Graphical user interface File format Modal logic Interactive television Data storage device Videoconferencing
Goodness of fit Randomization Uniform resource locator Student's t-test Chi-squared distribution
Execution unit Tape drive Convex hull Bit Student's t-test Data structure Window
Surface Complex (psychology) Thread (computing) Sequel Cone penetration test Multiplication sign Database Data storage device Web browser Client (computing) Prime number Time domain Web 2.0 Computational physics Array data structure Different (Kate Ryan album) Message passing HTTP cookie Area Domain name Information Demo (music) Key (cryptography) Kolmogorov complexity Server (computing) Poisson-Klammer Content (media) Data storage device Client (computing) Bit Database Web browser Graphical user interface Website Object (grammar) HTTP cookie Local ring
Domain name Key (cryptography) Software developer Source code Data storage device Database Cartesian coordinate system Statistics Timestamp Graphical user interface Cache (computing) Phase transition HTTP cookie Local ring
Web page Meta element Functional (mathematics) Scripting language Line (geometry) Multiplication sign Simultaneous localization and mapping Maxima and minima Data storage device Cuboid Maize output Local ring Form (programming) Execution unit Key (cryptography) Structural load Data storage device Timestamp Hypertext Type theory Subject indexing Function (mathematics) Resultant Local ring
Web page Domain name Execution unit Software developer Data storage device Sound effect Disk read-and-write head Medical imaging Type theory Hacker (term) Function (mathematics) HTTP cookie Information security
Sensitivity analysis Injektivität Sequel Software developer Virtual machine Data storage device Web browser Client (computing) Web 2.0 Writing Goodness of fit Graphical user interface Googol Analogy Core dump Statement (computer science) Local ring HTTP cookie Vulnerability (computing) Injektivität Vulnerability (computing) Information Data storage device Core dump Client (computing) Database Database transaction Cartesian coordinate system Web browser Virtual machine Cross-site scripting Digital photography Statement (computer science) HTTP cookie Information security Local ring
Web 2.0 Graphical user interface Sequel Software developer Price index Number Scalable Coherent Interface
Execution unit Key (cryptography) Demo (music) Source code Menu (computing) Database Table (information) Field (computer science) Dean number Scalable Coherent Interface
Functional (mathematics) Table (information) Sequel View (database) Mathematical singularity Demo (music) Source code Insertion loss Database Database transaction Database transaction Web browser Field (computer science) Number Revision control Medical imaging Different (Kate Ryan album) Statement (computer science) Table (information) Data type Descriptive statistics
Meta element Scripting language Table (information) Sequel Code Demo (music) Programmable read-only memory Source code Insertion loss Content (media) Database transaction Medical imaging Statement (computer science) Software protection dongle Relief Scale (map) Web page Correlation and dependence Bit Group action Scalability Process (computing) Statement (computer science) Right angle Fingerprint
Trail Sensitivity analysis Sequel Software developer Codierung <Programmierung> Multiplication sign Real number Database Client (computing) Web browser Power (physics) Web 2.0 Graphical user interface Synchronization Statement (computer science) Feedback Data storage device Client (computing) Database Cartesian coordinate system Virtual machine Graphical user interface Function (mathematics) HTTP cookie Local ring
Point (geometry) Reading (process) Server (computing) Functional (mathematics) Computer file Multiplication sign Modal logic Event horizon Attribute grammar Casting (performing arts) Graphical user interface Cache (computing) Root Energy level Website Server (computing) Structural load Content (media) Computer Limit (category theory) Cartesian coordinate system Cache (computing) Root Software Order (biology) Website Right angle Game theory
Domain name Email Dependent and independent variables Server (computing) Web page Source code Mereology System call Time domain Inclusion map Uniform resource locator Graphical user interface Personal digital assistant Personal digital assistant Internet Explorer Object (grammar) World Wide Web Consortium
Scripting language Bit
Authentication Domain name Email Email Game controller Dependent and independent variables Demo (music) Key (cryptography) Server (computing) Web page Plastikkarte Dreizehn Line (geometry) Number Time domain Uniform resource locator Personal digital assistant Website Flag Internet Explorer Quicksort HTTP cookie Spacetime World Wide Web Consortium
Domain name Frame problem Code division multiple access Demo (music) Multiplication sign Demo (music) Mereology Cartesian coordinate system Frame problem Message passing Formal verification Website Message passing Category of being
Domain name Server (computing) Computer file Code Server (computing) View (database) Source code Price index Open set Content (media) Event horizon Field (computer science) Arithmetic mean Message passing Functional (mathematics)
Domain name Software developer Virtual machine Menu (computing) Field (computer science) Message passing Event horizon Function (mathematics) Uniform resource name Video game console output Form (programming) Data type
Web page Frame problem Server (computing) Thread (computing) Computer file Demo (music) Virtual machine Parameter (computer programming) Event horizon Power (physics) Web 2.0 Moore's law Computational physics Cache (computing) Object (grammar) Website Message passing Category of being Software development kit Information Twin prime Cartesian coordinate system System call Thread (computing) Cache (computing) Message passing Password Formal verification Right angle Object (grammar) Information security Task (computing) Window
Mathematics Twin prime Server (computing) Virtual machine Hill differential equation Software testing Web browser Message passing
Web page Web 2.0 Scripting language Message passing Computer file Markup language Line (geometry) Prime number Event horizon Neuroinformatik
File format Web browser Client (computing) Streaming media Field (computer science) Attribute grammar Software bug Revision control Graphical user interface Videoconferencing Pattern language output Error message Address space Form (programming) Scripting language Email Validity (statistics) Demo (music) Code Attribute grammar Denial-of-service attack Regulärer Ausdruck <Textverarbeitung> Web browser Disk read-and-write head Vector potential Graphical user interface Googol Error message Buffer solution Artistic rendering output Pattern language Right angle Buffer overflow Data buffer
Standard deviation Sensitivity analysis Android (robot) Building Greatest element Mobile app Sequel Image resolution Multiplication sign Mobile Web Number Web 2.0 Computer configuration output Information security Software development kit Standard deviation Information Image resolution Android (robot) Data storage device Computer network Line (geometry) Vector potential Web application Integrated development environment Touch typing output Information security Local ring
a good afternoon everyone my name is Ming chow and I'm a lecturer at Tufts University in medford massachusetts and i am here to talk about html5 breaking abusing enacting html5 just for my curiosity here raise your hand if you have worked with html5 in some capacity already okay so it's a good number of hands okay the good number of hands up and shouldn't be a surprise why I mean right now there's such a big push for websites and web applications to go down the road of html5 and that's because a lot of devices you know well we don't have a lot of those new devices tablets iPhones iPads they don't have a flash and the other thing is of course the browser have gotten really really really powerful the other thing is how many people here know JavaScript because I'm going to do a lot of demonstration okay a lot of code example great great excellent okay so just a little intro
background material what is html5 well it's very much like HD it's a is going to be the next standard the next revision of HTML the markup language but one of the things that you get understand about html5 is just not the markup language it's really a complete get stack of technology html5 is really dependent on normally contain not only dependent on the HTML the markup language but also presentation by way of CSS and also a lot of JavaScript you know interaction with content the cool thing is I'm not going to talk particularly much on server side stuff it makes no sense anyway but you're close enough using html5 is a full-fledged development environment there is one caveat that you got to know about html5 it's still working target it still work in progress is that some of the stuff today that I'm going to talk about may change tomorrow that's you know just watch out who knows when the standard will be finalized and of course this backing from google microsoft is it gues getting get pushed very heavily with office and with the next version of IE now not only is html5 work-in-progress different browsers have different standards and right now the companies are like Google Microsoft dip everyone doing their own thing so the one of the most you know one of the drawbacks of using html5 right now there's so many incompatibilities case in point is going to be video which I'll show you in a few moments alright but to check what your browser can support and do you really want to go check go to http go to html5 test calm and it will render a score on your browser see how compatible like what features your browser at the html5 features your browser can use ok the other thing to also keep in mind is it's still going to be people who are going to be using ie6 ie7 you know older version to Firefox you know that's not going to change but a lot of the html5 syntax when it is going to be you know rendered on the browser it's going to it's still going to render but all the real cool stuff they're not going to be you know that just not going to be rendered okay so
here's just a quick summary on what's in and what's out in html5 a whole bunch of tough okay what's in a bunch of new tags video audio there's also semantic to attack for semantic stuff such as article footer and now back in the days and still we do this a lot a lot of people use div ID equals nav or div ID equal footer or div ID equal header so the nice thing is one of the standards now is why don't we just instead we're doing div tag which is a particle tag I know that in chrome I can't get too much working with the article and photo tags there are a lot of new attributes for example for pattern recognition in form fields there are also new media events for example time update when you want to play a video one sec in 22 seconds geolocation you know that feature that you know your browser prompts you to do you want to use your location that this page want to use your location do you want to you know get permission I mean I'm sure a lot of people have seen that that's part of html5 okay and of course client site storage which which is a becoming like the next vector for abuse what's out Fontan center tag anything that presentation based font center align border all right those a quote unquote no longer support like quote unquote no longer supported in the html5 standard why you no html5 FHTM HTML for content generation was never ever meant for styling purposes that forcing you now to have all that stuff in CSS even applet is quote unquote not support by not supported means if you try to validate your page in the official WC a3c validator you'll get a lot of one not only one but error messages and we won't yell at you okay applets an old special effects such as remember the marquee all right good times background sound you know those are no longer supported and this one last guy right here the no script tag all right the no script tag I have a snort fall here can someone tell me what to note what the purpose of the no script tag is and why do you think it's no longer supported in the html5 standard okay I'm going to throw it over the effing someone catch it all right now I want to do a few quick demonstration that illustrate the power of html5 okay i'm going to do an example on first of all a couple of video captioning examples and I if i have time i also do a geolocation as well okay
this'll work hello okay now I had this
is a this was an example this was a video that was built by a high school student Rachel Salman take and she's taking my summer class right now at Tufts and she did a video called Doug rainbow and unfortunately you know I'm
just going to play I think the screen resolutions a little well but you know
now that's no sound innocent
okay okay this is actually I don't know
whether what happened to sound but there's a son it plays in the background
but yeah it's very much like if you if you just can't imagine if this sound like it's karaoke no plugin necessary okay no plugin necessary to generate this to generate this stuff okay and you
got spongebob let's go back alright and this is actually one of my favorites this was in my web programming class I
had the students you know build a video caption and this has one a great student
by a very good student of mine built a video that took advantage of failblog
again no plugin necessary
okay no plugin necessary so you can do some really really cool things for example just picked yourself if you can do like videos and like interactive media for accessibility purposes all right now here's the catch just to
illustrate the problem with html5 this demonstration this demonstration will not will only work in chrome and firefox it will not work in Safari it okay we're using all we're using a odd format for the video alright so that's video and I
want to see if this F if I can go to
about geolocation WTF HTML and this
demonstration is an exercise i made my students do is to find where in the world is a good friend carmen sandiego based on where we got okay so i felt i built a json feed which actually renders ten random locations around the world i am actually going to allow okay nice that they actually prompt you permission
ok so here here we are we are here and
carmen of course she is in the sixteenth chapel if i hit the refresh button again
she is now in Big Ben so this is you know taking advantage of geolocation this was a lab that i had the students do ok just don't Rick the most so how
does an html5 document look like it's not much to it if you know about HTML the mock if you know a little bit about HTML then transitioning over the html5 is not difficult at all one one thing that you really need is the doctype and look at this you know is less than pal you know you know ! doctype HTML so you need lot better then the doctor the duct tape for XHTML isn't it pretty nice that's it and everything else really looks the same okay so where are we with
areas of concern so where's the danger okay the danger of course is with the web browser the client site all right now because html5 can do so much you can now see the complexes I mean you can understand the complexity of a web browser all right you can do so much stuff including like clients I like offline storage okay now not only can you actually store a lot more information content but just imagine if you have a full almost almost a full fledged sequel database on the client side okay how about you know Ajax and the xmlhttprequest object remember in JavaScript there was the same domain but same domain policy but now you can also do cross-origin requests and even cross document messaging as well okay and i'm going to show you a little bit a little demo on yes you can actually do you know for example calculating prime numbers or whatever comes to your mind by way of web workers think of background threads okay and again html5 is certainly going to make the browser's worth I mean I last time I checked I remember the chrome bounty that just recently happened I think two of them works but for specific to html5 features on Chrome okay the first thing I want to talk
about the locals to local storage and session storage we all know of the good thing known everything known as cookies right now here's the deal about cookies just for you a reminder a cookie can only saw four kilobytes of information local storage really depends on the browser the last time I actually check this around five you can store five megabytes of data okay for a local storage item okay if you actually can understand the whole concept for cookies shins I mean local storage in session store the same idea key value storage very very simple to you it's ridiculous impul to use okay persistence is there the only difference between local storage and session storage is persistence okay such and storage if you can infer from the name of the cone elite last let you know until the browser is closed okay local storage something else how do you use local storage or session storage by way of JavaScript really simple is these are local storage or session storage get item got set item okay or delete item or if you prefer you can use the associative arrays to hash syntax okay using square brackets here is just a example let's go back okay so here we
are local storage example about 80 ml the phrase that pays phase is bonkers now if i type in do and do do okay so i'm in chrome and using chrome developer tools go to view to the developer tools okay and the resources right you see databases local storage session storage cookies application cache let's go to local storage to see what happens okay here's my domain when they do 168 150 630 and of course key value pairs all right you take a look mikey is just i'm just using i'm just generating timestamps as my key and the value of course with everything that i have entered ok not too hard let's go over and just view the source ok view your source alright so my body is really
really simple is not much to it ok just one did one results alright one form tag look at my init function first time it
goes our first time to page loads is local storage set item the key is phrase and a value it bunker alright so if I actually hit a hit
return okay store when I actually type something in store is okay first get the thing that was in the text box local storage and of course the index I mean the key is going to be a timestamp equals text alright and how you render out all each and every item onto the
page that just do a very simple for loop and and just you know go through my local storage and just renders everything up to the page okay very very similar to whole concept of cookies all right you got the same domain policy but of course well let's go back I actually want to change something to actually I'm going to hit come here and I'm going to
say all right but what's one of the things that you can do with local storage go to view get a developer tools again and now I can go to local storage and instead of doodoo I can type h 1 okay and hit enter and instead of do I can have image SRC equal some image I don't care what it is can get out of here and I'm going to take Batman what happens okay and of course well that's a broken there's no image there but you do see that now trap actually is the you know n as head of one now cakes into effect so now you're starting to see some of some of the old hacks okay some really age-old security principles okay
so think about this for a second here's the analogy is there a way that you can grab all the cookies on a person's machine I are them beating the person up and taking their machine which of course that is another thing that you can do with local store did you steal troubled machine and look into you know take open your browser and just do what I did you can see all the idea of the values but you know what's the other way that you can steal everyone's cookies what's the attack what attacked you use exactly look at this if you have a cross-site scripting vulnerability in your application look at everything in local storage is going to be susceptible and as a simple example okay and it just be photos me this is always a principle that I oh I mean as dumb as the sound you're always going to have people that decide to want to a really sensitive information and local storage why okay next stop web sequel this is not new
this is not new but i'm sure some of you how many people have remember the good old days of Google gears unfortunately get a download a plug-in for that thing okay now this will bring sequel largely like a lot of you know good stuff to the client side here's some of the core methods all right you have open database okay you have transaction and you have execute sequel okay even prepared statements that support it but you do also have the usual gang of attacks cross-site scripting sequel injection let me show you an example okay let's go
back all right and I got three simple
exam three examples I am going to close
out of this and now i am going to do actual size and let's go to web sequel
example number one okay and i'm going to say something they're just really rudimentary go get me a beer Homer okay homeless says go get me a beer all right okay I mean a kick and hit enter like so with the data stored well again in chrome de Varenne chrome got a developer developer tools go to resources now get
a databases now my database i have one database called demo dash i'm joe and i can expand it and i have one table called thoughts okay I have a date key value have three field date key phrase and handle all right now if I go to all right a general you know why that's not showing up for some reason well for tools demo
okay well and anyway how this works you source this is what happens so DB open
database DB equals open database you give it a database name you give it a version number some description and of course the last field to 5,000 or open database is some sighs okay and here is around roughly five megabytes so I am only going to you know open up create a new bigger database if you know it's you know if it is if it doesn't exist already if database already you know if not exist create table you notice one thing about when I'm creating the table called thoughts the three fields doesn't take in any day to day if no database data types needed so it's pretty loose okay now how do i insert data yeah well I do a transaction DB transaction and I inside as a function executes sequel and there is my sequel statement right here so of course you know another oldie but goodie this is bad I mean this is bad principal improvement to make of course is to use prepared statements all right
now let's go to an example not example one humble one but example number two okay ok that works go we got a broken image but let's take a look at the difference in this thing let's take a look at the difference get a view source everything
is the same except for one thing ok this
is a use of prepared statements ok execute sequel insert into thoughts of course find the variable with ? ok of course this is nice but we can do a little bit better all right we can do a
little bit better how about escaping all the special characters all right some things that you know it doesn't hurt reminding everyone image source ok how do I actually did this is very simple i just wrote my own jobs i just wrote you know HTML code I just encoded all the HTML that's about it alright so now
we've seen local and session storage
we've seen web sequel all right again just you know the defense is again well don't store sensitive data in the client-side database you know very much like chrome and like local storage such and stores you can see all the data in the browser ok the other thing is why do you think I mean what's the real power behind local storage and web sequel I mean why is it so why this you know why it's so useful yeah because do you know not only for you know cookie and tracking purposes everyone here should read the paper on the other cookies but also if you're going to do offline work ok so if you're going to work offline and then you're trying to sync on one when you go online can you really really trust what is stored on the client side all right one other suggestion of course is to create your database and store data over SSL ok oh and one last thing is I mentioned a few times when I especially during geolocation it's nice for us if you prompt the user you know good feedback to just say you know hey we would like to use your database can we do so ok or you know application
cache application cache is really really cool for offline using a lot of games for example if you're going to be on a mobile device you can't depend that it's going to be on it you can't depend on working all the time let's say if you're going to be having like you have an html5 game alright also reduces a lot of server load okay right now if i'm not mistaken to set the size limit for cash datas around five megabytes there are two things that you need to do in order to enable application cache first thing is in the HTML tag specify the manifest file by way of the manifest attribute equals let's give it an example that manifest so that's the file that's going to be stored under root on the root level of the server of the WWF older but of course the manifest file example about manifest is going to look like the following you state the files that need to be explicitly cached HTML CSS and you know all the static content you can also specify what content need to be need required network at you know require networking okay how you update the application cache you can add an event listener alright update and of course the attribute you know the event is going to be checking and you know the function you write a function called update cash status to just do something
well one of the things about the danger points about the application cast is it can be poisoned alright the point that purpose is not only this is there's no permission necessary for any site to cache data onto the browser but look what are you really caching and there's a real big catch okay so what happens is although the resources cash but the normal cached is updated but not the application cache okay cross-origin
JavaScript request okay this is not directly part of the HTF html5 but it is introduced so of course if you remember from xhr it follows large back in the good old eight it largely follows the same domain principle okay e IE in ie8 there is a new JavaScript object call X domain request but even now in a lot of cases like in firefox on chrome the xhr can actually allow for cross-domain request how you guys remember that the source remember that example with carmen sandiego well let's take a look if you actually I'm
going to go in well RW w just give you a
little snapshot more and of course the script that is used and the request dot open an xhr is Acme look well actually I don't have it here oh XD are not PHP and there you go I know it's a little bit let me zoom this in loomis in how
Carmen's how I get the JSON for the carmen sandiego demo well it's just a few lines of PHP but what i do is i specify the header okay there's a flag called access dash control that allowed at origin followed by a colon and then it should follow a white list of allowed sites I'm using an asterisk air now this isn't that good this is a wild card all right I'm allowing everyone and everyone in the world to actually have access to this data this is bad okay if you're going to use the wild card what's even
worse is the following what if okay I do access control allow origin HTTP colon of course and of course uh marginal but you know and then I have percent what is wrong with that second example okay how do you actually separate okay a white list of a loud website is using a space you put that one you put that in its good at the percent 20 well it's going to be equated into a space and so you have actually not one you have to domain that allow well how you get around how you actually predict what's the defense two things number one you want to add some course either a some sort of authentication or some key like Google Maps did back in the days or validate the response okay cross
document messaging it is possible so actually a said you know to actually a build for example chat you know a chat application using straight html5 now using the whole idea of post message you can communicate you know between two different domain two different you know two different for two different origins two different frames there's two parts of the two parts there's a sender and as a receiver the purpose of the sender okay that's what the sender will do it will post some message while the receiver is going to listen for messages being sent now I'm just going to give you a demo okay here is a demo actually
this time i will need ok so i have CDM
receiver on the server ok i'm going to
view source ok now the domain of the receiver is 192 168 1 56 130 and look the receiver is going to have to have the mean the code is it can have one event listener alright that's going to really listen for a message and then it's going to check for the origin alright so what about the sender well i can do i'm going to open file i'm going to open a file on my desktop my desktop you see 19 examples okay CDM sender here it is this is a sender that's an iframe that contained code to the receiver you source okay so what I do is you know have one text field okay
one form field and then always going to do where is the postmessage just shorts
this here it is one I frame and the postmessage post message the message and of course the domain so how this works
okay hello goodbye and remember okay it is everything as all listened by way of the receiver on 192 one on my virtual machine so what's the problem here well
here's the kick here's the sketch you
really also you want to verify where the message is coming from okay and you can do that all right there is when you are the receiver when you're listening for a message okay the call back to receive a message it takes in one argument the event you can check where the origin is ok event that origin equals week world or does not equal alright and you can check the origin that way ok yeah has also been a car subject to controversy for more information of course check out the mole is mozilla SDK documentation alright some really powerful stuff web workers how do you actually add copy you can now add really computational power you know to the background of whatever page you'll are actually working on ok think of threads ok and it is really really easy to use all right very very easy to use how you actually spawn a worker well you set a variable W equals a new worker okay some giant of course the parameter is going to be some say some javascript file all right on message of course you can also have that JS file actually sent back messages to you okay and to terminate the thread you just do well it's going to be w terminate okay there are some few caveats for example what worker has to be on a server it cannot run on your on the machine okay it's aimed origin principle applies but here's the real funny stuff that the worker have access to what stuff does a worker have access to it have access to older navigation object the xhr even the application cache and the ability to spawn other workers really really cool what the worker on the flip side does not have access to of course is like the document object and the window what can you do with this use your wildest imagination somewhere here try to build a password cracker what's this thing you can now do this all right now how does this work let's give me you I'll give you an example add here go back and this okay
ah what's the example 1 which 1i here at work a test all right
and yeah there's no way to kill this thing either there's no X button to stop this alright how this works I have the HTML let me yeah it's still going to run but I don't want to crash this machine okay yep there it is it's even more so there's no way to stop this other than for me to close the browser alright so
how this really works well let me show
you what could really happen clear ok more worker is that's it that's the script ok there's very simple script to just find the guy prime numbers how the page looks more worker test2 dot HTML here it is very simple markup one cool computation all right I have one script tag ok worker equal to new worker and a career will point to that work of javascript file that I just showed you all right and of course you can actually check if they're in the isn't events from the jas file sent back to you by well work it out on message that's when you're going to be receiving messages from the J's file lets you let me go back ok how does j/s file this this thing that gets spawn send messages back to your page look at that last line it's a postmessage ok it will send data back to the HTML page ok and that's web
workers really really powerful stuff but
of course you saw the demo on video you've such geolocation one other thing I haven't even talked about is what about you know to canvas what about a browser rendering of 2d and 3d graphics what about SVG rendering of you know just on the fly SVG rendering well depends on the browser ok here I'm going to pose a scenario a lot of people now using like you know using video html5 video like boob and Brightcove what happened if their flaws in the codec think about it okay also this actually works you can embed a script okay inside the on error attribute in the audio tag already I already pointed out in the latest bounty hunt by google chrome two of the bugs were found worked reciprocity html5 features on chrome well there's also a key before that it was the heat buffer buffer overflow by way of that you know that you know had pertained every had everything to do with the html5 canvas an opera okay also we all love regular expressions right regular expression for pattern matching well there's one new attribute in fall in the form field in html5 which is called pattern all right you can do client-side validation let's say client-side validation and of an email address okay an example will be input and then you feed pattern equal what some reg ex what happens okay if for example your pattern is like a star and of course your value is just a long running stream of ace well there is a potential client lee there is a potential for regular expression denial of service alright and of course this will actually found and one of the versions of opera okay so what's the
whole story here and also in summary look html5 can do a lot of really really cool stuff you can build full-fledged web applications all right and a lot of really groundbreaking semin of seminal stuff right now the only thing that I know that Moses that Mozilla is working on a plug-in for take a you know for accessing your camera and your and your microphone on your device by a way of JavaScript so there is a potential that you may be able to build chat roulette with html5 one day but here's the bottom line look you know you can do all these cool things but there's two thing that really stands out number one security seems like a complete afterthought like most of the times when they're putting together the html5 standard okay and the second thing is a lot of the stuff to really defend yourself this is not new okay it's not news like for example how do you actually you know you know the defenses for local storage web sequel you know they're all the stuff that you've heard it in the past okay sanitize your data you know don't store sensitive information okay lie the same old problems same old resolution in just a brand new environment of course another caveat just to keep in mind is the standard is evolving it's changing like every day so you sivan hard for me to keep up but why am i giving this talk look html5 the sole topic of html5 is not going away anytime soon all right now because of the iphone and the ipod you know all these grant all these devices okay because here's the problem if you build mobile applications mobile application you're going to use the Android SDK or the iphone sdk all right it's a lot of fragmentation issues we kept you going to build a web app you have to you build something on for directly for using the android sdk directly you're you know using the iOS sdk all right html5 is one of the most viable options if you want to have you know one environment just one note one app that can run on everything all right and a lot of people now have no of the problem of segmentation and the mobile app and mobile app world okay so this can't be a new exists html5 just cannot be ignored all right and it seems like well I got some good news we I got ten minutes left and I am done you