Deployment of web applications involves making them accessible online.

Key aspects include

hosting, build processes, and environment configuration.

Hosting:

 Firebase Hosting:

A Google-provided platform for hosting static and dynamic web content. It offers fast,
secure, and scalable hosting with features like global CDN, automatic SSL, and integration
with other Firebase services. Deployment typically involves using the Firebase CLI to initialize
a project, configure [Link], and then deploy using firebase deploy.

 Vercel:

A platform for frontend developers, optimized for serverless functions and static sites. It
provides automatic deployments from Git repositories, instant previews for every commit,
and automatic HTTPS. Deployment on Vercel often involves linking a Git repository (GitHub,
GitLab, Bitbucket) and configuring project settings.

Build & Environment Configuration:

 Build Process:

Before deployment, web applications, especially those built with frameworks like React,
Angular, or Vue, require a build process. This typically involves compiling code, optimizing
assets (e.g., minification, bundling), and generating static files ready for deployment. Build
commands are specified in the project's configuration (e.g., [Link] for [Link]
projects).

 Environment Variables:

Web applications often need different configurations for various environments

(development, staging, production). Environment variables are used to manage these
differences, storing sensitive information (API keys, database credentials) and configuration
settings specific to each environment.

 Local Development: Variables are often stored in .env files

(e.g., .[Link]).

 Deployment Platforms: Platforms like Firebase and Vercel provide

mechanisms to securely store and manage environment variables for
deployed applications, ensuring sensitive data is not exposed in source code.

 Configuration Files:

Platforms like Firebase use configuration files (e.g., [Link]) to define hosting behavior,
rewrite rules, and other deployment-specific settings. Vercel also uses project settings and
configuration within its dashboard to manage deployments and environment variables.
Web application security involves protecting applications from attacks like Cross-Site
Scripting (XSS) and Cross-Site Request Forgery (CSRF). Practices such as linting and unit
testing with tools like Jest help enforce code quality and prevent vulnerabilities from being
introduced.

Cross-Site Scripting (XSS)

XSS is a vulnerability where an attacker injects malicious scripts into a trusted web page,
which then execute in the victim's browser.

 How it Works: The application includes untrusted user-supplied data in its output
without proper validation or encoding. The victim's browser executes the script,
which can then steal session cookies, sensitive data, or perform actions on the user's
behalf.

 Types:

o Stored XSS: The malicious script is permanently stored on the target server
(e.g., in a database via a comment section) and is delivered to every user who
views the compromised page.

o Reflected XSS: The malicious script is part of the victim's request (e.g., in a
URL parameter) and is "reflected" back by the server in the response, then
executed by the browser.

o DOM-based XSS: The vulnerability exists in client-side code that processes

data from the URL or other sources and dynamically writes it to the
Document Object Model (DOM) without proper handling.

 Prevention:

o Input Validation and Sanitization: Rigorously filter and validate all user input
on the server side.

o Output Encoding: Properly encode user-supplied data before rendering it in

the browser to prevent it from being interpreted as executable code.

o Content Security Policy (CSP): Implement a strong CSP to restrict the sources
from which scripts can be loaded and executed, adding a layer of defense at
the browser level.

Cross-Site Request Forgery (CSRF)

CSRF is an attack that tricks an authenticated user into executing unintended actions on a
web application in which they are currently logged in.

 How it Works: An attacker crafts a malicious request (e.g., a hidden form or an image
tag with a malicious URL) and social engineers the victim into triggering it. The
victim's browser, being authenticated with the target site, automatically includes
 session credentials (like cookies) with the forged request. The server, unable to
distinguish it from a legitimate request, processes the action.

 Prevention:

o Anti-CSRF Tokens: Use unique, secure, random tokens for each user session
and include them in all state-changing requests (e.g., in a hidden form field or
an HTTP header). The server then verifies the token's validity, rejecting any
forged requests.

o SameSite Cookies: Set the SameSite cookie attribute to Lax or Strict to control
when cookies are sent with cross-site requests, significantly reducing the
CSRF attack surface.

o Referer Header Validation: Verify the origin of the request using

the Referer or Origin HTTP headers to ensure it is from the expected domain.

Role of Linting and Unit Testing with Jest

Linting is a form of static code analysis that checks source code for programmatic and
stylistic errors, potential bugs, and security vulnerabilities early in the development process.

 Security Benefits: Linters can enforce coding standards and best practices that
prevent common mistakes leading to vulnerabilities (e.g., flagging the use of insecure
functions or the direct use of user input without sanitization). It helps shift security
left, finding issues when they are cheapest and easiest to fix.

Unit Testing with Jest is a dynamic testing method focusing on individual units of source
code (functions, methods, etc.) to ensure they work as expected.

 Security Benefits:

o Validating Security Controls: Jest can be used to write tests that specifically
validate security controls, such as checking if an input validation function
correctly identifies and rejects malicious payloads (e.g., XSS attack strings).

o Testing Edge Cases: Developers can write tests for unusual or unexpected
inputs to ensure the application is robust and doesn't crash or expose data
under abnormal conditions.

o Regression Prevention: A comprehensive suite of unit tests acts as a safety

net during code refactoring, ensuring that new changes don't accidentally
reintroduce old security vulnerabilities.

o Isolation and Mocking: Jest's ability to mock external dependencies allows

for focused testing of security logic without relying on external services (e.g.,
mocking an API response to test error handling).