International University of Applied Sciences

Contents
Task 1: ................................................................................................................................. 3
1.1. Static websites........................................................................................................... 3
1.2. Dynamic websites ...................................................................................................... 4
1.3. ISO 25010 ................................................................................................................. 6
Task 2: ................................................................................................................................. 7
2.1. Different types of VCS ............................................................................................... 7
2.2 Examples .................................................................................................................... 7
2.3. Type of objects in Git ............................................................................................... 10
Task 3: ............................................................................................................................... 12
3.1 HTML code of bookstore .......................................................................................... 12
3.2 HTML5 and tags explanation .................................................................................... 13
3.3. Why a static page does not include dynamic content and how this limitation impacts
the overall functionality and user interaction. .................................................................. 14
Task 4: ............................................................................................................................... 15
4.1. General overview of the layouts with pros and cons ................................................ 15
4.2. Grid systems and breakpoints ................................................................................. 17
Task 5: ............................................................................................................................... 21
Task 6: ............................................................................................................................... 24
6.1. Access control ......................................................................................................... 24
6.2. OWASP Risks ......................................................................................................... 25
6.3. Server Configuration and Port Management ........................................................... 26
6.4. DoS and DDoS ........................................................................................................ 27
Appendix A. List of figures ................................................................................................. 28
Appendix B. List of tables .................................................................................................. 29
Appendix C. Bibliography................................................................................................... 30

2
 Task 1:
Explain the architectural differences between static and dynamic web pages, focusing on client-
side and server-side dynamics. In your answer, discuss the role of technologies such as HTML,
CSS, JavaScript, PHP, and CGI in web development. Additionally, describe how hybrid
approaches combine client-side and server-side techniques. Illustrate your explanation with
examples of how static web pages differ from dynamic ones, including specific use cases for
JavaScript on the client side and PHP on the server side. Furthermore, discuss the importance of
web application quality and explain the key criteria from ISO 25010 that apply to web development,
providing examples of how they can be evaluated.

1.1. Static websites

Static websites contain fixed content that never changes, no matter who visits or when. Because
static websites don’t require a server-side scripting language or a database to generate content on
the fly, they are faster, more secure, and easier to maintain than dynamic websites (Figma
Resource Library, n.d.).

Criteria Static

Database Not connected to the database

Content Content stays fixed

Development Easier in development and design, and then is

cheaper

Technologies Usually, creating with HTML, CSS and

JavaScript.

Interactivity Limited interactivity with users

Security Generally, more secured

Usage For simple landing sites, portfolio, local

businesses and etc.

Table 1. Static websites overview. Created by author.

3
Here is the example of static website - [Link] Simple site with lessons about CSS
and web-design.

Figure 1. Example of static website. Sourse: Modern CSS, 2024.

Client-Server part

As previously mentioned, static websites don’t connect to databases or servers. Instead, all the
content is pre-rendered and delivered directly to the client, where it is processed by the browser.
This makes static websites faster and more secure than dynamic websites since there is no
information about users that should be delivered to the server and can leak while delivering.
Typically, static websites can contain such forms of interactivity as HTML forms (e.g., contact
forms), clickable buttons, CSS animations, embedded media (images, videos), and JavaScript-
enhanced effects. These interactive elements are handled entirely on the client side without
requiring server-side computation.

1.2. Dynamic websites

A dynamic website is more interactive than a static website and can change based on user input or
real-time data. Imagine an e-commerce store where product prices and availability fluctuate—this
requires a dynamic website to display the most up-to-date information (Figma Resource Library,
n.d.).

Criteria Dynamic

Database Connected to server and database

Content Flexible content

4
 Development More expensive and more complex than static
websites. More difficult to develop

Technologies HTML, CSS, JavaScript, sometimes PHP for

the front-end part and PHP, Python or Ruby for
the server part (Sometimes devs use other
technologies as well).

Interactivity Interactive. Allow user logging and can save

data

Security Less secure than static ones

Usage Online shops, social media platforms, sites that

include personal user accounts

Table 2. Dynamic websites overview. Created by author.

Here is the example of dynamic website – [Link] Global online
store with clothes.

Figure 2. Example of dynamic website. Source: H&M web store, 2025.

Client-server part

