HTML 5 Security Waterford Institute of Technology In this document we will have a look into the new HTML standard which is HTML5. We will go through a brief history of HTML and then have a look at some of the new tags provided by HTML5 and then try to find the weaknesses of HTML5.

2011

Faraz ur rehman sharif (20042717) Waterford Institute of Technology

11/22/2011

Table of Contents HTML Background ................................................................................................................................... 4

Timeline................................................................................................................................................... 4

November 24, 1995 ............................................................................................................................ 4

January 1997 ....................................................................................................................................... 4

December 1997 ................................................................................................................................... 4

April 1998 ............................................................................................................................................ 4

December 1999 ................................................................................................................................... 4

May 2000 ............................................................................................................................................ 4

January 2008 ....................................................................................................................................... 4

HTML5 ..................................................................................................................................................... 4

5 Major aspects of HTML5 ...................................................................................................................... 5

1. Canvas ......................................................................................................................................... 5

2. Video ........................................................................................................................................... 5

3. Geo-location ................................................................................................................................ 5

4. App cache and Database ............................................................................................................. 5

5. Web workers ............................................................................................................................... 5

5 Security threats in HTML5 .................................................................................................................... 6

1. Cross-Document Messaging........................................................................................................ 6

2. Local Storage ............................................................................................................................... 6

3. Attribute Abuse ........................................................................................................................... 6

4. Inline Multimedia and SVG ......................................................................................................... 7

4.1. Video ................................................................................................................................... 7

4.2. Audio ................................................................................................................................... 7

4.3. SVG ...................................................................................................................................... 7

5. Input Validation........................................................................................................................... 7

Email ........................................................................................................................................ 7

URL .......................................................................................................................................... 7

Number ................................................................................................................................... 7

Range ...................................................................................................................................... 7

Date pickers (date, month, week, time, datetime, datetime-local) ....................................... 7

Search ...................................................................................................................................... 7

Colour ...................................................................................................................................... 7

Looking at a possible hack for localStorage object in HTML5................................................................. 8

Code used ........................................................................................................................................... 9

Protection ........................................................................................................................................... 9

Rethink ................................................................................................................................................ 9

HTML5 Sandbox .................................................................................................................................... 10

My Implementation .............................................................................................................................. 10

Conclusion ............................................................................................................................................. 11

Some useful sites for HTML5 ................................................................................................................ 11

Bibliography .......................................................................................................................................... 12

Appendix A ............................................................................................................................................ 13

HTML Background Hypertext Mark-up Language (HTML) has been the standard of web development for years. In 1980,

physicist Tim Berners-Lee, who was a contractor at CERN, proposed and prototyped ENQUIRE, a

system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo

proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser

and server software in the last part of 1990. In that year, Berners-Lee and CERN data systems

engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally

adopted by CERN. In his personal notes from 1990 he lists "some of the many areas in which

hypertext is used" and puts an encyclopaedia first. (Wikipedia, 2011)

Timeline Let’s take a look into the version history of HTML. Below are some of the major version publications

of HTML. (Wikipedia, 2011)

November 24, 1995 HTML 2.0 was published

January 1997 HTML 3.2 was published as W3C Recommendation.

December 1997 HTML 4.0 was published

April 1998 HTML 4.0 was reissued with minor changes.

December 1999 HTML 4.01 was published.

May 2000 “ISO HTML”, based on HTML 4.01 Strict was published.

January 2008 HTML 5 was published as a working draft.

HTML5 HTML5 is the latest version of HTML. It tends to change the way HTML 4.01 was used. HTML5 was

originally proposed by Opera Software. The main idea behind HTML5 is to make HTML more user

friendly with additions of some tags. HTML5 claims to provide such tags that it will overtake

JavaScript as well. As compared to previous versions of HTML we can now add video, audio and

canvas elements directly into HTML5.

5 Major aspects of HTML5

1. Canvas The HTML5 canvas element is a rectangular area in HTML5 that uses JavaScript to draw

graphics on a webpage. The canvas element has several methods for drawing paths, boxes,

circles, characters, and adding images. (W3Schools, 2011)

