0% found this document useful (0 votes)
7 views24 pages

Nws Module 4

The document provides a comprehensive overview of HTML, CSS, and web security concepts, including examples of static web pages for a college homepage, an online bookstore, and a shopping cart. It discusses various HTML tags, CSS types, and security vulnerabilities like XSS and injection flaws, along with prevention techniques. Additionally, it highlights the importance of HTTPS and its benefits for secure communication on the web.

Uploaded by

charan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views24 pages

Nws Module 4

The document provides a comprehensive overview of HTML, CSS, and web security concepts, including examples of static web pages for a college homepage, an online bookstore, and a shopping cart. It discusses various HTML tags, CSS types, and security vulnerabilities like XSS and injection flaws, along with prevention techniques. Additionally, it highlights the importance of HTTPS and its benefits for secure communication on the web.

Uploaded by

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

NWS_MODULE_4

Created @June 12, 2025 5:44 PM

MODULE -4
PART-A

1. “HTML is the typical documents’ markup language for


developing web pages to display on the web browser.” Construct
HTML page for a college home page and explain the same.
Answer:
An HTML page is the foundation of any website. Below is a sample HTML code for
a college homepage:

<!DOCTYPE html>
<html>
<head>
<title>ABC College - Home</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
}
header {
background-color: #003366;
color: white;
padding: 20px;
text-align: center;
}
nav {
background-color: #336699;
padding: 10px;
text-align: center;

NWS_MODULE_4 1
}
nav a {
color: white;
margin: 10px;
text-decoration: none;
}
section {
margin: 20px;
}
footer {
background-color: #003366;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>ABC College of Engineering</h1>
<p>Accredited by NAAC | Affiliated to XYZ University</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Departments</a>
<a href="#">Admissions</a>
<a href="#">Faculty</a>
<a href="#">Contact</a>
</nav>
<section>
<h2>Welcome to ABC College</h2>
<p>ABC College is one of the premier engineering institutions offering qu
ality technical education in various disciplines.</p>
</section>
<footer>
<p>&copy; 2025 ABC College. All Rights Reserved.</p>

NWS_MODULE_4 2
</footer>
</body>
</html>

Explanation:

<html> , <head> , and <body> are the main structural tags.

<style> inside <head> is used for CSS to style elements like header, navigation
bar, etc.

<header> displays the title of the college.

<nav> provides navigation links.

<section> contains welcome text or introduction.

<footer> gives the copyright.

This layout is standard for a simple college homepage.

2. “In an HTML page, tags used are to place the content and
format the pages.” List the different HTML tags used to display
the web pages.
Answer:
HTML tags are the building blocks of a web page. Below are some of the
commonly used tags:

1. Structural Tags:

<html> : Root element of HTML document.

<head> : Contains metadata, title, and links to CSS or JavaScript.

<body> : Contains visible page content.

2. Text Formatting Tags:

<h1> to <h6> : Headings.

<p> : Paragraphs.

<b> , <strong> : Bold text.

NWS_MODULE_4 3
<i> , <em> : Italic text.

<u> : Underline.

<br> : Line break.

<hr> : Horizontal rule.

3. Links and Images:

<a href=""> : Anchor tag for hyperlinks.

<img src="" alt=""> : Embeds an image.

4. Lists:

<ul> : Unordered list.

<ol> : Ordered list.

<li> : List item.

5. Tables:

<table> : Table element.

<tr> : Table row.

<td> : Table data.

<th> : Table header.

6. Forms:

<form> : Form container.

<input> : Input field.

<textarea> : Text area.

<select> and <option> : Dropdown menu.

<button> : Button.

7. Media:

<audio> , <video> : Multimedia content.

<source> : Defines media resources.

8. Semantic Tags:

NWS_MODULE_4 4
<header> , <footer> , <section> , <article> , <nav> : Give meaning to page structure.

These tags together help format and display content effectively.

3. “A web page is a hypertext document on the World Wide


Web.” Develop the static web pages required for an online book
store website.
Answer:
A static website for an online book store contains HTML files that don’t change
unless edited manually. Here's a simple static layout with three pages:

a) Home Page (index.html):

<!DOCTYPE html>
<html>
<head>
<title>BookStore - Home</title>
</head>
<body>
<h1>Welcome to Online BookStore</h1>
<p>Find a variety of books from different genres!</p>
<a href="catalog.html">View Catalog</a><br>
<a href="contact.html">Contact Us</a>
</body>
</html>

b) Catalog Page (catalog.html):

<!DOCTYPE html>
<html>
<head>
<title>Book Catalog</title>
</head>
<body>
<h2>Book List</h2>