Dynamic websites generate content on the server side in response to user requests. They retrieve
data from database using server, process data and deliver it to user and vice versa. Dynamic
websites can provide more personalized content, allow users to register and create accounts, and
update site content in real time. These kinds of sites support complex functionality such as content
management systems, e-commerce platforms, or social networks. For example, users can buy
some items from the store and share their cart with friends via social media at the same time. They
also can store some items in store cart, take their time to think and complete purchase next time.
Server will keep their info as much as needed. This flexibility and data storage come at the cost of

5
increased server load and potentially slower response times, but client-side technologies like
JavaScript can still enhance interactivity after the initial content is rendered.

1.3. ISO 25010

ISO 25010 is an international standard that defines important quality characteristics for software
and web applications. These criteria help developers create systems that are reliable, secure,
user-friendly, and easy to maintain. By following ISO quality standards, teams can build better web
applications that meet user needs and perform well over time (ISO, 2023).

Criteria Explanation Evaluation

Functional Stability The application should work Test if all features (e.g. login,
as expected under different form submission) still work
conditions after updates.

Performance Efficiency The website should load and Use tools like Google
run quickly, even with many PageSpeed to measure load
users time and server response
speed.

Compatibility The app should work across Check how the website
various devices, browsers, displays on Chrome, Safari,
and operating systems Firefox, mobile and desktop.

Interaction Capability Users should be able to Run usability testing to see if

interact with the system easily users can find and use the
and without confusion main features (e.g. search
bar).

Reliability The site should work correctly Monitor uptime and check for
over time without frequent broken links or server errors
crashes or errors under normal usage.

Security Check for HTTPS usage, input

User data must be protected,
validation, and protection from
and the system should resist
SQL injection or XSS.
attacks
Maintainability The codebase should be easy Review code quality and
to update or fix without structure; ensure good
breaking other parts documentation and modular
components.

Flexibility The system should adapt Check how easily a developer

easily to new features or can add new pages, forms, or
changes APIs.

Safety The app should prevent harm Ensure secure payment

to users and their data processing or restrict access
to private information.

Table 3. ISO criteria explanation. Created by author.

6
 Task 2:
Describe the role and functionality of version control systems (VCS) in managing file versions
within web and software development projects. Explain the differences between centralized version
control systems (CVCS) and distributed version control systems (DVCS), highlighting their
respective advantages and disadvantages.

Illustrate the use of Git as a DVCS by detailing the process of initializing a Git repository,
configuring user settings, and tracking changes. Provide a practical example that includes
initializing a repository, staging files, committing changes, and pushing updates to a remote
repository such as GitHub. Additionally, describe the different types of objects Git stores (commits,
trees, and blobs) and explain how to view and interpret these objects using Git commands.

Include specific commands and output examples, such as git init, git add, git commit, and git push,
as well as how to inspect the commit log and the contents of files within the repository.

2.1. Different types of VCS

Version control - also known as source control or revision control - is an important software
development practice for tracking and managing changes made to code and other files. It is closely
related to source code management (Gitlab about, n.d.).

The version management tool (or version control system (VCS)) is used to manage multiple
versions of one or more files. It is used primarily in the field of web and software development and
mainly involves managing the source code.

CVCS DVCS

Architecture The main server keeps the Every developer has full copy
code and history of changes on their computers

Pros Easy in settings and control Work without connection to

the server

Cons Insecure since if server Require more memory

crashes – everything can be
lost

Offline work Not allowed since connection Possible since developers can
to the server required keep data on their computers

Table 4. CVCS vs. DVCS. Created by author.

2.2 Examples
• Git init:

Figure 3. Initializing repository. Created by author.

7
What we have in our project folder after this command:

Figure 4. Project folder. Created by author.

• Git config – here I change my name and email address globally and then for one local
project

Figure 5. Git config. Created by author.

Figure 6. Git config (local project config). Created by author.

Figure 7. Changes in config file. Created by author.

• Git add – I added file to my project. Git status – checked recent changes in my project.

Figure 8. Git add. Created by author.

8
 Figure 9. Git status of my project. Created by author.

• Git commit – I committed my project to repository on GitHub.

Figure 10. Git commit. Created by author.

• Git diff – this command shows difference between committed files and files in my directory.

Figure 11. Git diff. Created by author.

• Git remote add origin – connection with remote repository like GitHub

