Csci 571 Exam 1 Midterm Study Guide PDF

Csci 571 Exam 1 Midterm Study Guide ● ● ● ● ● ● ● ● ● ● ● ● ● Make sure you answer 5 before going to next page 60 questions! 12 pages! 5 question per page Questions are T/F, multiple choice and multi-select HTML + CSS DOM JavaScript HTTP Networking JavaScript Advanced (including RegEx) Web Servers...

Csci 571 Exam 1 Midterm Study Guide ● ● ● ● ● ● ● ● ● ● ● ● ● Make sure you answer 5 before going to next page 60 questions! 12 pages! 5 question per page Questions are T/F, multiple choice and multi-select HTML + CSS DOM JavaScript HTTP Networking JavaScript Advanced (including RegEx) Web Servers Forms + CGI + Server-Side Programming Python JSON Notes ● – www.fogdog.com, online sale of sporting goods (domain abandoned) -> ebay ● Web Server Farms ○ Until recently all serious web sites were maintained using web server farms; ■ A group of computers acting as servers and housed in a single location; ○ Internet Service Providers (ISP’s) provide web hosting services using a web server farm ○ Other issues addressed by web server farms include: ■ Redundancy eliminates single point of failure; backup and failover strategy is required ■ Security, secure areas are placed behind firewalls which monitor web traffic, network address translation, port translation, SSL ● Web Hosting Services ○ small businnes/individual ■ Go daddy ■ Ionos ■ Yahoo ■ Hostgator ■ hostPapa is number 1 ○ Bigger companies ■ Rackspace ■ Network solutions ● Major Cloud Service providers ○ Amazon, Google, Microsoft, Salesforce, Skytap, HP, IBM, and Apple (iCloud). ○ Amazon ■ A web service providing resizable compute capacity ■ Amazon Machine Image(AMI) - a virtual computer, running your selected operating system (Linux, Windows, etc) ■ ■ ■ You only pay for running AMI All accounts are limited to 5 Elastic IPv4 addresses per region Amazon Elastic Compute Cloud (EC2) is the Amazon Web Service you use to create and run virtual machines in the cloud (we call these virtual machines 'instances'). ■ The EC2 is used for creating the virtual server instance. The AMI is the EC2 virtual machines image. ■ Amazon currently runs in 8 regions: US East, US West (Oregon), US West (Northern CA), Ireland, Asia Pacific (Singapore), Asia Pacific (Tokyo), Asia Pacific (Sydney), South America (Sao Paulo) ● WebKit is a software component used to render web pages; it is open source. ○ It is used by Google’s Chrome and Apple’s Safari web browsers ○ WebKit is also the name of the Mac OS X system framework version of the engine that's used by Safari, Dashboard, Mail, and many other OS X applications; ○ Chrome and Android (Google), Midori, Safari and Mobile Safari (Apple), Symbian^3 (Nokia) and many others ● Gecko is a layout engine developed by Mozilla Corporation, known as the layout engine of the Firefox web browser. ○ It is used to display web pages and, in some cases, an application's user interface. ○ It offers a rich programming API that makes it suitable for a wide variety of roles in Internet-enabled applications, such as web browsers ○ Its development originated with Netscape Communications Corporation ○ FireFox (Mozilla), Flock, Netscape ● Browser wars: chrome, edge, firefox, safari, opera ● Alibaba’s mobile browser UC Browser beats Chrome in india and indonesia Lecture 2 - Exam material starts below! Notes ● Web server - static content ● Application server - dynamic content ● Web browsers and Web servers communicate according to a protocol known as HTTP (HyperText Transfer Protocol)....current HTTP protocol is 2.0 ● Url:A mechanism whereby an Internet resource can be specified in a single line of ASCII text ○ the double slash is optional but required for HTTP and FTP ○ Port number is optional ■ Ftp - 21 ■ Http - 80 ○ Quotes arent included in url ○ ● Tim Berners-Lee is a British engineer and computer scientist who is credited with inventing the World Wide Web (Nexus) ○ ● The World Wide Web, not to be confused with the internet itself, is a system of interlinked hypertext documents and applications that is accessed via the internet. ○ Berners-Lee proposed an information management system that laid the foundation for the World Wide Web. He wanted a way to organize and manage information that would be easy to use and accessible to people around the world. ○ He created the first web browser and editor and server WWW history: ○ Lecture 3 Notes ● HTML 1991 and HTML 5 2014 ● Living standard HTML - December 2019 ● Time Berners Lee developed HTML around 1990 ● Hyperlinks are the “novel idea” introduced by Tim Berners-Lee ● First Text Browser - Lynx ● First graphical browser - NCSA Mosaic ● First commercial Browser - Netscape ● First Free commercial browser - Internet Explorer; killed Netscape ● !doctype html ○ Html (Head(title,style)-> body) ● Browsers are tolerant - They ignore markup they don’t understand ○ IE, Edge, Safari, Firefox, Chrome are tolerant ○ Browsers ● Attribute values are often enclosed in quotes, either double or single ○ Quotes are not required when the value contains only letters, digits, hyphens, and periods. ○ Attribute names are case insensitive, but not necessarily attribute values ● ● ● ● HTML uses the Universal Character Set (UCS), defined in [ISO10646]. This standard defines a repertoire of thousands of characters used by communities all over the world. ○ Its latest specification (Unicode 15.0.0), dated September 13, 2022, - emojis with diverse skin Anchor tag uses href <IMG SRC="ferrari.jpg" ALT="Ferrari" BORDER=10 WIDTH=50 HEIGHT=50> imageMap = ○ Image maps are active images with multiple clickable regions ○ The <map> tag is used to associate the image and the regions. ○ Possible values for SHAPE are: ■ –default: Specifies the entire region. ■ –rect: Defines a rectangular region. ■ –circle: Defines a circular region. ■ –poly: Defines a polygonal region. Lecture 4 CSS Notes ● CSS 1 founded year 1996 ● CSS 3 Modules 2012 - 2022 ● exception, line break before and after a <DIV> tag ● <span> applies to inline elements (example: ) <b> ● <div> applies to block elements (example <p> ● Comment: /**/ ● CSS style precedence ○ More precise specification is the higher the precedence ○ – H1.mypars {text-align: center} [highest] ○ – .biggreen {text-align: center} [next] ○ – H1 { text-align: center} [lowest] ■ a style for tag.class has higher precedence than one for .class, which has higher precedence than a style for the tag itself ○ Inline (highest precedence) ○ <style><style> element (next highest) ○ Styles in separate files (lowest) ● Order of CSS rules matter: when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used. ● ● ● ● ● text-align are “inherited” from the parent element…<div text align center></div> ○ Everything in it is centered ○ Some CSS property values set on parent elements are inherited by their child elements, and some aren’t. Composite styles ○ • Many styles can be combined in one selector: font: normal small-caps bold small/2em Verdana, Arial, Helvetica, sans-serif; ○ Common uses include: – Font – Background – Margin & Padding Pseudo elements and pseudo classes ○ Pseudo-classes ■ – :link – a normal, un-visited link ■ – :visited – a link the user has visited ■ – :hover - a link when the user mouses over it ■ – :active - a link the moment it is clicked ■ :first-child, Selects every elements that is the first child of its parent ○ Elements ■ :first-line, add a special style to the first line of a text ■ – :first-letter, add a special style to the first letter of a text ■ – :before, to insert some content before the content of an element ■ – :after, to insert some content after the content of an element padding: 12px 0px 12px 12px - TRBL …top, right, bottom, left Codepen.io - “The best place to built, test and discover front-end code.” Lecture 4 - Javascript Basics Notes ● JavaScript has two distinct systems ○ –client-side JavaScript runs on Web browsers ○ –server-side JavaScript runs on Web servers ● Developed by Brendan Eich in 10 days at Netscape May 1995 ● HTML 1991, Javascript 1995, CSS 1996 ● Original name was Mocha, then changed to LiveScript, then Javascript ● Javascript in Body tag or head tag ○ Body: //the Javascript here produces content for the BODY on loading ■ Placing scripts at the end of the body ensures that the web page content is loaded before the script ○ Head as a deferred script: //the Javascript here creates functions for later use ■ Scripts in the head are loaded before the body content. ● Javascript Programs can ○ • But it is specifically designed for manipulating web pages ■ – Control Web page appearance and content (this is its intended use) ■ – Control the Web browser, open windows, test for browser properties ■ – Interact with document content ■ – Retrieve and manipulate all hyperlinks ■ – Interact with the user, sensing mouse clicks, mouse moves, keyboard actions ● ● ● ● ● ● ● ● ● ● ● ● ■ – Read/write client state with cookies Limitations of client side JS ○ Was difficult to draw graphics ○ No access to file system or OS ○ Unable to open and use network connections ○ No support for multithreading ○ Was not suitable for computationally intensive applications JavaScript is case-sensitive!! HTML is not case sensitive! All numbers are treated as floating point numbers Strings are immutable!! Once created can never be changed! But you can assign a new string obj to the str variable ○ let str = "hello"; ○ str[0] = "H"; // Trying to change the first character to uppercase ○ console.log(str); // This will still log "hello" Arrays ○ array elements can contain any type of data including references to other arrays, to objects, to functions ○ – array elements can have different types…var myArray = ["Richard", 10, getPhoto()]; ○ The length property is the largest integer property name in the array plus one ■ myarray[1000] = true ■ Myarry.length // 1001 ○ Methods ■ – concat(), joins two or more arrays ■ pop(), remove the last element ■ – push() add a new element at the end ■ – reverse(), reverses the order of elements ○ JavaScript does NOT support associative arrays, e.g. var person = new Array(); person["firstname"] = "John"; person["age"] = 41; ■ • person["firstName"] returns "John", but person[0] returns undefined and person.length returns 0 "a" * "b" is illegal "3" * "5" is legal, result is 15, not "15" "a" + "b" is legal "ab" "a" + 1 is legal "a1" Popup Boxes ○ alert(), confirm(), prompt() In JavaScript something that has not been assigned to is not null, but undefined. Undefined is different from null when using != = but not when using the weaker != because JavaScript does some implicit casting in the later case You cant overload a function ○ If you declare a function with the same name multiple times, the later declaration will simply overwrite the earlier one. The number or type of parameters is not used to distinguish between the functions. JavaScript will simply use the latest-defined version of the function and call it; `// First function definition function example(a) { console.log('Function with one argument called', a); } ● ● ○ ○ ○ ○ ○ ○ // Second function definition, with the same name but different parameters ○ function example(a, b) { ○ console.log('Function with two arguments called', a, b); ○ } ○ ○ // Call the function ○ example('test'); ○ You will get undefined…Function with two arguments called test undefined Undeclared variables are global ○ If a variable is NOT declared using var, then it is global. JavaScript now controlled by the ECMA standard body ○ ECMA stands for European Computer Manufacturers Association Lecture 5 JSON Notes ● JSON, short for JavaScript Object Notation, is a lightweight data interchange format. ● Authored by Douglas Crockford July 2006 ● al MIME type for JSON is application/json ● Alternative use of the XML format ● The JavaScript eval() is a function property of the Global Object, and evaluates a string and executes it as if it was JavaScript code, e.g. ○ ○ • The JavaScript callback: eval() parses JSON, creates an object and assigns it to variable doc ● ● ● ● ● ● ■ ○ The eval() function is very fast. However, it can compile and execute any JavaScript program, so there can be security issues so use JSON.parse() ■ To help guard the browser from insecure JSON input, use JSON.parse() instead of eval ; e.g., JSON.parse() is used this way ■ var myObject = JSON.parse(JSONtext [, reviver]); ■ JSON.parse() compiles faster than eval() in all recent desktop browsers Strings are wrapped in double quotes For objects, keys are strings(unlike JS) and values are JSON values JSON is not XML ○ JSON = Objects • Arrays • Strings • Numbers • Booleans • null Same Origin Policy ○ The Same-Origin Policy (SOP) is a critical security mechanism implemented in web browsers to prevent potentially malicious interactions between websites of different origins. This policy restricts web pages from making requests to a domain different from the one that served the web page. ○ An "origin" is defined by the combination of: ■ Protocol (scheme): For example, HTTP or HTTPS. ■ Domain (host): The domain name of the server (e.g., example.com). ■ Port number: The port number on the server (e.g., 80 for HTTP, 443 for HTTPS). ○ Two URLs have the same origin if all three of these components are identical. If any of these differ, the origins are different. Cross Domain Hack ○ JSON and the <script> tag provide a way to get around the Same Origin Policy ○ <script src=http://otherdomain.com/data.js> </script> ○ The src attribute of a script tag can be set to a URL from any server, and ○ every browser will go and retrieve it, and read it into your page ○ So, a script tag can be set to point at a URL on another server with JSON ○ data in it, and that JSON will become a global variable in the webpage ○ The most important line in the script (the "hack") is the following one: ■ this.scriptObj.setAttribute("src", this.fullUrl + this.noCacheIE); Arguments against JSON ○ Don’t have namespaces ○ No validator ■ – Every application is responsible for validating its inputs ○ Not extensible ■ – But it does not need to be ○ ● ● Not XML ■ – But a JavaScript compiler is a JSON decoder JSONP = JSON with Padding ○ JSON extension wherein the name of a callback function is specified as an input argument of the call itself. ○ Because JSONP makes use of script tags, calls are essentially open to the world. For that reason, JSONP may be inappropriate to carry sensitive data JQuery Ajax APIs provide extensive support for JSON and JSONP the the Side note ● Javascript Datatypes ○ String. ○ Number. ○ Bigint. ○ Boolean. ○ Undefined. ○ Null. ○ Symbol. ○ Object. ● Python datatypes ○ Boolean: True or False no lowercase!!!!! And cant use numbers 1=True, 0 = false ○ Numeric types ■ • Integer: Positive or negative whole numbers, complex numbers (eg., 3 + 5j) • ■ Float: Any real number • ○ Sequence types • ■ String: Sequence-type data type allowing for individual character access ■ • List: Ordered collection of one or more data items, could be of different types, enclosed in square brackets (eg., [1, ‘Hello’, 3.41, True]) ■ • Tuple: Ordered collection of one or more data items, could be of different types, enclosed in parentheses (e.g., (1,2,”Hello”)) ○ • Dictionary: Unordered collection of data in key:value pairs form, enclosed in curly brackets (e.g., {1:"Professor", 2:"Marco",3:"Papa"} ○ Sets - An unordered collection of objects with no duplicate elements, not necessarily of same type, separated by commas, and enclosed by curly {} brackets ■ • Used for membership tests, eliminating duplicates, union, intersection, difference and symmetric difference Lecture 6 Python Notes ● 2 types of comments in python ○ # ○ ‘’’ multiline comment‘’’ ● Variables are case-sensitive (abc !=aBc) ● • No keyword called static is present. • Variables are not statically typed ● ● ● ● ● ● ● ● ● ● ● ● ● Naming Variables ○ Variable names must begin with a letter or underscore (_) character ○ • Variable names may contain alphanumeric characters (uppercase and lowercase letters), numbers, or underscores (_). ○ • Variable names cannot contain spaces ○ • Variable names are case sensitive • Constants have global scope and are all uppercase letters and use for items that do not change Note: Python DOES NOT support ‘++’ and ‘--’ notation for auto increments and decrement This works tho: a += 5 // a = a+5 - also works for *= and /= Python uses logical operators (and, or, not) replacing &&,|| Python is a dynamically typed language (similar to JavaScript) JavaScript automatically coerces types to make the operation work, which can be convenient but also lead to unexpected results if not accounted for. ○ Ex: let sum = 5 + "10"; ○ console.log(sum); // Output: "510" Python is strict about combining different types; it raises an error, enforcing explicit type conversion by the programmer, which can lead to more predictable and safer code. ○ # This will raise a TypeError ○ sum = 5 + "10" ○ Solution ■ # Convert the integer to a string and concatenate ■ sum_str = str(5) + "10" ■ print(sum_str) # Output: "510" ■ # OR ■ # Convert the string to an integer and add ■ sum_int = 5 + int("10") ■ print(sum_int) # Output: 15 ○ But this works for multiplication* ■ Foo = 25, bar = “hello” ■ Foo = (bar * 7) ● Output =hellohellohello…7 times Strings are immutable Functions MUST be defined before they can be called # This is a function def foo(arg_1, arg_2): ○ arg_2 = arg_1 * arg_2 ○ return arg_2 Negative indices start from -1 so the last character of the word is -1 ○ Word = ‘python’ ○ Word[-1] -> n ○ Word[-3] -> h ● A module is a file containing Python definitions and statement with the suffix ‘.py’ appended ● Flask is a web app framework!! ● Templates are old tech! ○ Templates is when you have html text inside python file and html is rendered from python file/flask file ○ Same with PHP + HTML like i did with nayon kim class and assignments ○ Post-Ajax coding patterns: All RESTful APIs, returning data only (JSON, XML) and no HTML ● Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Lecture 7 Notes Document Object Model (DOM) ● The Document Object Model (DOM) is a programming interface for XML documents. ○ It defines the way an XML document can be accessed and manipulated ○ this includes HTML documents ○ The XML DOM is designed to be used with any programming language and any operating system. ● Document is the root element ● document.getEleementbyId(‘sample“) ● innerHTML property ○ The innerHTML property of an element was first introduced as nonstandard extension by Microsoft in Internet Explorer ○ Elements that do not have both an opening and closing tag cannot have an innerHTML property. ● Better to append child than += innerhtml ● XMLHTTPRequest ○ The XMLHttpRequest object is used to exchange data with a server ○ With an XMLHttpRequest object you can: ■ – Update a web page without reloading the page ■ – Request data from a server after page has loaded ■ – Receive data from a server after page has loaded ■ – Send data to a server in the background ○ “Synchronous” XMLHttpRequest is “deprecated: being removed from web platform (will take many years). ■ ■ Asynchronous request ● Lecture 8 Forms and Common Gateway Interface Mechanism (CGI) Notes ● Form attribute -> – ENCTYPE=ContentType (content type to submit form as) • Defaults to application/x-www-urlencoded ● tag also supports the Global Attributes, that can be used with all HTML elements ● The tag also supports the Event Attributes in HTML. ○ – Window event attributes: onload, onunload, etc. ○ – Form event attributes: onchange, onfocus, etc. ○ – Keyboard / mouse events: onkeydown, onclick,etc…. ● Select Tag : drop down ○ Syntax as follows: ○ <OPTION attributes> Text ○ Some attributes: ■ – VALUE="text" ● Text specifies the value to be sent to the script if the option is selected ● By default, the text following the OPTION element is sent ● Fieldset - way to group form elements ○ The content of a FIELDSET element must begin with a LEGEND to provide a caption for the group of controls. Following the LEGEND, FIELDSET may contain any HTML element, including another FIELDSET. ○ ● Common Gateway Interface (CGI) - version 1.1 ○ The Common Gateway Interface (CGI) is a standard protocol for web servers to execute programs like console applications running on a server, and return the output to a client's web browser. ○ it is a mechanism by which programs, called scripts, can be used to create dynamic Web documents ○ How it works ■ User Request: A user requests a webpage that utilizes CGI, typically by clicking a link or submitting a form. ■ Server Execution: The web server identifies that this request should be processed by a CGI application, runs the application, and captures the output. The CGI application can be a compiled program or a script interpreted at runtime. ■ Response Generation: The CGI application performs the necessary operations, like querying a database, processing the input, or performing calculations. It then generates an output, usually in the form of an HTML web page. ■ User Receipt: The web server sends this dynamically generated output back to the user’s web browser, where it is rendered as a webpage. ○ Any language that can produce an executable file ex: C/C++, PHP, JS, Python, Java ○ Anchors Are Used to Invoke CGI Scripts as well as form submissions ○ CGI environment variables ■ Can be classified into two major categories: – 1. Non-request specific – 2. Request specific ○ CGI Script Output ■ The script sends its output to stdout; the server adds appropriate headers and returns this output to the client ■ Output from a script to the server could be: ● – A document generated by a script ● – The type of document could be: HTML, plain text, image, video or audio clip, and many other types ● – Instructions to the server for retrieving the desired output elsewhere ● – an error indicator ○ Server Directives ■ The output of scripts begins with a small header consisting of text lines containing server directives ■ Any headers that are not server directives are sent directly back to the client ■ Server directives are used by CGI scripts to inform the server about the type of output ■ The current CGI specification defines three (3) server directives: ■ – Content-type (the MIME type) ● ■ ■ Example:content-type: text/html (HTML document) content-type: text/plain (plain-text document) – Location ● Alerts the server that the script is returning a reference to a document, not an actual document – Status ● Used to give the server a status line to send to the client ● Ex: 403 forbidden Lecture 9 Web Server Notes ● What does WWW server do? ○ Enables browser requests ○ Mainly provides ■ – Support for retrieving hypertext documents ■ – Manages access to the Web site ■ – Provides several mechanisms for executing server-side scripts • ● Common Gateway Interface (CGI) ● •Application Program Interface (API) ● •Direct Module Interfaces (SAPI) ■ – provides log files and usage statistics ● What to look for in a web server ○ Main features ■ – platform they run on; ■ – complete support for HTTP 1.1 / HTTP 2 ■ – Multithreading, load balancing ○ Security features ■ – ability to provide IP address restriction ■ – ability to provide domain name restriction ■ – Support for secure transactions: SSL ■ – Ability to act as a proxy server ● How Servers Handle Multiple Requests ○ For each request, a complete copy of the server is made and executed ■ – Initially a parent process waits for requests; for each new request a child process is spawned ○ Or a single server program handles many requests simultaneously (multithreaded) ■ – the server must keep track of all requests and switch between them as needed ● Application Servers ○ An application server is software that typically interfaces one or more databases to convey processed data to and from a user interface such as a web browser ○ Performs business logic ○ ● ● ● ● ● ● ● ● For web applications, these components are usually performed in the same machine where the web server is running, and their main job is to support the construction of dynamic pages. ○ Example of them: Oracle Glassfish, IBM WebSphere, Oracle Weblogic Example of web servers ○ Apache, Microsoft IIS, NGINX Apache was top web server but no longer dominates #1, NGINX #2, Microsoft #3 Web Server Features ○ Document Root • ■ The Web server has access to a tree of files that it can deliver when it starts ■ Virtually hosted document roots: Hosting multiple web sites by the same web server ● It uses the host name or IP address to distinguish the document roots, e.g. ○ Authentication • ■ Basic authentication is supported by all HTTP servers ■ – The server administrator creates secure directories accessible via password files maintained by the server ○ Proxy Servers • ○ Caching • ○ CGI Scripting • ○ Application Program Interface COnfiguring a server: No matter which OS or server, you will need to define the ○ location of the server (server root) ○ 2. location of documents to deliver (document root) ○ 3. location of CGI scripts or server-side components to execute Port Numbers ○ Typical computer will have 1000s of ports ○ 80 http, 443 https, 20/21 ftp, ○ 400+ are secure ports Apache Web Server ○ The name “Apache” comes from the fact that it is A set of PAtCHEs to NCSA’s httpd ○ Its included in every version of macOS ○ Available for windows, soalris, linux, macos ○ It implements HTTP/2 but not HTTP/3!! ○ There is not GUI for configuring apache How does Apache Work? ○ Apache runs under a multitasking operating system, e.g., UNIX, macOS, Windows • ○ the binary is called httpd ○ Apache idles, listening to an IP address and port Apache settings…The directives keywords followed by their values ● ● ● ○ Listen 9637 ○ ServerAdmin [email protected] ○ ServerRoot /home/scf-03/csci571/WebServer/apache_2.2 ○ ErrorLog logs/error_log ○ DocumentRoot "/home/scf-17/csci571c/apache2/htdocs“ ○ ScriptAlias /cgi-bin/ "/home/scf-17/csci571c/apache2/cgi-bin/" ○ • the above are ones that must be set More apache settings ○ # Timeout: The number of seconds before receives ○ and sends time out ○ Timeout 300 ○ # KeepAlive: Whether or not to allow persistent ○ connections (more than one request per ○ connection). Set to "Off" to deactivate. ○ KeepAlive On ○ # MaxKeepAliveRequests: The maximum number of ○ requests to allow during a persistent connection. ○ Set to 0 to allow an unlimited amount. They ○ recomend you leave this number high, for maximum ○ performance. ○ MaxKeepAliveRequests 100 ○ # KeepAliveTimeout: Number of seconds to wait for ○ the next request ○ KeepAliveTimeout 15 Authentication in Apache ○ 2 ways to control access to directories ■ the file access.conf in the conf/ directory can be used ● placing access directives in a <Directory> block is the preferred method ■ per-directory access rules can be set by a file placed in a specific directory ● the name of the file is set by the directive AccessFileName ○ When the server attempts to retrieve a document, it looks for an access control file in the directory or the parent directory. ○ The file it looks for is set by the directive AccessFileName Limit sectioning Directive ○ <Limit> controls which clients can access a ○ directory; directives within LIMIT include: ■ – order in which deny and allow are evaluated ■ – deny from host1, host2, ... ■ – allow from host1, host2, ... ■ – require named-users or group-users or AuthUserFile ■ – referer allows access only from this directory ■ – satisfy all or any ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ● ● ● Host Filtering is used to limit document trees to certain machines Example 1: to limit access to the cscixxx public_html documents to USC only <Directory /usr/~cscixxx/public_html/> <Limit GET> order deny,allow deny from all allow from .usc.edu </Limit> </Directory> If someone tries to access documents in this directory from outside of usc they get a 403 Forbidden message Virtual Hosting ○ Virtual hosting is a way of setting up your server so that it can appear to be multiple Web sites at once, depending upon how it’s accessed by clients ○ ISPs do this a lot ○ there are two ways to do virtual hosting ■ – address-based virtual hosting uses IP addresses ■ – name-based hosting allow a single IP address to have multiple identities, e.g. Content Negotiation ○ The client provides a set of preferences concerning the preferred attributes of a document, and the server tries to come up with the best match from the versions available ○ The set of all versions of a document that are available to the server is called the resource's list of variants. ○ The ways in which they differ, such as by (language or encoding or content-type), are called its dimensions. Apache as a Proxy Server ○ proxy servers are frequently used in fire walled environments to provide a single point of contact between the users inside and the Web outside the firewall. ■ The users ask for a page, the browser sends the request to the proxy server, the proxy server sends the request to the origin server, and the data flows back the same way. ○ 2nd function commonly associated with proxy servers is caching ○ Turn on mod_proxy module to use the proxy functions in apache web server ○ ProxyRequests directive is the master directive - which enables and disables proxy operation overall. It takes a single keyword argument, which must be either On or Off ○ ProxyBlock - allows you to selectively block the fetching of certain resources through the proxy. It takes a list of space-separated case-insensitive phrases or URI substrings which should be blocked. ■ – "ProxyBlock foo" would block all requests in which "foo" appeared, in any combination of upper- and lower-case, including "http://foo.com/bar/" ● ● and "http://bar.org/zardofoo.html". You can block all proxy requests with "ProxyBlock *" Proxy Host Example ○ Usually, a proxy server is set up as a completely separate virtual host from the rest of the server's operation (which is likely to be handling normal requests). ○ •You can do this with a <VirtualHost> stanza. The <IfModule> container will only be evaluated if the proxy module is part of the running server ■ Definition of Log Terms ○ A hit: request for a page, image, cgi script ○ Page view: request for an html page ○ Unique host vs. unique visitor: aol.com is a unique host, so this statistic may not be useful; cookies are best way to track unique visitors ○ Impression: view of an advertisement ○ Click-through: when ad is actually clicked on ○ A user session: includes all hits and requests made by a user terminated by “ n ” minutes of inactivity Lecture 10 Javascript Advanced Notes ● Determining Browser ○ navigator is a built-in object with properties that describe the browser ■ – navigator.appName is a string with the browser name ● The addEventListener() method attaches an event handler to the specified element. ○ – it does not overwrite existing event handlers. ○ – You can add many event handlers to one element. ○ – You can add event listeners to any DOM object not only HTML elements. i.e the window object ● Functions are types of objects ○ Therefore, functions can be treated as an object ■ –assigned to new variables ■ –stored in arrays ■ –assigned to properties of objects ■ –passed as arguments to functions ● ● ● ● ● ● ● ○ numbers, strings, Booleans are compared by value ○ – objects, arrays and functions are compared by reference • JavaScript runtimes include a garbage collector "3" * "5" is legal, result is 15, not "15" The identity (===) operator behaves identically to the equality (==) operator except no type conversion is done, and the types must be the same to be considered equal, e.g., if x = 5, then ○ – X == 8 is false ○ – X == 5 is true ○ – X === “5” is false ○ – X === 5 is true Regular Expressions ○ Constructing a regular expression ■ – var re = /ab+c/ initializes re to an expr ■ re = new RegExp("ab+c") compiles the expr ○ test and exec are methods of object RegExp ■ – exec executes a search for a match in a string; it returns an array ● • Uses exec method to locate a string ■ – test tests for a match and returns true/false ■ – Both exec and test set properties during execution ○ match and search are methods of String ■ – match executes a search for a match in a string and returns an array or null ■ – search tests for a match in a string and returns the index or -1 come up with easy-to-memorize but very secure passphrases? Use Dicewware Use strict ○ in normal JavaScript, mistyping a variable name creates a new global variable. In strict mode, this will throw an error, making it impossible to accidentally create a global variable. ○ Strict mode is declared by adding "use strict"; to the beginning of a JavaScript file, or a JavaScript function. ● If a variable is NOT declared using var, then it is global. Two variables of the same name, both undeclared will create conflicts that are hard to debug Lecture 11: HTTP & Networking Notes ● Browsers and servers communicate via HTTP ● Current version is 1.1 ● http/1.0… allows for messages to be in the format of MIME like messages, containing meta-information about the data transferred and modifiers on the request/response semantics. ● http/1.1… the effects of hierarchical proxies – caching – the need for persistent connections – virtual hosts ● http/2…started as a copy of Google SPDY…designed to speed up websites far larger than 10 years ago, using hundreds of requests/connections. • One major feature of HTTP/2 is header compression:...Google dropped SPDY from Chrome and adopted HTTP/2 ● http/3 … already being worked on..always runs over QUIC (not the TCP of TCP/IP, which QUIC is a replacement for) ○ QUIC: Developed by Google, QUIC combines the best of TCP (reliability), UDP (speed), and TLS (security). It delivers an encrypted, connection-oriented, and reliable transport protocol built on top of UDP. ● ● Multipurpose Internet Mail Extension (MIME) MEDIA TYPEs ○ • HTTP tags all data that it sends with its MIME type ○ • HTTP sends the MIME type of the file using the line Content-Type: mime type header ○ MIME has extended Internet e-mail to include ■ – Unlimited text line and message length ■ – Messages with multiple body parts or objects enclosed ■ – Messages that point to files on another server and are automatically retrievable ■ – International character sets in addition to US-ASCII ■ – Formatted text including multiple font styles ■ – Images ■ – Video clips ■ – Audio messages ■ – Application-specific binary data Browser/Server Interaction ● ○ Actually, communication between a browser and a web server can be much more complicated; communication can go between one or more intermediaries. ○ Proxy ■ A proxy is a forwarding agent, receiving requests for a URI in its absolute form, rewriting all or part of the message, and forwarding the reformatted request toward the server identified by the URI. ■ Example: caching proxies: special type of HTTP proxy server that keep copies of popular documents that pass through the proxy (“forward” proxy). The next client requesting the same document can be served from the cache's personal copy. ○ Gateway ■ A gateway is a receiving agent, acting as a layer above some other server(s) and, if necessary, translating the requests to the underlying server’s protocol. ■ Example: Gateways are special servers that act as intermediaries for other servers. ● They are often used to convert HTTP traffic to another protocol. A gateway always receives requests as if it was the origin server for the resource. The client may not be aware it is communicating with a gateway. ○ Tunnel ■ A tunnel acts as a relay point between two connections without changing the messages; tunnels are used when the communication needs to pass ● ● through an intermediary (such as a firewall) even when the intermediary cannot understand the contents of the messages. ■ Example: VPN ● Tunnels are HTTP applications that, after setup, blindly relay raw data between two connections. HTTP tunnels are often used to transport non-HTTP data over one or more HTTP connections, without looking at the data. Persistent Connections ○ In original HTTP protocol, each request was made over a new connection ■ Html page with n distinct graphics produced n+1 requests ○ TCP uses 3-way handshake so there is a high latency…both server and user needs to acknowledge ○ HTTP 1.0 introduced keep-alive feature (Persistent connection) ■ the connection between client and server is maintained for a period of time allowing for multiple requests and responses ○ Persistent connections are now the default in http/1.1 Get request example ○ ■ ■ ■ ■ GET / HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp, */*;q=0.8 Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate Connection: keep-alive Upgrade-Insecure-Requests: 1 Cache-Control: max-age=0 ■ ■ ■ ■ ■ 4 fields ■ – HTTP_Method says what is to be done to the object specified in the URL; some possibilities include GET, HEAD, and POST ● HEAD is identical to GET except the server doesnt return the body in the response ● PUT - modify/change existing resources or create new ones, contained in the message body ● TRACE…traces the requests in a chain of web proxy servers; used primarily for diagnostics ● OPTIONS: allows requests for info about the server’s capabilities – identifier is the URL of the resource or the body – HTTP_version is the current HTTP version, e.g. HTTP/1.1 – Body is optional text ● ■ ■ ■ ■ GET response example ○ ■ ■ ■ ■ ■ ■ ■ ■ ● ● ● HTTP/1.1 200 OK Date: Sun, 10 Oct 2021 23:26:00 GMT Server: Apache/2.4.41 (Ubuntu) Last-Modified: Sun, 06 Oct 2021 14:49:07 GMT Accept-Ranges: bytes Content-Length: 438 Vary: Accept-Encoding Content-Type: text/html A url may point to a document with multiple representations: languages, formats (html, pdf), or html features based upon user-agent ○ HTTP/1.1 introduces Vary: accept-language, user-agent the header specifies acceptable languages and browsers, ○ The proxy must store the fact that this doc has variants and when requested, get the proper variant Entity tags…Etag ○ one of several mechanisms that HTTP provides for web cache validation, and which allows a client to make conditional requests. – ○ This allows caches to be more efficient, and saves bandwidth, as a web server does not need to send a full response if the content has not changed. ○ assigned by a web server to a specific version of a resource found at a URL. ○ ETags are similar to fingerprints, and they can be quickly compared to determine if two versions of a resource are the same or not. ○ An ETag is a serial number or a checksum that uniquely identifies the file ■ caches use the If-None-Match condition header to get a new copy if the entity tag has changed ■ if the tags match, then a 304 Not Modified is returned HTTP Status Codes ○ ○ ○ ○ ● ● ● ● 100 - informational 200 - successful 300 - redirection 400 - client error ■ 400 - bad request, server couldn't understand ■ 401 - authentication required (The web server can maintain secure directories and request authentication when someone tries to access them without providing username and password) ■ 404 - not found,..document does not exist ○ 500 - server error ■ 500 Internal server error META HTTP-EQUIV ○ E.g., here is an HTTP response header which causes the current page to be replaced by another page in 5 seconds ■ ○ two common uses are – to set the expiration time of a document – to cause a refresh of a document X-FRAME-Options: SAMEORIGIN ○ Provides Clickjacking protection. ○ The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame> or <iframe>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites; ○ Values: ○ deny - no rendering within a frame, ○ sameorigin - no rendering if origin mismatch,. The page can only be displayed in a frame on the same origin as the page itself. ○ allow-from: DOMAIN - allow rendering if framed by frame loaded from DOMAIN..The page can only be displayed in a frame on the specified origin. HTTP Strict-Transport-Security (HSTS) ○ HSTS is a security feature that lets a web site tell browsers that it should only be communicated with using HTTPS, instead of using HTTP. ○ Supported by all “modern” browsers. Ignored when site accessed using HTTP. ○ Enabling this feature for your site is as simple as returning the StrictTransport-Security HTTP header when your site is accessed over HTTPS ■ Strict-Transport-Security: max-age=expireTime [; includeSubdomains] Cross-Origin Resource Sharing (CORS) ○ ● Cross-Origin Resource Sharing (CORS) allows many resources (e.g, fonts, JavaScript, etc.) on a web page to be requested across domains. ○ With CORS, AJAX calls can use XMLHttpRequest across domains. Such “crossdomain” requests would otherwise be forbidden by web browsers. ○ To initiate a CORS request, a browser sends the request with an “Origin” HTTP header. ■ Ex: Origin: http://www.social-network.com ○ If the server at online-personal-calendar.com allows the request, it sends an Access-Control-Allow-Origin (ACAO) header in the response. The value of the header indicates what origin sites are allowed (* = all sites). Networking ○ IP Addressing ■ Ipv4 - 1983 ● 32 bits, separated by 4 numbers, 8 bits each (128.125.253.146) ● How many ipv4 addresses are there? 2^32 -> 4.2 billion ● Classes ■ ■ ○ ○ 128/8 =16, 192/8 =24, 224/8=28, 240/8 = 30 ○ USC has Class B range ○ Localhost is 127.0.0.1:8000 Ipv6 - drafted in 1998 but official in 2017 ● 128 bits, separated as 8 sets of 4 hex values ● How many ipv6 addresses are there? 2^128 -> 340 undecillion Private IP addresses are typically secured behind a firewall ● ● ● Private IP must use a NAT if accessing the Internet because private IP addresses cannot communicate outside local networks IPV6 doesnt need private addresses bc its vastly larger address space ○ IPv4 networks often require NAT to handle address shortages and allow multiple devices within a private network to be mapped to a single public IP address but with a different port number for each session. IPv6, with its abundant address space, aims to eliminate the need for NAT, allowing every device to have its unique global address. ○ ○ ○ ○ ○ Routing ■ Routing is the process of sending data from one computer to another ■ Routers use two primary algorithms – Distance Vector and Link State ■ Microsoft and Facebook finished MAREA, a 4000-mile-long transatlantic communication cable, in feb 2018 DNS ■ Some servers can be identified by a hostname (www) and domain name(usc.edu) ■ To find the IP address of a hostname/domain name ■ DNS was conceived at USC’s ISI by Paul Mockapetris in 1983 and managed there until 1998 ■ – DNS is now managed by ICANN Ports ■ Since more than one networked program can run on a computer at the same time, we need a way to uniquely identify them ● – Ports allow us to do just that ■ Ports are in the range from 0 to 65535 (16bits) ■ 0-1023 - are reserved for well-known applications, ■ 1024-49151 - are registered ports and can be used by any application ■ 49152 - 65535 - are dynamic or private ports and are typically used by the operating system when an application needs to pass an application off to a nonregistered port ■ 80 - http, 443 htttps, 20/21 ftp data, 22 ssh NAT ■ Network Address Translation (NAT) allows a computer to have a private IP address (IP Masquerading) ■ A NAT server (usually implemented in a router) substitutes its own public IP address in place of the computer’s private IP address Subnets ■ Since network addresses are so scarce in IPv4, we can take a few bits away from the host address to make a subnet within a network ■ To implement subnetting, the router needs a subnet mask that indicates the split between the network/subnet combination and the host ■ The subnet mask will consist of all 1’s followed by all 0’s ● – 255.255.255.0 = 11111111 11111111 11111111 00000000 VALID – 255.255.255.2 = 11111111 11111111 11111111 00000010 NOT VALID ■ Subnetting exists in IPv6, but because there are so many bits in the IP address, we don’t need to take bits from the host ○ ● – Bits 1-48 - Network address - 2001:0db8:85a3 ● – Bits 49-64 – Subnet address - 0000 ● – Bits 65-128 – Host address - 0000:8a2e:0370:7334 ● ● 2001:0db8:85a3:0000:0000:8a2e:0370:7334 – A /64 means there is no subnetting ■ DHCP ■ Dynamic Host Control Protocol (DHCP) is used for a computer or router to automatically assign IP addresses and other network configuration (such as the gateway and subnet mask) to computers on the network