NWS_MODULE_4 5
<ul>
<li>The Alchemist - Paulo Coelho</li>
<li>Wings of Fire - A.P.J. Abdul Kalam</li>
<li>Clean Code - Robert C. Martin</li>
</ul>
<a href="index.html">Back to Home</a>
</body>
</html>

c) Contact Page (contact.html):

<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<h2>Contact Information</h2>
<p>Email: [email protected]</p>
<p>Phone: +91 98765 43210</p>
<a href="index.html">Back to Home</a>
</body>
</html>

Explanation:

Each page uses simple HTML structure.

Hyperlinks ( <a href=""> ) allow navigation.

Static pages are ideal for small, informational websites.

4. “Static web page is a web page that is delivered to the user’s


web browser exactly as stored, in contrast to dynamic web
pages which are generated by a web application.” Design the
static web pages required for an online shopping cart.

NWS_MODULE_4 6
Answer:

Here’s a static version of a basic shopping cart website:

a) Home Page (home.html):

<!DOCTYPE html>
<html>
<head>
<title>ShopCart</title>
</head>
<body>
<h1>Welcome to ShopCart</h1>
<p>Get the best deals on electronics and fashion.</p>
<a href="products.html">View Products</a>
</body>
</html>

b) Product Listing Page (products.html):

<!DOCTYPE html>
<html>
<head>
<title>Our Products</title>
</head>
<body>
<h2>Products</h2>
<ul>
<li>Smartphone - ₹20,000 <button>Add to Cart</button></li>
<li>Bluetooth Headphones - ₹2,500 <button>Add to Cart</button></li>
<li>Laptop Bag - ₹999 <button>Add to Cart</button></li>
</ul>
<a href="cart.html">View Cart</a>
</body>
</html>

NWS_MODULE_4 7
c) Cart Page (cart.html):

<!DOCTYPE html>
<html>
<head>
<title>Your Cart</title>
</head>
<body>
<h2>Your Shopping Cart</h2>
<p>No items added yet.</p>
<a href="products.html">Continue Shopping</a>
</body>
</html>

Explanation:

No backend; data is not processed dynamically.

Useful for UI presentation or frontend-only websites.

5. “CSS makes the front-end of a website shine and it creates a


great user experience.” Illustrate the concept and types of CSS
with an example.
Answer:

CSS (Cascading Style Sheets) is used to style HTML elements. It improves layout,
colors, spacing, and overall appearance.
Types of CSS:

1. Inline CSS:
Applied directly to an HTML element using the style attribute.

<p style="color: red;">This is red text.</p>

2. Internal CSS:
Written within a <style> tag inside the HTML document's <head> .

NWS_MODULE_4 8
<style>
h1 {
color: blue;
}
</style>

3. External CSS:
Written in a separate .css file and linked using <link> tag.

<link rel="stylesheet" href="style.css">

Example (Internal CSS):

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f5f5f5;
}
h1 {
color: navy;
text-align: center;
}
p{
font-size: 16px;
color: darkslategray;
}
</style>
</head>
<body>
<h1>Welcome to My Site</h1>
<p>This paragraph is styled with internal CSS.</p>

NWS_MODULE_4 9
</body>
</html>

Benefits of CSS:

Separates content from design.

Enables responsive designs.

Makes maintenance easier.

6. “In Cross-site scripting (XSS) attack, the attacker injects HTML


markup or JavaScript into the affected web application’s front-
end client.” How to prevent XSS attacks? List the types of XSS
attacks.
Answer:

XSS (Cross-site Scripting) is a security vulnerability where an attacker injects


malicious scripts into trusted websites.
Types of XSS:

1. Stored XSS: Malicious script is permanently stored (e.g., in a database) and


executed when a user loads the page.

2. Reflected XSS: The malicious script comes from the user's input (e.g., URL)
and is immediately reflected by the server in the response.

3. DOM-based XSS: The vulnerability lies in the client-side JavaScript that


modifies the DOM without proper validation.

Prevention Techniques:

Input Validation: Reject unexpected or dangerous input.

Output Encoding: Encode characters like < , > , & , ' , " to prevent script
execution.

Content Security Policy (CSP): Define sources from which scripts can be
loaded.

Sanitization Libraries: Use libraries like DOMPurify to clean user input.

NWS_MODULE_4 10
HTTP-only Cookies: Prevent scripts from accessing session cookies.

Example of Encoding:
Instead of:

<p>Welcome, <script>alert('Hacked')</script></p>

Use:

<p>Welcome, &lt;script&gt;alert('Hacked')&lt;/script&gt;</p>

