Security in HTML5

Khalid Shaikh
 What is HTML5 ?

• HTML5 is the new standard for HTML.

• The previous version of HTML was – HTML 4.01, came in 1999.
HTML5 is designed to deliver almost everything you want to do
online without requiring additional plugins. It does everything from
animation to apps, music to movies, and can also be used to build
complicated applications that run in your browser.
• HTML5 is also cross-platform
 Introduction
New Features
i. New Semantic Elements − These are like <header>,
<footer>, and <section>.
ii. Forms 2.0 − Improvements to HTML web forms where
new attributes have been introduced for <input> tag.
iii. Persistent Local Storage − To achieve without resorting
to third-party plugins.
iv. Web Socket − A next-generation bidirectional
communication technology for web applications.
 What is a vulnerability?

• In computer security, a vulnerability is a weakness

which can be exploited by a threat actor, such as an
attacker, to cross privilege boundaries (i.e. perform
unauthorized actions) within a computer system.
Types of vulnerabilities of HTML5

• HTML Tag Abuse

• CORS Attack (Cross Origin Resource
Sharing)
• Middleware Vulnerabilities
• Local Storage Vulnerabilities
 HTML5 Tag Abuse
• Html has introduced some new tags and attribute which
now forms a threat to cross site scripting attack(XSS).
• XSS attack has been around for years now in security
field.
• XSS refers to client side injection where an attacker can
execute payload (malicious script) by making use of
unvalidated, unencoded and unsanitized user input in a
webpage or web application.
Example of XSS

• Make Effective Presentations

• Using Awesome Backgrounds
• Engage your Audience
• Capture Audience Attention
 HTML5 Tag Abuse

Security measures to be follow to avoid this type of

vulnerability:
• Use X-XSS-Protection header is used to check both misconfiguration as
well as malicious tampering.
• Encode data on output.
• Last line defence is Content Security Policy.
• Filter input on the arrival.
• Use appropriate response header.
 CORS ATTACKS
• When the developers do not implement a Same-Origin
Policy, the HTML5 application becomes vulnerable to cross-
origin resource sharing (CORS) issues.
• Cross Origin Resource Sharing allows a resource to access the
data from domain outside itself.
• By using CORS, a webpage can load resources such as script,
images and CSS stylesheets.
 CORS ATTACKS
• This allows malicious user to inject malicious code on a
webpage.
• Cross Origin Resource Sharing allows a resource to access the
data from domain outside itself.
• By this vulnerability we can bypass simple access control of a
webpage. This vulnerability can also be used for information
gathering and compromising confidentiality.
Example of CORS Attack

• Make Effective Presentations

• Using Awesome Backgrounds
• Engage your Audience
• Capture Audience Attention
 CORS ATTACKS
Security measures to be follow to avoid this type of
vulnerability:
• We should always Validate URLs passed to XMLHttpRequest.
• Always ensure that URls responding with Access-Control-Allow-Origin: *
does not include any of sensitive information or data which will aid
attacker for future attack.
• Always keep in minds that allow only selected, trusted domains in the
Access-Control-Allow-Origin header.
 Middleware Vulnerabilities
• HTML5 applications need a middleware framework to be
cross platform.
• The middleware has the capability to accept the data and
script as input, and execute the script automatically. Thus
middleware framework makes the web application more
vulnerable to injection attack and XSS attacks.
• Risk of such attacks is higher in mobile devices due to
permission given to apps for accessing contact list, location
data and camera.
Example of Middleware Vulnerability
 Middleware Vulnerabilities
Security measures to be follow to avoid this type of
vulnerability:
• The data and script must kept separately.
• Prevent middleware from accepting input from insecure sources. Always
keep in minds that allow only selected, trusted domains in the Access-
Control-Allow-Origin header.
• Restrict permissions to untrusted code.
• Endpoints exposed through the ws:// protocol are effortlessly reversible
to plain text. Only wss://( Web Sockets over SSL/TLS[Secure Sockets
Layer/ Transport Layer Security]) should be used for protection against
Middleware Vulnerabilities.
 Local Storage Vulnerability
• The local or offline storage is one of important feature of
HTML5 because it makes it easier for developer to store user
data in client side.
• Local Storage is storing simple key/value pairs on the client
and this data has no expiration date.
• The data stored should only be accessible by website that
initiated the storage.
 Local Storage Vulnerability

• But due this there are several possible threats that can be
exposed by careless developers.
• If a target website has XXS Vulnerability, the attacker can
leverage this to execute JavaScript Code and gain access to
local variables.
Example of Local Storage Vulnerability
 Local Storage Vulnerability
Security measures to be follow to avoid this type of
vulnerability:
• It is recommended not store any sensitive information in local storage.
• It better to use object session Storage instead of local Storage if
persistent storage is not needed.
• Always pay an extra attention to “localStorage.getItem” and “setItem”
calls in HTML5 web page.
• To minimize the risk we would recommend not including the scripts from
external Host.
THANK YOU