2. Video This is an added tag in HTML5 that supports integration of video files directly into HTML. We

can specify width and height of a video and also specify multiple video types and it picks up

the one that is supported by the browser.

3. Geo-location Now it’s not only mobile phones that can find our location, we can use the geo-location API

of HTML5 to create any kind of location based application.

“As part of the HTML5 efforts, the W3C has developed a set of APIs to effectively allow the

client-side device (i.e. your IPhone 3G+, Android 2.0+ phones, or even your conventional

desktop browsers) to retrieve geographic positioning information with JavaScript. When

we look at the web browsers landscape, the native support for geo-location is beginning to

find its way into mainstream applications at a slow and steady pace. One substantial

application that uses geo-location is Google Maps” (Mirkazemi, 2010)

4. App cache and Database HTML5 uses client side SQL database for structured data storage. The mechanism for

ensuring Web applications are available even when the user is not connected to their

network is the manifest attribute on the html element. The attribute takes a URI to a

manifest, which specifies which files are to be cached. (W3c working group, 2011)

5. Web workers The Web Workers specification defines an API for spawning background scripts in a web

application. Web Workers allows us to do things like fire up long-running scripts to handle

computationally intensive tasks, but without blocking the UI or other scripts to handle user

interactions. (Bidelman, 2010)

5 Security threats in HTML5 Let’s have a look into the 5 major security threats that the introduction of HTML5 brought with it.

1. Cross-Document Messaging HTML 4 did not allow passing or accessing of data from one domain to another domain due

to security on web. This helps to protect us from malicious sites that try to act as a middle

man and hack the data being passed or accessed.

“HTML5 introduces an API called postMessage that creates a framework for a script in one

domain to pass data to a script running on another domain. To help ensure that requests

are not malicious, postMessage includes object properties that the developer can use to

verify the origin of the request, to ensure that it matches the expected domain.” (Weiss,

2010)

Object properties provided by postMessage are not implemented by HTML5, the developer

has to use these properties and check whether the request coming is from the valid server

or domain.

2. Local Storage HTML5 has introduced a new storage method where JavaScript accesses a client side SQL

database through the browser in a web page. This concept makes it really fast to get data

which is user related. For e.g. in an e-commerce website users cart can now be saved on the

users own computer.

“When storing sensitive data in an offline database, such as email messages or passwords,

developers need to use SSL and they need to generate unique database names so that

hackers cannot formulate a predictable attack. Also, developers should use prepared SQL

statements, rather than constructing queries in JavaScript code, or else hackers could

intercept or emulate these queries to execute ‘SQL injection’ attacks.” (Weiss, 2010)

3. Attribute Abuse In addition to giving some new tags HTML5 has also introduced some new tag Attributes as

well.

“The new HTML5 attribute ‘autofocus’ will automatically switch browser focus to the

specified element. A trick that is sometimes useful for user interface design and previously

had been implemented using JavaScript. But a malicious site could use the autofocus

attribute to steal focus unwittingly from the end user, possibly giving focus to a window

which is rigged to execute malicious code when active.” (Weiss, 2010)

4. Inline Multimedia and SVG As we discussed earlier HTML5 now also supports built in tags for attaching multimedia

contents directly into a web page, we can see that these tags with addition to functionality

also bring some security threats as well. The multimedia tags that HTML5 supports are:

4.1. Video

For adding video content/files

4.2. Audio

For adding Audio files

4.3. SVG

For adding Scalable vector graphics

“With its new <audio>, <video>, and <svg> tags, HTML5 can natively render popular

formats and vector graphics without external plug-ins that consume extra resources and

sometimes add instability to the browser. But this puts the onus on browser developers to

implement complex multimedia rendering that may result in bugs that open new

vulnerabilities.” (Weiss, 2010)

Since browsers that are supporting HTML5 tags they have to implement new features which

in case could leave some bugs in the testing phases or beta releases.

5. Input Validation Developers always come across this scenario where they have to validate the form inputs.

They usually use JavaScript to validate inputs. But with the addition of some new tags in

HTML5 we can choose specific tags for user input.

Some of the tags used in HTML5 are: (W3schools, 2011)

