mst_unit1.pptx

Introduction to Web
• The Web is an Internet-based distributed information system.
• Anyone with a computer connected to the Internet can easily
retrieve information by giving a Web address or by simply
clicking a mouse button.
• Web consists of these major components
• Networks—The local-area and wide-area networks connecting
computers world-wide forming the Internet.
• Clients—Web browsers that enable end-users to access the
Web.
• Servers—Constantly running programs that serve up information
to the Web.
• Documents—Web pages, mostly coded in HTML, that supply
information on the Web.
• Protocols—The Hyper Text Transfer Protocol HTTP that Web
clients and servers use to talk to one another and the TCP/IP

Overview of Web Technologies
Web Technology refers to the various tools and techniques that are
utilized in the process of communication between different types of
devices over the internet.
Web Technology can be classified into the following sections:
World Wide Web (WWW): The World Wide Web is based on
several different technologies : Web browsers, Hypertext Markup
Language (HTML) and Hypertext Transfer Protocol (HTTP).
Web Browser: The web browser is an application software to
explore www (World Wide Web). It provides an interface between the
server and the client and requests to the server for web documents
and services.
Web Server: Web server is a program which processes the network
requests of the users and serves them with files that create web pages.
This exchange takes place using Hypertext Transfer Protocol
(HTTP).

Web Pages: A webpage is a digital document that is linked to the
World Wide Web and viewable by anyone connected to the internet
has a web browser.
Web Development: Web development refers to the building,
creating, and maintaining of websites. It includes aspects such as web
design, web publishing, web programming, and database
management. It is the creation of an application that works over the
internet i.e. websites.
Web Development can be classified into two ways:
•Frontend Development: The part of a website that the user interacts
directly is termed as front end. It is also referred to as the ‘client side’
of the application.
•Backend Development: Backend is the server side of a
website. It is the part of the website that users cannot see and
interact. It is the portion of software that does not come in

HTML-Introduction
•HTML stands for Hyper Text Markup Language
•HTML is the standard markup language for creating Web pages
•HTML describes the structure of a Web page
•HTML consists of a series of elements
•HTML elements tell the browser how to display the content
•HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.

HTML-Introduction
Sample HTML document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HTML is usually stored in files that use the .htm or .html extension.
A website can include hundreds or even thousands of these HTML files
kept in various directories. We can also add other types of content, like CSS
and javascript files, images, and videos, to add more features to a web page.
CSS allows us to add stylistic elements (like colors) to a webpage.
JavaScript enables interactivity.
• Structuring web pages
With tags and elements, we can define the headings, paragraphs, and other
contents of a web page.
• Navigating the internet
Navigating the internet would be much harder without HTML. Imagine
having to manually enter the URL of every web page you wanted to visit.
• Embedding images and videos
HTML also allows you to not only embed images into a webpage but also
adjust their width, height, position, and even the way they're rendered.
Need of HTML

Improving client-side data storage and offline capabilities
HTML5 also improved the language's offline capabilities. Websites
use cookies to store data about users that can be retrieved later when
they revisit the site.
Game development
While you can't create video games purely with HTML, the <canvas>
element makes it possible to build video games in your browser using
CSS and JavaScript.
Interacting with native APIs
Another feature of HTML is that it can interact with your operating
system, not just with your web browser.

Case-Sensitive
• All versions of HTML including HTML5 are case insensitive
except XHTML.
• HTML, being case-insensitive language, means whether you write
a tag or an attribute in lowercase letters or uppercase letters or
both, it will be treated as the same.
• We can also mix the cases in a single tag or attribute name as well.
• But as already discussed above, XHTML is case sensitive, and the
important thing to remember is that XHTML has a strict rule for
writing all elements in lowercase letters.

Platform independency
• Software that can run on a variety of hardware platforms or
software architectures.
• Platform-independent software can be used in many different
environments, requiring less planning and translation across an
enterprise.
• HTML is platform independent and can work on any platform
and web browsers.
• Using HTML, the Web page author can assume that no matter
what platform is used to view the page, the resulting output will
follow the specified general rules and have the expected
functionality.

