Scribd
Upload
29 views17 pages

Unit I

This document provides an overview of HTML5, covering global attributes, table elements, form elements, HTML editing elements, media embedding, and security vulnerabilities associated with HTML5 applications. It highlights the importance of proper data handling and security measures to prevent attacks such as HTML injection, clickjacking, and local storage vulnerabilities. Additionally, it discusses the need for cross-browser support and the use of libraries like DOMPurify for sanitizing HTML code.

Uploaded by

Rsvv Prasad Rao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
29 views17 pages

Unit I

This document provides an overview of HTML5, covering global attributes, table elements, form elements, HTML editing elements, media embedding, and security vulnerabilities associated with HTML5 applications. It highlights the importance of proper data handling and security measures to prevent attacks such as HTML injection, clickjacking, and local storage vulnerabilities. Additionally, it discusses the need for cross-browser support and the use of libraries like DOMPurify for sanitizing HTML code.

Uploaded by

Rsvv Prasad Rao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

HTML 5

UNIT-1 MEAN STACK DEVELOPMENT

Notes

Prepared by R.S.V.V. PRASAD RAO


HTML5 Global Attributes

S.No Attribute Description


1 contenteditable. Allows the user to edit content. Possible values are true/false
2 dir Specifies text direction. Possible values are Itr/ rtl.
3 title Displays the string message as a tooltip.
4 spellcheck Specifies whether the spelling of an element's value should be
checked or not. Possible values are true/false
5 id Gives a unique id to an element

<html dir="rtl">
<body>
<p id=”paragraph1”>
This webpage is authored in English language
</p>
<p contenteditable="true" spellcheck="true">
This paragraph is editable
</p>

<p>
<abbr title="World Health Organization">
WHO
</abbr>
was founded in 1948.
</p>

<p title="Free Web tutorials">


W3Schools.com
</p>

</body>
</html>

Click here to see output

Prepared by R.S.V.V. PRASAD RAO 1


Creating Table Elements

Tag Description

<table> Defines a table and its content.

<caption> Defines a title or caption for a table.

<thead> Groups the header content in a table.

<tbody> Groups the body content in a table.

<tfoot> Groups the footer content in a table.

<tr> Defines a table row.

<th> Defines a table header cell.

<td> Defines a table data/cell.

<TABLE>
This tag defines the starting of a table and supports the following attributes:

Attribute Description
BORDER Border of the table. E.g. BORDER=1. In order to have an overall control of a site it is
recommended to use Style sheets instead of controlling HTML
WIDTH Width of the table. E.g. WIDTH=100%. It can also contain absolute values in pixels but
percentages are preferred. Again style sheets can do this job better!
ALIGN Relative alignment of the complete table. Can take three values LEFT, CENTER,
RIGHT
<TH>
This tag defines a table heading i.e. the title row. By default the text in this cell is bold and centered.

Prepared by R.S.V.V. PRASAD RAO 2


Other attributes are similar to that of the table and they override the table attributes! An additional
attribute not mentioned above is:
Attribute Description
VALIGN Vertical alignment of the cell content. Can take three values TOP, MIDDLE, BOTTOM
<TR>
This defines a row of the table and has same attributes listed above. Make sure that you include the
closing tag </TR> as is the case with all the other tags too!!
<TD>
Defines a table data cell. The attributes for this tag include ALIGN, VALIGN, WIDTH and also
something called ROWSPAN and COLSPAN. Note that the settings here will override the table and
row settings! ROWSPAN gives the number of rows that this cell covers and COLSPAN the number of
columns.

 Cellspacing – It is the distance between each cell in a table which is same as the distance from the
border of the table to the cell position.
 Cellpadding – It is the distance between the cell content and cell border used to compress or expand
the content within a cell.

Column Span
You can merge the columns using “colspan” attribute like below:
Row Span
Similar to column space, you can merge any rows together using “rowspan” attribute

<TABLE border="1" cellspacing="12" cellpadding="6">


<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>

Prepared by R.S.V.V. PRASAD RAO 3