Figure 12. Git remote add origin. Created by author.

• Git push – adding file to remote repository

9
 Figure 13. Git remote add origin. Created by author.

Figure 14. File added to GitHub. Created by author.

2.3. Type of objects in Git

Object type Explanation

Blob File Content

Tree The folder and file structure

Commit Project status and meta information

Table 5. Object types in Git. Created by author.

• Git log output.

Figure 15. Git log. Created by author.

• Git cat-file output.

Figure 16. Git cat-file. Created by author.

10
 Figure 17. Git cat-file blob output. Created by author.

Figure 18. Git cat-file blob and tree. Created by author.

11
 Task 3:
Explain the fundamental structure of a static web page using HTML5, emphasizing the role of
various HTML tags and attributes. In your response, create a complete HTML code example for a
fictional online bookstore that includes a header, main content area, and footer. Describe how each
HTML element and attribute is used, including specific tags like <header>, <nav>, <section>,
<footer>, <h1>, <p>, <ul>, <li>, and <img>. Illustrate how you can apply attributes such as alt for
images and class for grouping elements. Furthermore, include HTML comments to explain the
purpose of each section of the code, as if documenting for future developers. Provide a brief
discussion on why a static page does not include dynamic content and how this limitation impacts
the overall functionality and user interaction.

3.1 HTML code of bookstore

<!DOCTYPE html>
<html lang="en">
<!-- Essential data of our website -->
<head>
<link rel="stylesheet" href="[Link]">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>"Magic Time" bookstore</title>
</head>
<!-- Start of website code-->
<body>
<!-- The head and info about shop with navigation menu -->
<header class="header">
<nav class="menu">
<ul class="nav_list">
<li class="nav_item">Home</li>
<li class="nav_item">New books</li>
<li class="nav_item">Bestsellers</li>
<li class="nav_item">Sale</li>
<li class="nav_item">Contacts</li>
</ul>
</nav>
<div class="name">
<h1>Magic <br> Time</h1>
<p class="intro">Your best bookstore!<br>
Everything you need in one place</p>
</div>
<!-- The logo of the website -->
<img class="logo" src="[Link]" alt="Girl with book and a cup of coffee">
</header>
<!-- main section of website -->
<main class="main_container">
<!-- About us section -->
<section class="about">
<h2>About us</h2>
<p class="text_about">Hello, dear bookworm! <br>
12
 We are happy to see you in our store! Feel free to contact us if there are any questions!<br>
Do not forget to check our sale section!</p>
</section>
<!-- New books section -->
<section class="new_books">
<h2>New in store</h2>
<p>There is new books</p>
<!-- The list of new books -->
<ul class="new_list">
<li class="new_item">The Ballad of Songbirds and Snakes (2020)</li>
<li class="new_item">Sunrise on the Reaping (2025)</li>
<li class="new_item">How to Solve Your Own Murder: A Novel</li>
<li class="new_item">Careless People: A Cautionary Tale of Power, Greed, and Lost
Idealism</li>
<li class="new_item">The Next Conversation: Argue Less, Talk More</li>
</ul>
</section>
</main>
<!-- The footer of the site -->
<footer class='footer'>
<h2>Contacts</h2>
<p>Want to know more or just chat?
You are welcome!</p>
<button class='send_message'>Send us message</button>
</footer>
</body>
</html>
3.2 HTML5 and tags explanation
HyperText Markup Language, or HTML, is the standard markup language for describing the
structure of documents displayed on the web. HTML consists of a series of elements and attributes
which are used to mark up all the components of a document to structure it in a meaningful way
(Web dev, 2022).

The structure of HTML documents:

Basic tags: <!doctype html>, <html>, <head>. <head> tag includes information about
document: <tittle>, links to design (css) and scripts (Java Script), other metadata like <meta
charset="UTF-8"> etc.

<body> - the whole body of document including header, main, footer etc.

Header: <header>.

Navigation: <nav>.

Main content: <main>. Includes different types of tags like <article>, <p>, <section>, <div> etc.

Side block: <aside>, usually includes in <main> section.

13
 Footer: <footer>. (MDN Contributors, n.d.).

Table 6. HTML document structure. Created by author.

HTML tag Explanation

<section> The main part of the website. Includes

everything except of footer and header

