Client-Server Model
A web browser (client) communicates with a web server to load a
website. When you type a URL into the browser (e.g.,
www.example.com), the browser (client) sends an HTTP request to
the server where the website is hosted. The server processes the
request and sends back the web page, which the browser displays.
Multi-Tier Architecture (3-Tier, N-Tier)
3-Tier Architecture:
o Presentation Layer: A banking app’s user interface on your
phone, where you can log in, view your balance, and transfer
funds.
o Business Logic Layer: The backend processing system that
handles the logic of your transaction, such as checking if there
are sufficient funds and processing the transfer.
o Data Layer: The database that stores user information,
account balances, and transaction records.
In an N-tier architecture, additional layers might include separate
services for reporting, user authentication, and data analytics, each
handled by a distinct module.
Web Protocols (HTTP, HTTPS)
Example: When you search on Google, the browser uses HTTPS
(https://www.google.com). The "S" in HTTPS means the
communication is encrypted, protecting your search data from
interception. HTTP (without SSL encryption) was commonly used for
websites without sensitive data, but most modern websites now use
HTTPS to ensure data security. Responsive Web Design (RWD)
Explanation: RWD ensures that a website looks and functions well
on any device or screen size, from mobile phones to large desktop
monitors. It uses flexible grids, layouts, images, and CSS media
queries to automatically adjust and adapt the design based on the
user’s screen.
Example: A news website like BBC News adjusts its layout to
display a multi-column format on desktops and a single-column,
scrollable format on mobile devices. This way, readers can easily
access and navigate the content on any device without zooming or
excessive scrolling.
User-Centered Design (UI/UX)
Explanation: User-centered design focuses on understanding the
end-user’s needs, preferences, and behaviors to create an intuitive,
enjoyable, and efficient user experience. UI (User Interface) design
involves the visual aspects of the website, while UX (User
Experience) focuses on how users interact with the site.
Example: Airbnb’s website is a great example of user-centered
design. The interface is clean and simple, with a prominent search
bar for quick location and date input. The design helps users quickly
find, filter, and book accommodations, enhancing their experience
by making the process as straightforward as possible.
Accessibility (WCAG Standards)
Explanation: Accessibility ensures that a website is usable by
everyone, including people with disabilities. The WCAG (Web
Content Accessibility Guidelines) provide standards for making
web content accessible. Key aspects include providing text
alternatives for images, keyboard navigation, screen reader
compatibility, and color contrast.
Example: Apple’s website is designed with accessibility in mind,
allowing screen readers to interpret content for visually impaired
users, and providing keyboard navigation for users who may not use
a mouse. They also adhere to color contrast standards to ensure
text is readable against its background.
Web Typography and Color Theory
Explanation: Typography and color are essential for readability and
visual appeal. Web typography focuses on choosing appropriate
fonts and font sizes that enhance readability, while color theory
involves selecting harmonious colors that create a balanced, visually
appealing design and convey the right emotions or branding.
Example: Spotify uses a clean, sans-serif font with a high-contrast
color scheme (black, white, and green) that aligns with its modern
and energetic branding. This design not only makes text easy to
read but also reinforces Spotify’s brand identity, creating a
memorable visual experience for users.
Common Vulnerabilities (e.g., XSS, CSRF, SQL Injection)
Explanation: Common vulnerabilities expose web applications to
security risks.
XSS (Cross-Site Scripting): An attacker injects malicious scripts
into a trusted website, potentially compromising user data.
CSRF (Cross-Site Request Forgery): Tricks a user’s browser into
executing unwanted actions on another site where they’re
authenticated.
SQL Injection: An attacker manipulates a website’s database
query, gaining access to sensitive information or altering the
database.
Example: If a website's search bar isn’t properly secured, an
attacker could enter malicious SQL code into the search field to
retrieve all user data. Preventative measures include input
validation and parameterized queries to prevent such exploits.
Authentication and Authorization Mechanisms
Explanation: Authentication verifies a user’s identity, while
authorization determines access permissions based on that identity.
Authentication Methods: Password-based, two-factor
authentication (2FA), biometrics, OAuth, etc.
Authorization: Role-based access control (RBAC) restricts access
based on user roles, ensuring users can only access authorized
resources.
Example: An online banking app might use 2FA for authentication
(e.g., a password and a one-time code sent to the user’s phone) and
limit access to certain features based on the user’s role (e.g.,
customer vs. admin).
SSL/TLS Encryption
Explanation: SSL (Secure Sockets Layer) and its successor, TLS
(Transport Layer Security), are protocols that encrypt data
transmitted between a user’s browser and the web server. This
protects data integrity and confidentiality, especially for sensitive
transactions like logins or payments.
Example: When you log in to your email, your browser connects via
HTTPS, which uses SSL/TLS to encrypt the data (e.g., your
password), preventing it from being intercepted in transit by
attackers.
Security Best Practices for Web Applications
Explanation: Following security best practices helps protect web
applications from vulnerabilities.
Input Validation and Sanitization: Validating and sanitizing user
inputs to prevent SQL injection and XSS.
Regular Security Audits and Penetration Testing: Identifying
and addressing vulnerabilities before they can be exploited.
Error Handling and Logging: Displaying generic error messages
to avoid revealing system details, while logging errors for review by
administrators.
Use of Security Headers: Setting HTTP security headers like
Content Security Policy (CSP) to control resources that the browser
is allowed to load.
Example: An e-commerce website might use input validation to
check for malicious code in form inputs, implement CSP to prevent
the loading of unauthorized scripts, and employ HTTPS for all
transactions, ensuring a secure user experience.