7. “Hypertext Transfer Protocol Secure (HTTPS) is a protocol that


secures communication and data transfer between a user’s web
browser and a website.” List out the limitations of HTTPS.
Answer:
While HTTPS improves web security, it has limitations:

1. Not a Complete Security Solution:


HTTPS only encrypts data in transit, not at rest. If a server is compromised,
data can still be stolen.

2. Phishing Protection is Limited:


Attackers can use HTTPS for fake websites too. Users might get tricked into
trusting a malicious site.

3. Performance Overhead:
SSL/TLS handshakes and encryption/decryption processes can slightly slow
down performance.

4. Certificate Management:

SSL certificates must be obtained, configured, and renewed periodically.

5. Cost (in some cases):


Though free certificates exist (e.g., Let’s Encrypt), organizations may opt for
paid certificates with added features and warranties.

NWS_MODULE_4 11
6. Doesn’t Stop XSS/SQLi Attacks:

HTTPS doesn’t protect against application-level vulnerabilities.

Despite these limitations, HTTPS is still critical for secure communication.

8. “HTTPS is the secure version of HTTP.” What are the benefits


of using HTTPS?
Answer:
Benefits of HTTPS:

1. Encryption:
Data transferred between client and server is encrypted, preventing
eavesdropping.

2. Data Integrity:
Ensures data is not modified during transfer without detection.

3. Authentication:
HTTPS uses certificates to verify that users are communicating with the
legitimate server.

4. User Trust:

Users feel more confident interacting with secure websites, especially in e-


commerce and banking.

5. SEO Benefits:
Search engines like Google give higher rankings to HTTPS-enabled websites.

6. Compliance:
Many privacy laws (like GDPR) expect encrypted communication when
handling personal data.

9. “Injection flaw is a vulnerability which allows an attacker to


relay malicious code through an application to another system.”
How to detect injection vulnerabilities?
Answer:

NWS_MODULE_4 12
Detection Techniques for Injection Flaws:

1. Code Review:

Check for dynamic queries built using unsanitized user input.

Look for unsafe functions like eval() , string concatenation in SQL, etc.

2. Static Analysis Tools:


Tools like SonarQube or Fortify scan code for insecure coding patterns.

3. Dynamic Testing:

Use inputs like ' OR 1=1 -- to test for SQL injection.

Observe application behavior using penetration testing tools like Burp


Suite.

4. Error Messages:

Excessive or detailed error messages may reveal injection points.

5. Fuzzing:
Automatically send random and malicious data to inputs to observe crashes or
unusual behavior.

6. Log Analysis:

Unexpected input logs or errors might point to injection attempts.

10. “Insufficient user input validation is typically the main cause


of injection vulnerabilities.” What are the risks of injection flaw?
Answer:
Risks of Injection Flaws:

1. Data Breach:
Attackers can extract sensitive data from the database (e.g., customer
credentials).

2. Data Manipulation:
Attackers can modify or delete database records.

NWS_MODULE_4 13
3. Authentication Bypass:
SQL injections can allow attackers to log in without valid credentials.

4. Denial of Service:

Malicious queries can overload the server and bring down the application.

5. Remote Code Execution:


In extreme cases, injection may allow execution of arbitrary commands.

6. Reputation Damage:
Breaches harm user trust and brand reputation.

7. Legal & Compliance Issues:


Violations of data protection regulations may lead to heavy penalties.

Mitigation:

Use parameterized queries and stored procedures.

Always validate and sanitize input.

Apply the principle of least privilege for database access.

PART-B

🟦 GROUP 1: Web Security Fundamentals


Q1. What is web security? What are some common web security
threats?
Answer:
Web security refers to the protective measures and protocols implemented to
safeguard web applications, websites, and users' data from cyber threats. It
involves securing the data integrity, confidentiality, and availability of resources
delivered over the web.
Common Web Security Threats:

1. Cross-Site Scripting (XSS): Injection of malicious scripts into webpages


viewed by others.

NWS_MODULE_4 14
2. SQL Injection: Inserting malicious SQL code to access or modify database
data.

3. Cross-Site Request Forgery (CSRF): Forcing an authenticated user to execute


unwanted actions.

4. Insecure Direct Object References (IDOR): Exploiting access controls to


access restricted data.

5. Broken Authentication: Attackers gain unauthorized access due to poor


session management.

6. Man-in-the-Middle (MITM) Attacks: Intercepting communication between


two parties.

7. Security Misconfiguration: Insecure settings left in applications or servers.

8. Denial of Service (DoS): Flooding resources to crash a system or make it


unavailable.

Web security ensures protection against such threats using authentication,