<footer> The footer. Usually are used for contacts or

copyright

<h1> The biggest heading (the main)

<p> Block of text for description or something else

<ul> Tag for unnumbered list

<li> The element of the list

<img> This tag allows to insert an image in site.

<header> This is the head of the site. Usually is used

for logo or title.

<nav> Block of navigation with menu and links

alt Alt is used for adding a text explanation for

image if the image cannot be displayed for
some reason.

class Class is often used to point to a class name

in a style sheet. It can also be used by
JavaScript to access and manipulate
elements with the specific class name. (MDN
Contributors, n.d.).

Table 7. HTML tags explanation Created by author.

3.3. Why a static page does not include dynamic content and how this limitation impacts the
overall functionality and user interaction.

This page is built using only HTML, making it a static page. Static pages don't include animations,
server or database connections, so they can accept user input like files or images, but cannot send
these data to the server. After refreshing the page all the data will disappear. They also can't store
user data or session states. Because of these limitations, static pages aren't suitable for online
stores. However, they work well for simple websites like portfolios. For more advanced features,
it's better to use technologies like PHP, JavaScript, and connect the site to a server and a CMS.

14
 Task 4:
In the context of web design, compare and contrast the fixed, fluid, adaptive, and responsive layout
approaches. Your answer should outline the primary characteristics of each layout type, including
their adaptability to different screen sizes. Explain how these layouts handle content presentation
and user experience on various devices, such as desktops, tablets, and smartphones. Additionally,
discuss the role of grid systems in these layouts and how breakpoints are used to enhance layout
flexibility. Provide practical examples of when each layout type might be most appropriate. Finally,
evaluate the advantages and disadvantages of each approach in terms of usability and design
efficiency.

4.1. General overview of the layouts with pros and cons

Responsive web design enables a web page’s design and layout to automatically adapt to any
screen size. The design technique uses CSS media queries (a tailored style sheet) to inspect the
end user’s device characteristics. The website then renders itself accordingly. (Wix blog, n.d.).

Pros Cons

Consistent content experience across all Less control over how the site renders on each
platforms device

Works on new devices, even those with non- Can hinder visual hierarchy if elements reflow
standard screen dimensions in the wrong order or size

Requires more design expertise, cross-

platform testing and design tweaks

Hinders website performance as dynamic

content takes more work to load (Wix blog,
2024)

Table 8. Responsive web design. Created by author.

Adaptive web design enables a web page to load a static, pre-made layout based on the
detected device. To make this happen, a designer must create different designs based on varying
screen widths (Wix blog n.d.). The most common widths are (in pixels):

• 320
• 480
• 760
• 960
• 1200
• 1600

15
 Pros Cons

Creates a perfectly-tailored experience for Can negatively impact SEO if content

each platform and context inconsistent across all devices (Wix blog, n.d.).

High performing, as the design is optimized for

the target device

Easy to perfectly fit advertisements and other

third-party integrated content

Table 9. Adaptive web design. Created by author.

Fluid layouts form the foundation of responsive design. It uses relative units like percentages
rather than fixed pixels allowing the layout to resize proportionally to fill the available width of the
screen or window (Robbins, 2018).

Layout designers can convert fixed pixel measurements to percentages using the formula: target ÷
context = result. The target is the size of the element you are resizing, the context is the size of
the containing element, and the result is a percentage you can use in in your style rules (Robbins,
2018).

Pros Cons

Flexible width for any screen Content may "stretch" too much

Better than fixed on different devices Harder to control design consistency

Easier to develop compared to responsive or

adaptive layouts

Table 10. Fluid web design. Created by author.

A fixed website layout has a wrapper that is a fixed width, and the components inside it have
either percentage widths or fixed widths. The important thing is that the container (wrapper)
element is set to not move. No matter what screen resolution the visitor has, he or she will see the
same width as other visitors (Kay, 2009).

Pros Cons

The easiest layout to develop and support Not adaptable to screen sizes

Provide a full control over design Causes horizontal scroll on mobile

Overall, totally not suitable for phones

Table 11. Fixed web design. Created by author.

16
4.2. Grid systems and breakpoints

A grid system is a structure system of the site. This helps to organize elements of the page in
consistent order that helps users to use websites and interact with their content. We can call grids
“the skeleton of the website”. There are 5 grid systems that are commonly used in developing
websites.