DOCTYPE DECLARATION
• All HTML documents must start with a <!DOCTYPE>
declaration.
• The declaration is not an HTML tag. It is an "information" to the
browser about what document type to expect.
• In HTML 5, the declaration is simple:
<!DOCTYPE html>
• In older documents (HTML 4 or XHTML), the declaration is more
complicated because the declaration must refer to a DTD
(Document Type Definition).
HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//
EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Types of Elements
Block Level: Block elements are meant to structure
the main parts of your page, by dividing your content
in coherent blocks wth full width.
Some of the block level elements are:
•paragraphs <p>
•lists: UL and LI
•headings <h1> to <h6>, articles <article>
•sections <section>
•long quotes <blockquote>
•Division <div>
•Form <form>
•Table <table>

Types of Elements
Inline Level: Inline elements are meant to differentiate
differentiate part of a text, to give it a particular function
or meaning. Inline elements usually comprise a single or
few words. Some of the inline elements:
•links <a>
•image <img>
•span <span>
•button <button>
•input <input>
•label <label>
•textarea <textarea>
•emphasised words <em>
•important words <strong>
•short quotes <q>
•Strong <strong>

HTML ATTRIBUTES
• HTML attributes are special words which provide additional
information about the elements or attributes are the modifier of the
HTML element.
• Each element or tag can have attributes, which defines the
behaviour of that element.
Attribute Description
href The <a> tag defines a hyperlink. The href attribute
specifies the URL of the page the link goes.
src The <img> tag is used to embed an image in an
HTML page. The src attribute specifies the path to
the image to be displayed.
Width and
height
The <img> tag should also contain
the width and height attributes, which specify the
width and height of the image (in pixels).

HTML ATTRIBUTES
ATTRIBUTE DESCRIPTION
alt The required alt attribute for the <img> tag specifies
an alternate text for an image, if the image for some
reason cannot be displayed.
style The style attribute is used to add styles to an
element, such as color, font, size, and more.
title The title attribute defines some extra information
about an element.
lang You should always include the lang attribute inside
the <html> tag, to declare the language of the Web
page.

HTML ATTRIBUTES
Program:
<!DOCTYPE html>
<html lang="en">
<body>
<h3>The href Attribute</h3>
<a href="aec.edu.in">Visit Aditya Engineering
College</a>
<h3>The src,alt,width and heigth Attributes</h3>
<img src="logo.png" alt="Aditya" width="100"
height="100">
<h3>The style Attribute</h3>
<p style="color:red;">This is a red paragraph.</p>

HTML ATTRIBUTES
<h3 title="I'm a header">The title Attribute</h3>
//Mouse over this paragraph, to display the title
attribute as a header.
</body>
</html>
OUTPUT:

Metadata Element
• The <meta> tag defines metadata about an HTML document.
Metadata is data (information) about data.
• <meta> tags always go inside the <head> element, and are
typically used to specify character set, page description,
keywords, author of the document, and viewport settings.
Attribute Value Description
charset character_set Specifies the character encoding
for the HTML document
content text Specifies the value associated with
the http-equiv or name attribute
http-equiv content-security-policy
content-type
default-style refresh
Provides an HTTP header for the
information/value of the content
attribute

Metadata Element
name application-name, author
description , generator
keywords, viewport
Specifies a name for the
metadata
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web
tutorials">
<meta name="keywords"
content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Metadata Element
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
OUTPUT:

SECTIONING
ELEMENTS
• Main Element: The <main> element should contain the main
content for your web page.
• Article Element: The <article> element should contain a piece of
self-contained content that could be distributed outside the context
of the page.
• Section Element: The <section> element is used to represent a
group of related content.
• Nav Element:The <nav> element is used to mark up a collection
of links to external pages or sections within the current page.
• Aside Element:The <aside> element is used to represent content
that is tangibly related to the content surrounding it, but could be
considered separate.
• Header Element:The <header> element is used to represent the
introductory content to an article or web page.

SECTIONING
ELEMENTS
• Footer Element:The <footer> element is used to represent
information about a section such as the author, copyright
information, or links to related web pages.
• Address Element:The <address> element is one of the most
commonly misunderstood HTML elements.
Program:
<!DOCTYPE html>
<html>
<body>
<header>
<nav>
<ul>
<li><a href="https://aec.edu.in/">Aditya</a>
<li><a href=https://www.w3schools.com/">w3 school</a>
</ul>
</nav>
</header>
<main role="main">