encryption (HTTPS), firewalls, input validation, and secure coding practices.

Q3. Write about the Web Security Considerations in detail.


Answer:
Web security considerations are vital for protecting user data, maintaining trust,
and ensuring system integrity. Major considerations include:

1. Authentication and Authorization:

Use strong password policies.

Implement multi-factor authentication.

Ensure access control mechanisms are enforced.

2. Secure Communication:

Always use HTTPS (SSL/TLS encryption).

Secure APIs with tokens or keys.

3. Input Validation and Output Encoding:

NWS_MODULE_4 15
Prevent injection attacks by validating input.

Encode output to avoid XSS.

4. Session Management:

Use secure, HttpOnly cookies.

Set expiration times and invalidate sessions after logout.

5. Error Handling and Logging:

Show generic error messages to users.

Log errors securely without revealing sensitive data.

6. Security Headers:

Implement headers like Content-Security-Policy , X-Frame-Options , Strict-Transport-

Security .

7. Patch Management:

Regularly update software, frameworks, and libraries.

8. Data Protection:

Encrypt sensitive data both in transit and at rest.

Ensure GDPR, HIPAA compliance where applicable.

By integrating these practices into development and operations, organizations


reduce the risk of web vulnerabilities.

🟦Components
GROUP 2: HTML, CSS, JavaScript, and Web

Q2. What is HTML? and What are its key features?


Answer:

HTML (Hypertext Markup Language) is the standard language used to create and
structure content on the web. It uses "tags" to define elements.
Key Features:

NWS_MODULE_4 16
Structural Markup: Provides layout using tags like <div> , <header> , <footer> .

Hyperlinks: Connect pages via <a> tags.

Multimedia Integration: Embeds images ( <img> ), videos ( <video> ), and audio


( <audio> ).

Form Handling: Supports forms for user input with <form> , <input> , etc.

Compatibility: Supported by all browsers and search engines.

Semantic Elements: Tags like <article> , <nav> , and <section> improve readability
and SEO.

HTML forms the backbone of any web application.

Q5. What is CSS? What are the advantages of using CSS? What
are the limitations of CSS?
Answer:
CSS (Cascading Style Sheets) is used to style HTML content.

Advantages:

Separation of concerns: Keeps structure (HTML) and design (CSS) separate.

Consistency: Styles can be reused across multiple pages.

Faster page load: Stylesheets can be cached.

Improved user experience: Better design and responsiveness.

Limitations:

Limited logic: CSS can’t perform calculations or conditions (unlike


JavaScript).

Complex for large projects: Managing multiple files and overrides is tricky.

Browser compatibility issues.

CSS enhances the look and feel of web applications but must be complemented
with JavaScript for dynamic behaviors.

NWS_MODULE_4 17
Q6. Elucidate briefly about JavaScript and List some features of
JavaScript.
Answer:
JavaScript is a client-side scripting language used to create dynamic and
interactive web content.
Features:

Event Handling: Reacts to user actions like clicks or keyboard input.

DOM Manipulation: Accesses and updates HTML elements dynamically.

Asynchronous Programming: Handles asynchronous tasks using async/await ,


promises .

Object-Oriented: Supports object creation and inheritance.

Browser Compatibility: Works in all modern browsers.

Lightweight and Interpreted: Runs without compilation.

JavaScript is essential for building responsive and interactive user interfaces.

Q7. What are the key differences between Java and JavaScript?
and How is JavaScript different from Java?
Answer:

Aspect Java JavaScript

Type Programming Language Scripting Language

Compilation Compiled Interpreted

Platform Server-side, desktop Browser/client-side

Syntax Strict Flexible

Use Case Backend, applications Web interactivity, UI

Strong Typing Yes No

Java is used for large-scale applications, while JavaScript enhances web pages'
functionality.

Q8. What is a URL? and Explain the components of URL in detail.

NWS_MODULE_4 18
Answer:

URL (Uniform Resource Locator) is the address used to access resources on the
web.
Components:

1. Scheme/Protocol: ( http , https , ftp ) – tells the browser how to fetch the
resource.

2. Host/Domain: ( www.example.com ) – the server location.

3. Port: ( :80 , :443 ) – optional, specifies port number.

4. Path: ( /products/item ) – specific resource location on server.

5. Query String: ( ?id=123 ) – contains key-value parameters.

