Web Basics & Request Lifecycle PDF

Web Basics & Request LifeCycle Youssef Ghatas  Agenda Web Basic Concepts IP Address API Domain Name Frontend (Client Side) DNS Backend (Server Side) GeoDNS...

Web Basics & Request LifeCycle Youssef Ghatas  Agenda Web Basic Concepts IP Address API Domain Name Frontend (Client Side) DNS Backend (Server Side) GeoDNS Web Server HTTP AJAX HTTPS Web Development Concepts CDN Request Response Software Engineering 2  IP – Port - Domain name Concepts DNS – GeoDNS HTTP/HTTPS Web Server? Web Sites FE: HTML – CSS – JS evolution BE: Backend Get & Deploy Choices? a server How to deploy Web Browser Cookies Session Storage Storage Local Storage Software Engineering  IP Address & Domain Name IP (Internet Protocol) address 157.240.201.35 A unique identifier for devices on a network, used to route data between them. Domain name Facebook.com A human-readable address used to access websites or resources on the internet. It provides a user-friendly way to navigate the internet, translating into an IP address for computer network communication. Software Engineering 4  DNS DNS (Domain Name System): naming system for computers, services, or other resources connected to the internet or a private network. It translates human-readable domain names (e.g., facebook.com) into corresponding IP addresses (e.g., 157.240.201.35). 157.240.201.35 Ex: Google Public DNS - Cloudflare DNS Software Engineering 5  GeoDNS GeoDNS (Geographical DNS): Is an extension to DNS that allows different DNS answers based on client's geographical location 157.240.201.35 82.82.2.12 Software Engineering 6  Port In addition to the IP, you need a port to connect to the server Port: A numbered endpoint on a computer for network communication, allowing multiple services to run simultaneously. Ports are identified by numbers ranging from 0 to 65535. Ports enable clients to connect to a particular service on a server using its IP address and port number. Software Engineering 7  HTTP HTTP (HyperText Transfer Protocol) is a standard protocol used for transferring and receiving information on the web. It defines how messages are formatted and transmitted, and how web servers and browsers respond to various commands. HTTP operates as a request-response system, where a client (e.g., browser) sends requests for resources, and a server provides responses containing the requested data (e.g., HTML, images) and status information. HTTP typically uses TCP/IP (Reliable): Ack Retry Chunks Software Engineering 8  HTTP Security Software Engineering 9  HTTPS A secure version of HTTP. It adds encryption so that only the website and the client can read the data sent over the Internet. The website encrypt the message with a key that can only be decoded with the user key. HTTP uses port 80 HTTPS uses port 443 HTTPS needs certificate, how? Free: Certbot (LetsEncrypt) Paid: Why? Software Engineering 10  CDN CDN (Content Delivery Network) is a network of distributed servers strategically placed to deliver web content (e.g., images, videos, scripts) to users efficiently by minimizing latency and improving website performance. Amazon CloudFront – Cloudflare - Microsoft Azure CDN - Google Cloud CDN Software Engineering 11  CDN Software Engineering 12  HTTP(S) Request & Response Author: Seobility - License: CC BY-SA 4.0 Software Engineering 13  IP – Port - Domain name Concepts DNS – GeoDNS HTTP/HTTPS Web Server? Web Sites FE: HTML – CSS – JS evolution BE: Backend Get & Deploy Choices? a server How to deploy Web Browser Cookies Session Storage Storage Local Storage Software Engineering  Imaginary Evolution of Websites /srv/image.png example.com/image.png Static Files How can we convert a normal PC to Server Software Engineering 15  Imaginary Evolution of Websites We need a tool to convert a normal PC to a server! Web Server (Apache, Nginx, IIS) Listens for Requests Serves Files and Content Reroute requests to the correct backend code base. Sends Responses Logs and Monitoring Security: Limit unauthorized. HTTP & HTTPS Manages Connections (some tweaks can be very critical) Software Engineering 16  Imaginary Evolution of Websites Nginx Example server { listen 80; server_name example.com; # Replace with your domain or IP address location /{ root /path/to/your/html/file/directory; # Replace with the actual path index index.html; # index file is index.html } } Software Engineering 17  Imaginary Evolution of Websites example.com/home Static HTML only Files Software Engineering 18  Imaginary Evolution of Websites example.com/home Static HTML + CSS Files FE only What if the server does an operation based on input (assume the it adds two numbers) Software Engineering 19  Imaginary Evolution of Websites example.com/add?n1=1&n2=2 HTML + CSS 3 PHP NodeJS … HTML FE + BE CSS 3 What if we want the page to be dynamic (animation or reload part without refresh)? Software Engineering 20  Imaginary Evolution of Websites example.com/add?n1=1&n2=2 HTML + CSS + JS 3 PHP NodeJS … HTML CSS JS 3 FE + BE Software Engineering 21  Imaginary Evolution of Websites example.com/ 2+1 HTML + CSS + JS 3 PHP NodeJS … FE + BE HTML CSS Change 3 JS + AJAX Page without refresh Page is loaded now Software Engineering 22  Let’s make our system more complicated! We need to store user data (on the server or on another)? We need to store user files (on the server or on another)? We need to deal with machine learning model? We need to send mails? Software Engineering 23  Journey: Running your server Software Engineering 24  The code is done, how do we deploy (Basic Method) Choosing a Hosting Provider Server Types Shared hosting: it is like sharing your apartment (CPU, Memory, etc) Virtual private servers (VPS): Still sharing the physical machine, but your resources are assigned to you. Dedicated servers: Your server Sort by Price! Cloud hosting: Pay for what you need (multiple services) + Dynamic Domain Setup Rent domain name How can users reach it? DNS Propagation We are ready and have a machine, how can we put Software Engineering our work? 25  The code is done, how do we deploy (Basic Method) Access the server SSH Install Pre-requisites For example: PHP, MySQL, Apache… Upload Project Files FTP, SFTP Configuration Set environmental variables Ex: DB Password. Set Apache configuration Generate Certificate & Configure them Certbot (LetsEncrypt) CI / CD Software Engineering 26  Getting into Server to install dependencies Software Engineering  SSH https://www.ssh.com/academy/ssh Software Engineering  SSH https://colab.pages.oit.duke.edu/-/external-docs/-/jobs/31499/artifacts/_book/guides/ssh.html Software Engineering  Transferring File: FTP vs SFTP (SSHFTP) Feature FTP (File Transfer Protocol) SFTP (Secure File Transfer Protocol) Data is transferred in plain text, Data is encrypted, providing a secure Security making it vulnerable to transfer over the network. eavesdropping and attacks. Basic authentication based on Secure authentication through SSH Authentication username and password, which can (Secure Shell) keys or credentials. be intercepted. Port Uses port 21 for communication. Uses port 22 for communication. Encryption No built-in encryption. Data is encrypted using SSH protocols. Key Does not support key-based Supports key-based authentication for Authentication authentication. enhanced security. Software Engineering  Transferring File: FTP vs SFTP (SSHFTP) Software Engineering  Web Development Concepts JWT (JSON Web Tokens): are commonly used for authentication and authorization in web applications. https://www.freecodecamp.org/news/how-to-sign-and-validate-json-web-tokens/ Software Engineering  Web Development Concepts JWT (JSON Web Tokens): are commonly used for authentication and authorization in web applications. https://www.freecodecamp.org/news/how-to-sign-and-validate-json-web-tokens/ Software Engineering  Web Development Concepts Cookies: commonly used for storing small amounts of data that need to persist across multiple browser sessions or even when the browser is closed and reopened. They are typically used for tasks like user authentication, and tracking user behavior. Session Storage: Session storage is useful for storing data that needs to be available during the same browser session. Information stored in session storage is accessible as long as the same tab or window is open. It's commonly used for temporary data needed for a specific task or page. For example, page history, or data between pages. Local Storage: Suitable for storing larger amounts of data that need to persist beyond the current session. It's commonly used for caching data, storing user preferences, and saving application state. Software Engineering  Web (Browser) Storage Options * * * Software Engineering https://stackoverflow.com/a/70846045  Web Development Concepts JWT (JSON Web Tokens): Storing Options: 1. HTTP Cookies 2. Session Storage : why not widely used? 3. Local Storage Security of local storage: XSS? Cookie: HTTPOnly? https://www.freecodecamp.org/news/how-to-sign-and-validate-json-web-tokens/ Software Engineering  Question: Choose storage mechanism Scenario: Storing a token for authenticating a user after login. a)Cookies b)Session Storage c)Local Storage Software Engineering  Question: Choose storage mechanism Scenario: Saving a user's selected items in an online shopping cart for a seamless shopping experience across pages. a)Cookies b)Session Storage c)Local Storage Software Engineering  Question: Choose storage mechanism Scenario: Holding form data while the user fills out a multi-step form and ensuring the data is not lost during navigation or accidental refresh. a)Cookies b)Session Storage c)Local Storage Software Engineering  Answers Software Engineering  Question: Choose storage mechanism Scenario: Storing a token for authenticating a user after login. a)Cookies b)Session Storage c)Local Storage Software Engineering  Question: Choose storage mechanism Scenario: Saving a user's selected items in an online shopping cart for a seamless shopping experience across pages. a)Cookies b)Session Storage c)Local Storage Software Engineering  Question: Choose storage mechanism Scenario: Holding form data while the user fills out a multi-step form and ensuring the data is not lost during navigation or accidental refresh. a)Cookies b)Session Storage c)Local Storage Software Engineering  How do we sign in with Facebook, Google,.. oAuth Software Engineering  oAuth The developer creates a facebook App and receives: 1. Client id: can be used directly by user. 2. Client Secret: is only used by the server. Software Engineering  oAuth ? Software Engineering