SECTIONING
ELEMENTS
<h1>Guitars</h1>
<p>The greatest guitars ever built.</p>
<section>
<article>
<h2>Gibson SG</h2>
<p>...</p>
</article>
<aside>
<h1>Google (GOOG)</h1>
<p>Google was founded in 1998 by Larry Page and Sergey
Brin.</p>
</aside>
</section>
</main>
<footer>
<address>
By <a href="mailto:matt@example.com">Matt West</a>
</address>
<p>Copyright Matt West 2014</p>
</footer>
</body>

PARAGRAPH Element
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and after
a paragraph.
Program:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT:

DIVISION AND SPAN
ELEMENTS
• Division Element:The <div> tag defines a division or a
section in an HTML document.
• The <div> tag is used as a container for HTML elements -
which is then styled with CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.
• Span Element:The <span> tag is an inline container used to
mark up a part of a text, or a part of a document.
• The <span> tag is easily styled by CSS or manipulated with
JavaScript using the class or id attribute.
• The <span> tag is much like the <div> element, but <div> is a
block-level element and <span> is an inline element.

DIVISION AND SPAN
ELEMENTS
Program:
<!DOCTYPE html>
<html>
<body>
<div>This is some text in a div
element.</div>
<p>My mother has <span
style="color:blue;font-
weight:bold">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p>
</body>
</html>

DIVISION AND SPAN
ELEMENTS
Output:

LINK ELEMENT
• The <link> tag defines the relationship between the current
document and an external resource.
• The <link> element is an empty element, it contains attributes
only.
crossorigin anonymous
use-credentials
Specifies how the element handles cross-
origin requests
href URL Specifies the location of the linked document
hreflang language_code Specifies the language of the text in the linked
document
media media_query Specifies on what device the linked document will
be displayed

LINK ELEMENT
sizes HeightxWidt
h
any
Specifies the size of the linked resource.
Only for rel="icon"
title Defines a preferred or an alternate
stylesheet
type media_type Specifies the media type of the linked
document
referrerpolicy no-referrer-
when-
downgrade
origin-when-
cross-origin
unsafe-url
Specifies which referrer to use when
fetching the resource

LIST ELEMENTS
• HTML lists allow web developers to group a set of related items
in lists.
• Unordered List: An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag.Types in unordered list are disc ,
circle , square, none.
• Ordered List:An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.Types in ordered list are type=“1” ,
type=“A” , type=“a” , type=“I” , type=“i”.
• Description List:A description list is a list of terms, with a
description of each term.
The <dl> tag defines the description list, the <dt> tag defines the
term (name), and the <dd> tag describes each term.

LIST ELEMENTS
Program:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Kakinada</li>
<li>Rajahmundry</li>
<li>Pithapuram</li>
</ul>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>A Description List</h2>
<dl>
<dt>Albert Einstein</dt>

LIST ELEMENTS
<dd>- weakness of attitude becomes weakness of
character</dd>
<dt>Swami vivekananda</dt>
<dd>- All powers is within you;you can do anything
and everything</dd>
</dl>
</body>
</html>
OUTPUT:

HTML IMAGES
HTML img tag is used to display image on the web page. HTML img tag
is an empty tag that contains attributes only, closing tags are not used in
HTML image element.
Program:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="img.jpg" alt="Trulli" width="500“
height="333">
</body>
</html>

HTML IMAGES
Image as link:
To create an HTML image that acts as a link, you can use the `<a>`
(anchor) tag and include an `<img>` (image) tag within it.
Program:
<!DOCTYPE html>
<html>
<body>
<a href="https://www.google.com">
<img src="img.jpg" alt="Image description">
</a>
</body>
</html>

HTML ENTITIES
 Some characters are reserved in HTML.
 If you use the less than (<) or greater than (>) signs in your text,
the browser might mix them with tags.
 Character entities are used to display reserved characters in
HTML.
 A character entity looks like this:
&entity_name;
OR
&#entity_number;

HTML ENTITIES
Some Useful HTML Character Entities
RESULT DESCRITION ENTITY
NAME
ENTITY
NUMBER
non-breaking space    
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark ' '
¢ cent ¢ ¢