Block grid system or single-column grid

This simple block grid features a large, central rectangular column, filling most of the page space
within the margins.

Block grids support a vertical reading experience, drawing the reader’s eyes downward. This is
ideal for text-heavy content like blogs, newsletters, articles, or an About Us page. Google Docs and
Microsoft Word both use block grids (Figma Resource Library, n.d.).

Column grid

This grid can be recognized from print and digital newspapers, which organize content into
columns. Media sites range from two to 12-column grids, but three are considered the UX sweet
spot.

With a column grid layout, text, visual elements, and videos fit within the column's vertical lines and
flowlines. A classic web design use case for column grids is a pricing page, where site visitors can
easily compare and contrast cost and feature differences to inform purchases (Figma Resource
Library, n.d.).

17
 Figure 19. Schematic view of column grid. Created by author via Canva
Baseline grid

A baseline grid is like a piece of notebook paper—a dense grid with equally spaced horizontal
lines. These lines dictate where text must fit, aligning text throughout the document for scalability.
The once-standard 8px grid system uses a 4px baseline—but today, web designers measure text
size in REM to ensure it meets scalability and size standards for accessibility (Figma Resource
Library, n.d.).

Figure 20. Schematic view of baseline grid. Created by author via Canva

18
Hierarchical grid

Hierarchy allows you to organize modules and other page elements in order of importance, while
offering a more flexible, responsive page design.

Figure 21. Schematic view of hierarchical grid. Created by author via Canva

Modular grid
Most websites and apps that display a gallery of images rely on modular grids to organize content
into neat columns and rows. For example, a user’s profile on Instagram displays videos and photos
in modules. Clothing websites often show products in modular fashion for easy comparison (Figma
Resource Library, n.d.).

This grid combines the other types of grids such as columns, hierarchy, baselines, and
manuscripts in one structure.

19
 Figure 22. Schematic view of modular grid. Created by author via Canva.
Breakpoints

Breakpoints are customizable widths that determine how your responsive layout behaves across
device or viewport sizes (Bootstrap documentation, n.d.).

Core concepts

• Breakpoints are the building blocks of responsive design. Use them to control when your
layout can be adapted at a particular viewport or device size.
• Use media queries to architect your CSS by breakpoint. Media queries are a feature of
CSS that allow you to conditionally apply styles based on a set of browser and operating
system parameters. We most commonly use min-width in our media queries.
• Mobile first, responsive design is the goal. Bootstrap’s CSS aims to apply the bare
minimum of styles to make a layout work at the smallest breakpoint, and then layers on
styles to adjust that design for larger devices. This optimizes your CSS, improves rendering
time, and provides a great experience for your visitors (Bootstrap documentation, n.d.).

As we talk about Bootstrap, it has six default breakpoints: x-small - <576px, small – sm - ≥576px,
medium – md - ≥768px, large – lg - ≥992px, extra large – xl - ≥1200px and extra-extra large – xxl -
≥1400px (Bootstrap documentation, n.d.).

20
 Task 5:
Create a simple web application that manages a list of books using JSON data. The application
should include a basic interface for displaying and manipulating book information.

JSON Data Structure: Define a JSON object to represent a list of books, where each book has
attributes such as title, author, year, and genre. Ensure that your JSON data includes at least three
example books.

Display Data: Write a JavaScript function to parse the JSON data and display it in an HTML table.
The table should have columns for Title, Author, Year, and Genre. Show how the data from the
JSON object is dynamically inserted into the table.

Update Data: Implement a feature that allows users to update the details of a book. Provide an
input form where users can enter the title, author, year, and genre of the book they wish to update.
After submission, the book’s information should be updated in the JSON data and reflected in the
HTML table.

Remove Data: Add a function to remove a book from the list based on its title. Provide a way for
users to specify the title of the book they want to remove. Once removed, the book should be
deleted from the JSON data and the HTML table should be updated accordingly.

Validation: Include basic validation to ensure that book details are not left blank and that the year is
a valid number. Describe how you handle validation errors and ensure that users are prompted to
correct any mistakes before updating or removing data.

In your response, include examples of the JSON data structure, JavaScript functions, and
screenshots or code snippets showing how the data is displayed and manipulated in the web
application. Discuss how using JSON simplifies data management in this context and any
challenges you encountered during the implementation.