Email

Used for taking email addresses for input

URL

Used for taking URL inputs or inputs that can contain links only

Number

Used for number input

Range

Input field that contains a value in a specific range

Date pickers (date, month, week, time, datetime, datetime-local)

Date input

Search

Site search

Colour

Colour picker

“Input validation can also give developers a false sense of security. Flawed validation

definitions could allow users to bypass the checks. While this problem is not specific to

HTML5, because input validation syntax is new to HTML5, developers may be more prone

to make mistakes in their validation code.

Additionally, hackers may be able to exploit client-side validation for example,

flawed regular expression (Regex) syntax in page code, for example, create a Denial of

Service (DoS) attack by sending the browser into an infinite loop.” (Weiss, 2010)

Looking at a possible hack for localStorage object in HTML5 While searching for HTML5 topics I came across this idea to hack the data stored in the localStorage

object used by HTML5. Let’s take an example where you are using a shopping cart. The website

stores your delivery information on your computer using the HTML5 localStorage object. This makes

the life of the web developers really easy and it also makes the website very fast as every time you

go to the website it does not have to query the database on the server to get your personal info. It

can only query the localStorage and get all the information that it has previously stored on your

computer.

This makes HTML5 really awesome, but considering a situation where a phishing site is sitting

somewhere for you to visit it. As soon as you visit the website it can get hold of your locally stored

data which could be your name, address, email, or even passwords.

Now we will take a look at a working example I have created the example to take a look into the

vulnerability caused by localStorage:

Below page is also at http://www.shariffaraz.com. This is where the user enters the information. All

the information is being stored in the localStorage object. The page then asks the user to go to the

hack page and there it displays all the information in the localStorage object

This hack can be implemented by any site who wants to take your information out of your computer.

Code used I have used a simple one line JavaScript code that looks into all the localStorage Items and returns

their value. Below is the code:

localStorage.key(i)+": "+localStorage.getItem((localStorage.key(i)))

We can put this single line of code into a loop which will go till the length of localStorage Object and

find every key in it.

Protection Now we will take a look at the mitigation techniques:

Never store sensitive user data using the localStorage object

Use an encrypting mechanism (If storing data through localStorage)

Rethink After looking for more weaknesses I figured out that the localStorage hack that is explained above

would not work for any site until someone injects script on the same site. This is because the

localStorage object is created specifically with the site’s name and is only accessible when you are on

the same site. Below is a screen shot of Google chrome showing the local storage object.

HTML5 Sandbox One of the new HTML5 features is the sandbox. This allows users to put ads on their websites but

with advanced security. Now we can put content from external websites inside an IFrame and turn

on the sandbox attribute to put basic security restrictions. Security restrictions provided by sandbox

are: (HTML5 sandbox, 2011)

Plug-ins are disabled.

Script execution is blocked.

Form submission is blocked.

The content is treated as if it was from a globally unique origin. Meaning, all APIs which

require same-origin (such as localStorage, XMLHttpRequest, and access to the DOM of other

documents) are blocked.

The content is blocked from navigating the top level window or other frames on the page

(excluding child frames of the sandboxed content).

Popup windows are blocked.

We can also lift some of the default restrictions by using the following codes inside sandbox

attribute:

allow-scripts

allow-forms

allow-same-origin

allow-top-navigation

ms-allow-popups

My Implementation I have created a complete HTML5 form using all the new tags that are available. The code for the

implementation is given in Appendix A. This could also be found at

http://www.shariffaraz.com/form.html below is a screen shot for the implementation.

Conclusion From the research done on HTML5 we can clearly say that it is soon going to be a new standard in

high security and usability. It will reduce the development time by quite a margin. The research also

showed that people are very excited about HTML5 and are waiting for the full support provided by

the browsers.

HTML5 is soon going to take over web standards for animations and vector graphics as well, as it is

seen that Adobe incorporation is implementing this standard very rapidly.

Some useful sites for HTML5 http://slides.html5rocks.com

http://www.slideshare.net/iamit/html5-hacking

http://www.danielslaughter.com/2011/03/13/sxsw-2011-one-codebase-endless-