HTML ENTITIES
RESULT DESCRIPTION ENTITY
NAME
ENTITIY
NUMBER
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered trademark ® &#174

HTML ENTITIES
PROGRAM:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Entity Example</h1>
<h2>The copyright sign: ©</h2>
</body>
</html>

HTML GLOBAL
ATTRIBUTES
• The global attributes are attributes that can be used with all HTML
elements.
accesskey Specifies a shortcut key to activate/focus an element
class Specifies one or more classnames for an element (refers to a
class in a style sheet)
contenteditable Specifies whether the content of an element is editable or
not
data-* Used to store custom data private to the page or application
dir Specifies the text direction for the content in an element
draggable Specifies whether an element is draggable or not

HTML GLOBAL
ATTRIBUTES
hidden Specifies that an element is not yet, or is no longer, relevant
id Specifies a unique id for an element
lang Specifies the language of the element's content
spellcheck Specifies whether the element is to have its spelling and
grammar checked or not
style Specifies an inline CSS style for an element
tabindex Specifies the tabbing order of an element
title Specifies extra information about an element
translate Specifies whether the content of an element should be
translated or not

HTML TABLE
• The <table> tag defines an HTML table.
• An HTML table consists of one <table> element and one or
more <tr>, <th>, and <td> elements.
• The <tr> element defines a table row, the <th> element defines a
table header, and the <td> element defines a table cell.
ELEMENT DESCRIPTION
Table Border Table Border in HTML is used to display a border around
the table contents.
Cell Padding Cell padding is the space between the cell edges and the
cellcontent.
Cell Spacing Cell spacing is the space between each cell.
Colspan To make a cell span over multiple columns,use the colspan
attribute.
Rowspan To make a cell span over multiple rows, use
the rowspan attribute.

HTML TABLE
Program:
<!DOCTYPE html>
<html>
<body>
<h2>A basic HTML table</h2>
<table border='1' cellpadding="10" cellspacing="5" >
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>910567893</td>
<td>6475696355</td>
<td>Germany</td>
</tr>

HTML TABLE
<tr>
<td>Centro commercial Moctezuma</td>
<td>6836429329</td>
<td>9856375477</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>
OUTPUT:

HTML form elements are used to capture user input.
There are many different types of form elements such as
the text box, check box, drop-down, submit button, and
much more. Syntax:
<form>
form elements
</form>
The HTML <form> element can contain one or more of
the following form elements:
•<input>
•<label>
•<select>
•<textarea>
•<button>
•<fieldset>
Form Elements
•<legend>
•<datalist>
•<output>
•<option>
•<optgroup>

• <input>:The <input> element can be displayed in
several ways, depending on the type attribute.
Ex:
<label for="fname">First
name:</label><br>
<input type="text" id="fname"
name="fname"><br><br>

• <label> : The <label> tag defines a label for many
form elements. The <label> element is useful for
screen-reader users because the screen-reader will read
out loud the label when the user focuses on the input
element.
• <select> : Defines a drop-down list
• <textarea> : Defines a multiline input control (text
area)
• <fieldset: Groups related elements in a form
• <button> : Defines a clickable button
• <datalist> : Specifies a list of pre-defined options for
input controls
• <output> : Defines the result of a calculation
• <legend> : Defines a caption for a <fieldset> element

Html Input types
• Text : <input type="text">defines a single-line text input
field
• Password:<input type="password">defines a password
field
• Submit:<input type="submit">defines a button
for submitting form data to a form-handler
• Reset:<input type="reset"> defines a reset button that
will reset all form values to their default values.
• Radio :<input type="radio"> defines a radio button.
• Checkbox : <input type="checkbox"> defines
a checkbox.
• Button : <input type="button"> defines a button.
• Color : <input type="color"> is used for input fields that
should contain a color.

• Date : The <input type="date"> is used for input
fields that should contain a date.
• Datetime : The <input type="datetime-
local"> specifies a date and time input field, with no
time zone. Depending on browser support, a date
picker can show up in the input field.
• Email : The <input type="email"> is used for input
fields that should contain an e-mail address.
• Image : The <input type="image"> defines an image
as a submit button.
• File : The <input type="file"> defines a file-select
field and a "Browse" button for file uploads.
• Hidden : The <input type="hidden"> defines a
hidden input field (not visible to a user).