<TR>
<TD ROWSPAN="2">Cell 4 and Cell 7</TD>
<TD>Cell 5</TD>
<TD>Cell 6</TD>
</TR>
<TR>
<TD>Cell 8</TD>
<TD>Cell 9</TD>
</TR>
</TABLE>

Click here for output:

Prepared by R.S.V.V. PRASAD RAO 4


HTML form elements

<form action=”page1.html” method=”post” target=”_blank”>


</form>
form tag attributes …..
 method: Defaults to HTTP "get" method of submission to the server. To use HTTP
"post", use method="post"
 action: The URL to which the form data has to be submitted
 target: Specifies if the submitted result will open in the current window, a new tab, or
on a new frame

form input element……….

Prepared by R.S.V.V. PRASAD RAO 5


Prepared by R.S.V.V. PRASAD RAO 6
Example :
<h2> Create a Player </h2>
<form>
<p>Player Name:<input type="text"></p>
<p>Password<input type="password"></p>
<input type="radio" name="gender" value="male" checked> Male<br/>
<input type="radio" name="gender" value="female"> Female<br/>
<input type="radio" name="gender" value="other"> Other

<p
Jersey Number: <input type="number" name="num" min="1" max="99">
</p>

<p>
Jersey Color: <input type="color" name="jerseycolor">
</p>

<p>
Birthday: <input type="date" name="bday">
</p>

<p>Position</p>

<div>
<select name="Position">
<option value="sf">Small Forward</option>
<option value="pf">Power Forward</option>
<option value="pg">Point Guard</option>
<option value="sg">Shooting Guard</option>
<option value="c">Center</option>
</select>
</div>
<p>Cities</p>
<div>
<input list="cities">
<datalist id="cities">
<option value="Kakinada">
<option value="Rajahmundry">
<option value="Visakhapatnam">
<option value="Vijayawada">
<option value="Tirupathi">
</datalist>

</div>

<p>Biography</p>

<textarea name="message" rows="10" cols="30"></textarea>


<br/><br/>
<input type="submit" id="submit"/>
<input type="reset">
</form>

Click here for output:

Prepared by R.S.V.V. PRASAD RAO 7


HTML editing elements:
<del>
The <del> tag defines text that has been deleted from a document. Browsers will usually strike a line
through deleted text.
<ins>
The <ins> tag defines a text that has been inserted into a document. Browsers will usually underline
inserted text.

Example:
<p>HTML is building block of Internet </p>
<p>HTML is building block of <del>Internet</del> <ins>WWW</ins></p>

Click here for output :

Media:
Any website must be able to engage well with its visitors, be entertaining, and be able to
quickly deliver information.
Embedding content like audio clips, videos, images, maps, and so on... are a great way of
engaging, be entertaining and be able to quickly deliver information to the website users.
HTML5 supports the following types of embedded elements:

Image Element:

Prepared by R.S.V.V. PRASAD RAO 8


Audio Element:
Embedding audio to a web page can be done with <audio>...</audio> tag. The <audio> tag has
an attribute 'src' which defines the location of the audio file. It also has an attribute 'controls'
which specifies whether to display the player controls.

Video Element:
Videos can be embedded into web pages using <video>…</video> tag. The <audio> tag has
an attribute 'src' which defines the location of the audio file. It also has an attribute 'controls'
which specifies whether to display the player controls.

Iframe:
We might have requirements to include documents, videos, interactive videos, or even other
web content into a web page directly from external sources. The <iframe> element is used to
meet the above requirement. Using the iframe element, contents from external sources can be
integrated anywhere on our web page. It is defined using <iframe>…</iframe> tag.
Example :
<html>
<body>
<iframe src="table.html" width="1000" height="1000" border=”10”></iframe>
</body>
</html>
Click here for output:

Prepared by R.S.V.V. PRASAD RAO 9