possibilities-real-html5-hacking/

http://blog.kotowicz.net/2010/12/hacking-html5-training.html

http://www.adobe.com/devnet/html5/articles/html5-basics.html

http://designshack.net/articles/html/html5-the-basics-1-of-4

Bibliography Bidelman, E. (2010, 07 26). The Basics of Web Workers. Retrieved 11 24, 2011, from htm5rocks:

http://www.html5rocks.com/en/tutorials/workers/basics/

HTML5 sandbox. (2011, 11 24). Retrieved 11 24, 2011, from ie.microsoft.com:

http://ie.microsoft.com/testdrive/HTML5/sandbox/

Mirkazemi, A. (2010, 06 02). HTML5 Apps: Positioning with Geolocation. Retrieved 11 24, 2011, from

mobiletuts: http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/

W3c working group. (2011, 11 24). Ofline Web Apps. Retrieved 11 24, 2011, from w3.org:

http://www.w3.org/TR/offline-webapps/

W3Schools. (2011, 11 24). HTML5 Canvas. Retrieved 11 24, 2011, from w3schools:

http://www.w3schools.com/html5/html5_canvas.asp

W3schools. (2011, 11 24). HTML5 form input types. Retrieved 11 24, 2011, from w3schools.com:

http://www.w3schools.com/html5/html5_form_input_types.asp

Weiss, A. (2010, 12 09). Top 5 security threats in HTML5. Retrieved 11 24, 2011, from

esecurityplanet.com: http://www.esecurityplanet.com/trends/article.php/3916381/Top-5-Security-

Threats-in-HTML5.htm

Wikipedia. (2011, 11 22). HTML. Retrieved 11 22, 2011, from Wikipedia:

http://en.wikipedia.org/wiki/HTML

Appendix A <!DOCTYPE html> <html> <head> <title>HTML5 Form</title> <style> nav { background-color:#066; height:20px; width:auto; } </style> </head> <body> <h1>HTML5 Implementation of New Tags</h1> <div id="input" style="float:left; background-color:#006699; padding:5px; height:515px"> <h1>Input Tags</h1> Number Field(Only takes numbers all other inputs are rejected):<br /> <form action="#" method="post"> <input type="number" id="number" required autofocus/> <br /> <input type="submit" value="Try"/> </form> Email Field(Only takes Email Addresses):<br /> <form action="#" method="post"> <input type="email" id="email" required/> <br /> <input type="submit" value="Try"/> </form> Range Field(Only takes a range of Numbers):<br /> <form action="#" method="post"> <input type="range" id="range" required/> <br /> <input type="submit" value="Try"/> </form> Date Field(Select a Date):<br /> <form action="#" method="post"> <input type="date" id="date" required/> <br /> <input type="submit" value="Try"/> </form>

URL Field(Only takes web addresses with http://):<br /> <form action="#" method="post"> <input type="url" id="url" required/> <br /> <input type="submit" value="Try"/> </form> Search Field:<br /> <form action="#" method="post"> <input type="search" id="search" required/> <br /> <input type="submit" value="Try"/> </form> </div> <div id="media" style="float:left; background-color:#006699; margin-left:2px; padding:5px; height:515px"> <h1>Media Tags</h1> Video with Controls:<br /> <video width="300" height="300" controls> <source src="movie.mp4" type="video/mp4"/> Your browser does not support video </video> <br /> Audio with Controls<br /> <audio controls="controls"> <source src="audio.mp3" type="audio/mp3" /> Your browser does not support the audio. </audio> </div> <div id="media" style="float:left; background-color:#006699; margin-left:2px; padding:5px; height:515px"> <h1>Canvas Tag</h1> <canvas id="htmlCanvas" width="150" height="100" style="border:solid 1px #000000"> </canvas> <script type="text/javascript"> var c=document.getElementById("htmlCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FFFFFF"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); cxt.rect(100,10,20,20); cxt.fill(); </script> <h1>Keygenerator</h1> <form action="GeneratedKey.php" method="post"> Encryption: <keygen name="security" /><br /> <input type="submit" value="generate key"/> </form> </div> </body> </html>