5.1. Source code

Full code of this task is here -

[Link]

5.2. JSON data management

JSON is the simple text data format that usually is used with JavaScript. However, it can be used
with other programming languages such as Python, Java, etc. without any restrictions.
Advantages of JSON:

• Simple syntax. JSON’s syntax is easy to write and understand. One doesn’t even need to
know JavaScript to use JSON’s files.

21
 • Compatible with many programming languages. It can be used with whatever language
one wants.
• Lightweight and Fast. JSON files are smaller and can be loaded by browser much faster,
than XML, for example.
• Flexible Data Types. JSON can store arrays, text data, ordered list, etc. It also can handle
complex data structures.
• Wide Browser Support. All modern browsers work with JSON.

Thanks to its simplicity, speed, flexibility, and broad compatibility, JSON has become one of the
most popular data formats in web development and beyond. It's easy to use, works across different
languages and platforms, and efficiently handles both simple and complex data. Whether you're
building a small app or a large system, JSON helps make data exchange smooth and reliable.

5.3. Examples

Figure 19. Example of JSON data structure. Created by author.

Figure 20. Overview of the book manager. Created by author.

22
Figure 21. Overview of the validation output. Created by author.

23
 Task 6:
Consider a peer-to-peer (P2P) marketplace platform where individuals can buy and sell used
items, such as electronics, clothing, and furniture. This platform allows users to create listings,
communicate with buyers and sellers, and complete transactions. Evaluate the security aspects of
this P2P marketplace, addressing the following areas:

1. Access Control: Discuss the importance of implementing robust access control mechanisms in
the P2P marketplace platform. Explain how different user roles, such as buyers, sellers, and
administrators, should have distinct access levels. Detail the security risks associated with
inadequate access controls, such as unauthorized access to user data or the ability to manipulate
listings. Propose solutions to enforce access control policies effectively, ensuring that users have
appropriate permissions based on their role and activities.

2. OWASP Risks: Analyze three relevant risks from the OWASP Cloud Top 10 list that could affect
the P2P marketplace. For instance, consider "Sensitive Information Disclosure," "Broken
Authentication," and "Insecure Direct Object References." Provide examples of how these risks
might manifest in the platform, such as exposure of personal details in user profiles or flaws in the
authentication process that could lead to unauthorized transactions. Suggest mitigation strategies
to address these risks, including encryption for sensitive data and improved authentication
mechanisms.

3. Server Configuration and Port Management: Examine the significance of proper server
configuration and port management in securing the P2P marketplace. Explain how misconfigured
servers or open ports could introduce vulnerabilities, such as unauthorized access or data
breaches. Describe best practices for configuring servers and managing ports to protect the
platform, including using firewalls to restrict access and minimizing the number of open ports.

4. Denial of Service (DoS) and Distributed Denial of Service (DDoS): Define Denial of Service
(DoS) and Distributed Denial of Service (DDoS) attacks and discuss their potential impact on the
availability of the P2P marketplace. Outline measures to safeguard the platform from these attacks,
such as implementing traffic monitoring, using rate limiting, and employing DDoS protection
services. In your answer, provide a comprehensive assessment of each security concern,
incorporating practical examples related to the P2P marketplace to illustrate your points.

6.1. Access control

Access control is the traditional center of gravity of computer security. It is where security
engineering meets computer science. Its function is to control which principals have access to
which resources in the system — which files they can read, which programs they can execute, how
they share data with other principals, and so on (Anderson, 2020).

24
Access control is essential for every internet resource and most of all for p2p platforms where
people leave their personal data.

Roles:

Buyers Can browse listings, communicate with sellers,

and make purchases. Should have a usual
account to communicate with sellers.

Sellers Can create, edit, and delete their own listings,

communicate with buyers. Should have a
usual account to publish advertisements.

Administration Have full access to user data, account with

moderation tools, and system settings.

Table 12. User roles. Created by author.

Possible problems:

1. A seller or buyer can access admin tools and manipulate or steal the data.
2. A buyer or seller can see private information such as messages or hidden profiles.
3. Malicious users can bypass role restrictions to elevate their privileges.
4. Users can edit other people’s advertisements or even delete them.

Solutions:

1. Role-Based Access Control (RBAC): Allow users to have permissions based on their
roles (usual user: seller/buyer and admins).
2. Principle of Least Privilege (PoLP): Users get only those privileges they need to use the
platform.
3. Access control enforcement on both frontend and backend.
4. Audit logs that can be used for critical actions and periodic access reviews.

6.2. OWASP Risks

The OWASP Top 10 is a standard awareness document for developers and web application
security. It represents a broad consensus about the most critical security risks to web applications
(OWASP Foundation, 2021).

The Top 10 risks include the following:

1. Broken Access Control

2. Cryptographic Failures
3. Injection
4. Insecure Design
5. Security Misconfiguration
6. Vulnerable and Outdated Components

25
 7. Identification and Authentication Failures
8. Software and Data Integrity Failures
9. Security Logging and Monitoring Failures
10. Server-Side Request Forgery (OWASP Foundation, 2021)

Possible risks for p2p platform considered in the task:

1. Sensitive Information Disclosure. This includes user data such as emails, phone
numbers, addresses, first and last names. Without proper encryption and data masking,
this information is vulnerable.
2. Broken Authentication. This includes weak password policy and lack of two-factor (2FA)
authentication.
3. Insecure Direct Object References (IDOR). This includes the possibility of manipulations
with object IDs to list private information. For example, the attacker may change object ID
from /orders/1001 to /orders/1002 to expose private information about another user.

Solutions:

1. Proper encryption. Using HTTPS protocols for all data transmissions can increase
security. Also, the platform should encrypt sensitive data at rest using algorithms such as
AES-256, and limit visible personal data.
2. Increase password requirements and 2FA. Enforce strong password requirements,
implement 2FA, and use secure cookie attributes such as HttpOnly, Secure, SameSite.
3. Validation of access. The platform should check user rights and validate access to every
resource server-side, use indirect object references (like UUIDs), and avoid exposing
internal IDs in URLs

6.3. Server Configuration and Port Management

A lack of server security can be caused by both developer mistakes in the server software and
errors in how the server is configured. Developer mistakes are often fixed through updates and
patches from the software provider. However, configuring a server is a complex task, and poor
configuration can let attackers access the system. This usually happens due to open ports or
incorrectly set folder access permissions. Risks related to open ports can be reduced by using a
firewall and configuring it properly.

Possible problems:

1. Open or unused ports can expose services to the public internet. For example, if a
database is listening on some port and this port is not firewalled, attackers can attempt
brute-force logins or exploit known vulnerabilities.
2. Default credentials that are still in use (e.g., admin:admin or root:toor) allow easy
unauthorized access to services.
26
 Solutions:

1. Disabling unused services. Each running service represents a potential entry point to
attackers.
2. Using configuration management tools that help to enforce security settings consistently
across environments.
3. Configure firewalls to block all ports by default and only open the necessary ones.
4. Implement log monitoring and alerting tools, which can automatically ban IPs that show
suspicious behavior.

6.4. DoS and DDoS

A denial-of-service (DoS) attack is a type of cyber attack in which a malicious actor aims to render
a computer or other device unavailable to its intended users by interrupting the device's normal
functioning. DoS attacks typically function by overwhelming or flooding a targeted machine with
requests until normal traffic is unable to be processed, resulting in denial-of-service to addition
users. A DoS attack is characterized by using a single computer to launch the attack (Cloudflare,
n.d.).

A distributed denial-of-service (DDoS) attack is a malicious attempt to disrupt the normal traffic of a
targeted server, service or network by overwhelming the target or its surrounding infrastructure
with a flood of Internet traffic (Cloudflare, n.d.).

Possible problems:

1. Platform can answer user requests slowly or become unavailable

2. Potential financial damage. One can spend a lot of money to negotiate the consequences
of the attacks and lose a lot of money due to the attack.
3. Loss user trust. Platform can lose user trust if the defense is weak.
4. Payment system failures and inability to conduct transactions.

Solutions:

1. Rate limiting. Limit amount of possible request with tools cush as NGINX, Cloudflare, or
API Gateway.
2. Deploying Web Application Firewalls (WAFs). A WAF or web application firewall helps
protect web applications by filtering and monitoring HTTP traffic between a web application
and the Internet (Cloudflare, n.d.).
3. Monitoring traffic with tools like Prometheus and Grafana. This helps differentiate high
traffic from possible attacks.
4. Using DDos protection services like Cloudflare, AWS Shield, Akamai. CDN or cloud-
based DDoS protection services can provide protection against attackers.