Why HTML Security?
We use HTML to create static web pages. HTML5 has introduced some new features which
make web pages richer. New features include new semantic elements like 'header', 'footer' etc.,
new attributes for form elements like date, time, range, etc., new graphic elements like SVG
and canvas, and new multimedia elements like audio and video.
Web developers can use the new features in HTML5 for building hybrid applications that can
run on the web and mobile devices. Lots of data flow has to be handled in these applications,
therefore developers should take care of the attacks that are possible as well. For example, an
attacker can steal the data by inserting some wicked code through HTML forms which will be
kept in the database. Security flaws are possible if proper security measures are not taken when
using HTML5 features like communication APIs, storage APIs, geolocation, sandboxed
frames, offline applications, etc.
Therefore, there is a need to find the attacks possible in all-new HTML5 features and their
preventive measures to defend against those attacks.
HTML Security
As HTML applications are web-based applications, developers should take proper measures to
safeguard the stored data and communications. An attacker can inject some malicious code via
Bluetooth/Wi-Fi/text messages for mobile-based apps or via advertisements/emails for web-
based apps. This malicious code can capture sensitive information and can expose it to the
attacker or it can run some undesired operations internally like sending false messages or
purchasing a product with zero amount etc.

The following is the list of a few vulnerabilities that are possible in HTML:
1. HTML Injection
2. Clickjacking
3. HTML5 attributes and events vulnerabilities
4. Web Storage Vulnerability
5. Reverse Tab nabbing.

HTML Injection?
HTML Injection is one of the possible attacks in HTML5 apps.HTML Injection is an
attack where an attacker can inject malicious HTML code into a vulnerable web application.
An attacker can send malicious code through HTML input fields or website links. Malicious
code can be simple HTML tags that display some information on the page or a form replacing

Prepared by R.S.V.V. PRASAD RAO 10


the original page etc., This kind of vulnerability happens when user input is not properly
sanitized or the output is not properly encoded.
How HTML Injection is Performed?
An attacker will first find the vulnerable parts of a web application by inspecting the source
code in the browser. Vulnerable parts may be HTML form fields or website links through
which an attacker will inject some malicious HTML code. There are many attributes or
methods which can render data on an HTML page. If malicious code is injected using
innerHTML property and if the data is not properly sanitized, then it will lead to this attack.
document.write() method is another way to inject the malicious code. It is used mostly for
form input fields like comments box, registration forms, questionnaire forms, etc., These kinds
of elements are most vulnerable to HTML Injection attacks.
The main intention of this injection attack is to either change the website's appearance or to
steal the user's identity
Click jacking:
Let us now understand another attack called clickjacking and its consequences. Hackers
will have several ways to trick the user and make them click on something which they are not
supposed to. A common form of this attack involves mirroring a login form on a website.
Users will think that they are entering values in the actual HTML form but they are actually
entering them in the form fields that are overlaid on that web page. The data which the user
enters will be sent directly to an attacker's page. In this type of attack, hackers will usually
target sensitive data like passwords, bank account information, credit card information, etc.,
Below are some real-time scenarios of clickjacking attacks:
1. There was an attack on one of the popular browser plugins, where an attacker added a
modified page in an iframe and can trick a user into changing settings of the plugin to get
access to the local system's resources such as a microphone, camera, etc.
2. A popular social networking site was attacked by tricking users to click on a button
that will make them retweet the location of the malicious web page which will be propagated
hugely.
Clickjacking is frequently used to hijack accounts for spamming purposes or navigate
links to malicious web pages on online social network websites.

HTML5 Attributes & Events Vulnerabilities:


DOMPurify is used for sanitizing HTML code. It is written in JavaScript and works in
all modern browsers. This library strip out dangerous HTML and prevents XSS attacks by
sanitizing the HTML code. On feeding string full of dirty HTML code to this library returns a
string with clean HTML. Many security experts have already reviewed this library and
identified that it is the recommended library for HTMLsanitization.
Prepared by R.S.V.V. PRASAD RAO 11
To use this library on the website, just include it as shown below.
<script type="text/javascript" src="dist/purify.min.js"></script>
Any dirty code can be sanitized using the below method.
var clean = DOMPurify.sanitize(dirty);
Using document.write() method or using innerHTML property, the resulting HTML code can
be written into DOM. It is very important to identify a suitable sanitizer library for securing
your application.

Local Storage Vulnerabilities:


In our web applications, we often store some data in the browser cache. As the data is stored at
the client-side, there is a chance of data-stealing by injecting some malicious code, if no proper
care is taken. Let us now see how to store the data properly to prevent such attacks.HTML5
has introduced Web storage or offline storage which deals with storing data in a local cache.
Data can be stored using two types of objects in HTML5. Local storage and Session storage.
These storages hold data in the form of key-value pairs.
Local storage holds the data in the browser cache until the user deletes it or it expires based on
the expiry date given.
setItem() method is used to assign data to local storage. The below code creates three items
with names bgcolor, textcolor, fontsize and assigns the values to them.

localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
localStorage.setItem("textcolor",document.getElementById("textcolor").value);
localStorage.setItem("fontsize",document.getElementById("fontsize").value);

getItem() method is used to fetch values from local storage. Below is the code to retrieve
values from local Storage document.
getElementById("page").style.backgroundColor = localStorage.getItem("bgcolor");
document.getElementById("page").style.color = localStorage.getItem("textcolor");
document.getElementById("page").style.fontSize = localStorage.getItem("fontsize");

Tab nabbing:
Reverse tab nabbing is an attack where a page linked from the target page is able to rewrite that page,
for example to replace it with a phishing site. As the user was originally on the correct page they are
less likely to notice that it has been changed to a phishing site, especially if the site looks the same as
the target. If the user authenticates to this new page, then their credentials (or other sensitive data) are
sent to the phishing site rather than the legitimate one.

Prepared by R.S.V.V. PRASAD RAO 12


As well as the target site being able to overwrite the target page, any http link can be spoofed to
overwrite the target page if the user is on an unsecured network, for example a public wifi hotspot. The
attack is possible even if the target site is only available via https as the attacker only needs to spoof
the http site that is being linked to.

HTML5 - Cross-browser support:


Ideally, all browsers are supposed to implement the W3C specification of HTML5 as it is. However, in
reality, all browser vendors more or less customize the specification. This leads to different outputs of
the same HTML code when viewed on different browsers.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Cross Browser</title>
</head>

<body>
<form>
<label for="">Username</label>
<input type="text" name="username"> <br/>
<label for="">Password</label>
<input type="password" name="password"><br/>
<input type="submit">
</form>
</body>
</html>

Best Practices For HTML Web Pages:


The following are some best practices to be followed while developing a web page or an
application using HTML5.
 In the application, ensure that each web page is having proper document structure with
divisions such as <head>, <body>, <header>, <footer>
 Ensure that correct DOCTYPE is declared, which is required for the browser to understand the
standards of the application used to render it properly.
 Use a meaningful title for the web pages.
Prepared by R.S.V.V. PRASAD RAO 13
 Always close the tag even if it is not a container tag.
 Avoid Inline styles and embedded scripts. Try to include script and style with external files
keeping your HTML code clean and neat.
 Include the script as an external file and place this code at the end portion of the <body> tag.
 Add the lang attribute to the root element, and keep the value as short as possible.
 Even though HTML is case insensitive, using lowercase for code is the best practice.
 Use the most appropriate HTML tag for sectioning the web page. Try to avoid the generic
<div> tag and use more meaningful tags such as <article>, <section> and appropriate tags in
the web pages.
 Always use <ul> for designing navigation bars.
 Avoid the use of the 'type' attribute in the HTML list element and use the corresponding CSS
property list-style-type property instead.
 On embedding elements to the web page, use the alt attribute with a proper description text.
 Indent nested elements properly.
 Use appropriate type attribute for Input element inside forms, also ensure the form control is
wrapped with <label> element.
 Use a sandbox attribute along with the iframe element whenever it is needed to embed another
webpage into the application.
 Use rel attribute with a value "noopener noreferrer" along with hyperlink, to avoid reverse
tabnabbing.
 Consider all the input data as untrusted information and sanitize those inputs before it is used in
some logic in the application.
 Do proper output encoding to avoid chances of injection of malicious code to the application
through input elements.

Head Elements:

Prepared by R.S.V.V. PRASAD RAO 14


Page layout & content tags:

Prepared by R.S.V.V. PRASAD RAO 15


Text Content & text formatting tags

Table Elements:

Embedded Elements:

Prepared by R.S.V.V. PRASAD RAO 16

You might also like