6. Fragment: ( #section2 ) – refers to a section within the page.

Example:

https://www.example.com:443/products?id=123#section2

Q9. What is the difference between webpage, website, web


server, and search engine?
Answer:

Webpage: A single HTML document (e.g., about.html ).

Website: A collection of related web pages hosted under a domain.

Web Server: Hardware or software that serves web content to users.

Search Engine: A system (like Google) that indexes and retrieves web pages
based on queries.

Q10. What is the frame in DOM? What are 2 benefits of cross-


training? What are the Key Differences between HTTP and
HTTPS
Answer:

NWS_MODULE_4 19
Frame in DOM: Represents <iframe> which embeds another HTML document
within a page.

Benefits of Cross-training:

1. Enhances team flexibility and multitasking.

2. Improves skill development and collaboration.

HTTP vs HTTPS:

Feature HTTP HTTPS

Security Not encrypted Encrypted via SSL/TLS

Port 80 443

SEO Ranking Lower Preferred by search engines

Certificate Not required Requires SSL certificate

🟦HTTPS
GROUP 3: Security Threats – XSS, SQLi, Injection,

Q4. Explain about different Web Security Threats.


Answer:

1. XSS (Cross-site Scripting): Attacker injects script to steal data or session


cookies.

2. SQL Injection: Exploiting poorly sanitized SQL queries.

3. CSRF: Forces user to perform unintended actions.

4. Clickjacking: User is tricked into clicking hidden elements.

5. Path Traversal: Accessing unauthorized directories.

6. Insecure Deserialization: Injecting malicious objects into application.

7. Man-in-the-Middle (MITM): Intercepts data exchange.

8. Broken Authentication: Poor session handling lets attackers impersonate


users.

NWS_MODULE_4 20
Q13. What is HTTPS and why is it important for secure web
applications?
Answer:
HTTPS (HyperText Transfer Protocol Secure) is an extension of HTTP that uses
SSL/TLS for encryption. It secures data in transit and authenticates the server.

Importance:

Encryption: Prevents data eavesdropping.

Integrity: Protects against tampering.

Authentication: Verifies legitimate websites.

Trust: Builds user confidence with padlock symbol.

SEO Boost: Preferred by search engines.

Q14. What is XSS cross-site scripting vulnerability? How can XSS


vulnerabilities be mitigated or prevented?
Answer:
XSS allows attackers to inject malicious scripts.
Prevention:

Input validation and sanitization.

Encode outputs.

Use CSP headers.

Set cookies with HttpOnly and Secure flags.

Q15. What is XSS injection attack? How does XSS injection attack
work?
Answer:

XSS injection inserts scripts into websites, which get executed by the victim’s
browser. The attacker may:

Steal session cookies.

NWS_MODULE_4 21
Redirect to malicious sites.

Perform actions on behalf of users.

Q16. What is a SQL injection attack? What are the different types
of SQL injection attacks?
Answer:
SQL injection exploits input fields to manipulate SQL queries.
Types:

1. In-band SQLi: Uses same channel for attack and data retrieval.

2. Inferential (Blind): Observes application behavior.

3. Out-of-band: Uses different channels (e.g., DNS requests).

Q18. What are the risks and potential impacts of SQL injection
attacks?
Answer:

Unauthorized data access

Data manipulation or deletion

Bypassing login systems

Loss of trust and legal consequences

Q17. Explain the logical flow of HTTP headers in a web request.


How can organizations validate and sanitize user input to prevent
HTTP Header Injection?
Answer:
Flow:

Client sends request headers (Host, User-Agent, Cookie).

Server processes and sends response headers (Status, Content-Type).

Prevention:

NWS_MODULE_4 22
Sanitize newline characters.

Whitelist input.

Avoid user-controlled headers.

🟦 GROUP 4: Web Security Models and Policies


Q19. What is Same Origin Policy and why is the Same Origin
Policy important for web security? Write the Advantages and
disadvantages of Same Origin Policy
Answer:

Same Origin Policy (SOP): Restricts how a document/script from one origin can
interact with resources from another.
Importance:

Prevents data theft via XSS or cross-origin requests.

Advantages:

Increases privacy and isolation.

Reduces attack surface.

Disadvantages:

Limits legitimate cross-origin use cases.

Requires CORS for safe exceptions.

Q20. What is the X-Domain communication? Explain in detail.


Mention the methods of X-Domain communication.
Answer:
X-Domain Communication allows scripts from different origins to interact.

Methods:

1. CORS: Server specifies allowed origins via headers.

2. JSONP: Appends <script> tags for data fetch (limited to GET).

NWS_MODULE_4 23
3. PostMessage: Secure messaging between windows.

4. Proxy Servers: Intermediate servers fetch cross-origin data.

5. WebSockets: Bi-directional communication across origins.

📌 By K.Shashank

NWS_MODULE_4 24

You might also like