27
 Appendix A. List of figures
1. Figure 1. Example of static website. Source: Modern CSS, 2024.
2. Figure 2. Example of dynamic website. Source: H&M web store, 2025.
3. Figure 3. Initializing repository. Created by author.
4. Figure 4. Project folder. Created by author.
5. Figure 5. Git config. Created by author.
6. Figure 6. Git config (local project config). Created by author.
7. Figure 7. Changes in config file. Created by author.
8. Figure 8. Git add. Created by author.
9. Figure 9. Git status of my project. Created by author.
10. Figure 10. Git commit. Created by author.
11. Figure 11. Git diff. Created by author.
12. Figure 12. Git remote add origin. Created by author.
13. Figure 13. Git remote add origin. Created by author.
14. Figure 14. File added to GitHub. Created by author.
15. Figure 15. Git log. Created by author.
16. Figure 16. Git cat-file. Created by author.
17. Figure 17. Git cat-file blob output. Created by author.
18. Figure 18. Git cat-file blob and tree. Created by author.
19. Figure 19. Schematic view of column grid. Created by author via Canva.
20. Figure 20. Schematic view of baseline grid. Created by author via Canva.
21. Figure 21. Schematic view of hierarchical grid. Created by author via Canva.
22. Figure 22. Schematic view of modular grid. Created by author via Canva.

28
 Appendix B. List of tables
1. Table 1. Static websites overview. Created by author.
2. Table 2. Dynamic websites overview. Created by author.
3. Table 3. ISO criteria explanation. Created by author.
4. Table 4. CVCS vs. DVCS. Created by author.
5. Table 5. Object types in Git. Created by author.
6. Table 6. HTML document structure. Created by author.
7. Table 7. HTML tags explanation Created by author.
8. Table 8. Responsive web design. Created by author.
9. Table 9. Adaptive web design. Created by author.
10. Table 10. Fluid web design. Created by author.
11. Table 11. Fixed web design. Created by author.
12. Table 12. User roles. Created by author.

29
 Appendix C. Bibliography
1. Anderson, R. (2020). Security Engineering: A Guide to Building Dependable Distributed
Systems 3rd Edition. Wiley Publishing, Inc.
2. Bootstrap (n.d.). Bootstrap documentation. [Link]
started/introduction/
3. Chrome team. (n.d.). Overview of HTML | [Link]. [Link].
[Link] \
4. Cloudflare. (n.d.). What is a DDoS attack? [Link]
ru/learning/ddos/what-is-a-ddos-attack/
5. Cloudflare. (n.d.). What is a denial-of-service attack? [Link]
ru/learning/ddos/glossary/denial-of-service/
6. Figma Resource lab. (n.d.). 5 top web design grid layout examples.
[Link]
modular-grid
7. Figma Resource lab. (n.d.). Static vs. dynamic websites: Which website is right for you?
[Link]
websites
8. Git SCM. (n.d.). Git documentation. [Link]
9. Gitlab about. (n.d.). What is version control? [Link]
10. International Organization for Standardization. (2023). Systems and software engineering
— Systems and software Quality Requirements and Evaluation. (ISO Standard No.
ISO/IEC 25010:2023.) [Link]
11. Kay, M. (2009, June 2). Fixed vs. fluid vs. elastic layout: What’s the right one for you?
Smashing Magazine. [Link]
layout-whats-the-right-one-for-you/
12. MDN Contributors. (n.d.). Structuring the web with HTML: Structuring a page of content.
MDN Web Docs. [Link]
US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents
13. MDN Contributors. (n.d.). HTML: Global attributes. MDN Web Docs.
[Link]
14. OWASP Foundation. (2021). OWASP Top 10: The ten most critical web application security
risks. [Link]
15. Robbins, J. N. (2018). Learning Web Design: A Beginner’s Guide to HTML, CSS,
JavaScript, and Web Graphics. O’Reilly Media.
16. Wix. (n.d.). Responsive vs. adaptive design: What’s the difference and which should you
use? [Link]

The source code

1. Task 5 source code.
[Link]

30