Program:
<!DOCTYPE html>
<html>
<body align=center>
<h2>HTML Forms</h2>
<form action="/action_page.php“ target=“_blank”>
<label for="fname">Firstname:</label><br>
<input type="text" id="fname" name="fname“
value="firstname"><br>
<label for="lname">Lastname:</label><br>
<input type="text" id="lname" name="lname"
value="lastname"><br><br>
<input type="radio" id="html" name="fav_language”
value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css“ name="fav_language" value="CSS">

<label for="css">CSS</label><br>
<input type="radio" id="javascript"name="fav_language"
value="JavaScript">
<label for="javascript">JavaScript </label>
<br>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="Nissan">Nissan</option>
<option value="Ford">Ford</option>
</select>
<br>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor"
value="#ff0000"><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:

MEDIA IN HTML
The HTML media attribute is employed to specify the
media or device the coupled document is optimized for.
This attribute specifies that the target URL is designed for
special devices like iPhone, speech, or print media.
This attribute can accept several values.
Applicable:
•<a>
•<area>;
•<link>
•<source>
•<style>

MEDIA IN HTML
Program:
<html>
<body>
<h1>Media in HTML</h1>
<h2>HTML media Attribute</h2>
<a href="https://aec.edu.in/"
media="print and (resolution:300dpi)">
Click to open in the same tab</a>
</body>
</html>
Output:

MEDIA IN HTML
• HTML 5 supports <video> tag and <audio>.
• The HTML video tag is used for streaming
video files such as a movie clip, song clip on the
web page, audio files etc.
• Tags used in media are:
<video> Defines a video or movie
<source> Defines multiple media resources for
media elements, such as <video> and
<audio>
<track> Defines text tracks in media players
<audio> Defines sound content

MEDIA IN HTML
Program:
<html>
<body>
<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
Browser does not support the html audio tag.
</audio>
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video
tag.
</video>
</body>
</html>

IFRAME IN HTML
• An inline frame (iframe) is a HTML element that
loads another HTML page within the document. It
essentially puts another webpage within the parent
page.
• The HTML <iframe> tag specifies an inline frame
• The src attribute defines the URL of the page to embed
• Always include a title attribute (for screen readers)
• The height and width attributes specify the size of the
iframe
• Use border:none; to remove the border around the iframe
Syntax:
<iframe src="demo_iframe.htm" style="height:
200px;width:300px;" title="Iframe

IFRAME IN HTML
PROGRAM
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width
attributes to specify the size of the
iframe:</p>
<iframe src="demo_iframe.htm" height="200"
width="300" title="Iframe
Example"></iframe>
</body>
</html>

Why HTML Security
• HTML is a markup language used for structuring the content of web
pages and does not have built-in security features.
• However, when used in conjunction with other technologies and best
practices, HTML can contribute to creating a secure web environment.
• Content Display: HTML is primarily responsible for defining the
structure and presentation of content on a web page.
• Integration with Security Technologies: HTML can integrate with
other technologies to enhance security.
• Secure Communication: HTML can support secure communication
protocols such as HTTPS (Hypertext Transfer Protocol Secure) to
establish an encrypted connection between the web server and the
client's browser.
• Compatibility with Security Measures: HTML is widely supported
by modern web browsers and can work seamlessly with various
security measures and technologies

HTML Injection
• HTML injection, also known as "code injection" or "cross-site
scripting" (XSS), is a type of web vulnerability where an attacker is
able to inject malicious HTML code into a web application, which is
then displayed to other users.
• HTML injection can occur when user input is not properly validated,
sanitized, or encoded before being included in dynamic web content.
• There are three common types of HTML injection:
1. Stored (Persistent) XSS: In this type of injection, the malicious
HTML code is permanently stored on the server and retrieved by
other users when they access a specific page or resource.
2. Reflected (Non-Persistent) XSS: This type of injection occurs
when the injected HTML code is embedded in a URL or a specific
HTTP request parameter.
3. DOM-based XSS: This type of injection takes advantage of
JavaScript manipulation of the Document Object Model (DOM).

HTML Injection
• HTML injection can have serious consequences, including session
hijacking, stealing sensitive information, defacement of websites, and
spreading malware. To prevent HTML injection attacks, it's important
to follow security best practices:
1. Input Validation and Sanitization: Validate and sanitize all user
input, both on the client-side and server-side, to ensure it matches
the expected format and does not contain potentially malicious
code.
2. Output Encoding: Encode user-generated content before
displaying it to other users
3. Content Security Policy (CSP): Implement a Content Security
Policy that specifies which sources of content are allowed to be
loaded on a web page.
4. Browser Security Mechanisms: Web browsers provide security
features like the Same Origin Policy, which limits scripts and
resources from one origin (domain) from accessing or modifying
content from another origin.

Clickjacking
• Clickjacking, also known as a "UI redress attack" or "User Interface
(UI) overlay attack," is a type of web attack where an attacker tricks a
user into clicking on a disguised or invisible element on a web page.
• Clickjacking is achieved by overlaying the targeted web page with a
transparent layer or by placing malicious content within iframes, which
makes the user unknowingly interact with the attacker's intended
elements instead of the intended elements of the web page.
• Clickjacking attacks can be used to carry out various malicious
activities, including:-
• Click fraud: Forcing users to unknowingly click on advertisements,
generating revenue for the attacker.
• Social media attacks: Manipulating social media interactions, such as
posting content or liking pages without the user's knowledge.
• Phishing: Tricking users into entering sensitive information into
disguised forms or login screens.
• Malware installation: Tricking users into downloading and installing
malicious software.

Clickjacking
• To mitigate clickjacking attacks, web developers can implement the
following preventive measures:
1. X-Frame-Options: Use the X-Frame-Options HTTP response header
to restrict the embedding of a web page within an iframe. By setting
the X-Frame-Options to "SAMEORIGIN" or "DENY," the browser
can prevent the web page from being loaded within an iframe from a
different domain.
2. Content Security Policy (CSP): Utilize Content Security Policy to
define a policy that specifies which sources of content are allowed to
be loaded on a web page.
3. Frame-busting scripts: Implement frame-busting scripts within the
web page's code to prevent it from being loaded within an iframe.
4. UI design considerations: Ensure that the user interface design does
not allow for overlaying elements on top of critical actions or sensitive
content.

HTML5 Attributes & Events Vulnerabilities
 HTML5 has few tags, attributes, and events that are prone to
different attacks as they can execute Javascript code. These will
be vulnerable to XSS and CSRF attacks.
Below are a few examples of such attacks:
1. Malicious script injection via formaction attribute
<form id="form1" />
<button form="form1"
formaction="javascript:alert(1)">Submit</button>
In the above code , the malicious script can be injected in the
formaction attribute. To prevent this, users should not be allowed to
submit forms with form and formaction attributes or transform them
into non-working attributes.
2. Malicious script injection via an onfocus event
<input type="text" autofocus onfocus="alert('hacked')"/>
This will automatically get focus and then executes the script
injected. To prevent this, markup elements should not contain
autofocus attributes.

This code will run the script injected if the given source file is not
available. So, we should not use event handlers in audio and video
tags as these are prone to attacks.
Mitigation
 To defend against these attacks, we should use HTML
Sanitization as a mitigation technique.
 HTML Sanitization provides protection from a few
vulnerabilities like XSS(Cross-site scripting) by replacing
HTML tags with safe tags or HTML entities.
 The tags such as <b>, <i>, <u>, <em>, and <strong>, which
are used for changing fonts are often allowed. The
sanitization process removes advanced tags like
<script> <embed>,<object> and <link>.
3. Malicious script injection via an onerror event in the video-tag
<video src="/apis/authContent/content-
store/Infosys/Infosys_Ltd/Public/lex_auth_012782317766025216289/
web-hosted/assets/temp.mp3" onerror="alert('hacked’)”>
</video>

 This process also removes potentially dangerous attributes like
'onclick' attribute in order to prevent malicious code injection
into the application.
 Entity names for some HTML characters
 When a web browser finds these entities, they will not be
executed. But instead, they will be converted back to HTML tags
and printed.Consider the scenario that an attacker injects the
below HTML code into a web page.
<a href="#" onmouseover="alert('hacked')">Avengers</a>

 On using HTML sanitization, the response will be as below.
<a href="#" onmouseover="alert('hacked')"> Avengers
</a>
This code will not be executed instead of stored as plain text
in the response.
 There are many sanitizer libraries available to do this job.
Some of the commonly used libraries are DOMPurify, XSS,
and XSS-filters.
 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 HTML
sanitization.

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.

Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>FilmyGossip</title>
</head>
<body>
<h1 id="heading"> Welcome to FilmyGossip </h1>
<br>
<div id="container">
<h2 id="title">
<u>Submit Review</u>
</h2>
<br>

<div id="reviewBox">
<label for="" style="font-weight:bold">MovieName:
</label>
<br>
<textarea name="name" id="name" cols="110"
rows="1"></textarea>
<br>
<label for="" style="font-weight:bold"> Summarize your
experience in a few words</label>
<br>
<textarea name="review" id="review" cols="110"
rows="5"></textarea>
<br>
<button onclick="submitReview()">submit</button>
<p id="content"></p>
</div>
</div>

</div>
<hr>
<footer>
<p>FilmyGossip
<span> © 2019</span>
</p>
<p>
<u>Contact Us:</u>
</p>
<p>Mail Id: filmyupdates@gossip.com</p>
<script>
function submitReview() {
var str = "Review submitted for movie " +
document.getElementById("name").value;
document.getElementById("content").innerHTML = str;
}

</script>
</body>
</html>
Output:

 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,
font size and assigns the values to them.
Local Storage Vulnerabilities

 getItem() method is used to fetch values from local storage.
Below is the code to retrieve values from localStorage.
 An attacker can inject some malicious code and can steal the
data stored here. So we should always ensure that sensitive
information is not stored at the client side.
Mitigation Techniques:
1. Never store sensitive information on client-side
2. Use cookies with the 'httponly' flag to protect the
data stored at the client-side
 Cookies
A cookie is a piece of data that is stored in the user's
browser. It can store a maximum of 4 KB of data in the browser.
Data in cookies are stored as key-value pairs. cookieValue is a
string in key-value pairs

Example of a cookie:
userName=Smith; expires=Mon, 15 Oct 2018 23:00:00
GMT;
key: userName
value: Smith
expires: Mon, 15 Oct 2018 23:00:00 GMT;
path:
 To create a cookie we can use document.cookie property.
document.cookie = cookieValue;
 A cookie to store username and password can be created as
below
document.cookie = "username = Smith;password =
secret";

HTML5-CROSS BROWSER
• Cross-browser compatibility can be defined as the ability of a
website, application or script to support various web browsers
identically.
• This issue is important as now-a-days numerous web browsers
are used for web surfing and all of them have different standards.
• People need to understand that cross-browser compatibility is
more related to site’s functionality than its looks.
• This means the site should perform equally under various web
environments.
• Every website owner should ensure cross-browser compatibility
of their website or applications.
• Each individual has its own preferred web browser hence there
are fewer chances that the website developer and site visitor will
use the same browser

HTML5-CROSS BROWSER
To Avoid Cross-Browser Compatibility Issues.
 Maintain layout compatibility.
 Use CSS resets.
 Provide support for basic features of the application.
 Check JavaScript issues.
 Check DOCTYPE tag.
 Test on real devices.
 Use frameworks and libraries that support Cross-Browser
compatibility.

HTML Best Practices
• HTML best practices are rules that help you create websites that
are easy to maintain and read.
• Here are some guidelines to keep in mind when building an
HTML-based website.
 Use only one <h1> element for one code sheet
 Do not skip heading levels in HTML
 Use the figure element to add captions to your images in
HTML
 Do not use divs to create headers and footers – use
semantic elements instead
 Avoid using <b> and <i> to bold and italicize texts on a
web page
 Don't place block-level element within inline elements

mst_unit1.pptx

Recommended

Recommended

More Related Content

Similar to mst_unit1.pptx

Similar to mst_unit1.pptx (20)

More from michaelaaron25322

More from michaelaaron25322 (13)

Recently uploaded

Recently uploaded (20)

mst_unit1.pptx