CSE 135 Midterm

How can you fix HTTP statelessness?

Cookies: to help the site remember information about your visit - use http header set-cookie Dirty URL: links with query string in the, unappealing/hard to look at for casual users - make a web address that's difficult for users and search engine crawlers to decipher Hidden Form: using an input type that wraps around the page's html and is hidden to pass data -can't bypass without disabling html - can be used to store session information of a client

What HTTP method(s) is/are associated with D in CRUD?

DELETE

Client Side Cons

Data set sizes and compute may be constrained, not easily securable

GET

Fetch a resource

What HTTP method(s) is/are associated with R in CRUD?

GET

There are three server-side programming models that involve a web server and a code run a web server. Model 4: Code as server **name an instance of the approach and note the pro and cons of each model

Node, Python, Perl Pros - medium to high performance Cons - medium to high difficulty

Explain and visually diagram the "Hamburger" mental model the Professor described for server-side development. Why does he suggest you focus on the buns of the hamburger?

The top bun is the input. The bottom bun is the output. The meat is the program. The hamburger model describes the protocol that is built to give and receive data from the programs to be sent to the web server.

In the second homework we wrote several CGI and related programs to perform some small tasks. What was the point of that assignment?

to show that technologies used in web programming are similar regardless of framework to show that the language doesn't impact request/response cycle of HTTP

CONNECT

tunnels other protocols through HTTP

if you were fetching the pet record for id=12 write the JSON data packet. ID: 12 Name: Bear Type: Hamster Colors: Brown, White Alive: True

{ "id": 12, "name" : "Bear", "type": "Hamster", "Colors" : "Brown, White", "Alive" : true}

Write a valid HTML form that collects your first name, your last name, and your PID and sends that data in the message body to "https://example.com/midterm". Your PID should not be echoed on screen just like a login form would work. Use appropriate HTML elements to structure your form and attributes to make in usable, logical, and as secure as you can do easily with HTML for full points.

<form action="http://www.example.com/midterm" method="POST"> <label for="fname"> Your first name: </label> <input id="fname" name="fname" type="text" required><br> <label for="lname"> Your last name: </label><br> <input id="lname" name="lname" type="text" required><br> <label for="id> Your ID: </label><br> <input id="id" name="id" type="text" required><br> <input type="submit" value="submit"> </form>

As should be expected by now, a malicious user has added a new entry to our user table with the name of "Johnny'); -DROP TABLES Students;--". This entry has injected SQL into our endpoint and caused all sorts of mischief. Explain why this happened and what should have been done about it.

A malicious user input a string with SQL code embedded in it such so parsing through it results in it being executed. In this code the table was destroyed of all its data and their bindings have been removed. To avoid this, we can use prepared statements to modify query strings to avoid code execution

There are three server-side programming models that involve a web server and a code run a web server. Model 3: Web application frameworks **name an instance of the approach and note the pro and cons of each model

ASP, Cold Fusion, JSP/Servlets, Python, PHP Pros - ideally combines efficiency of API model with safety of CGI; adds helpful encapsulation of routine tasks like state management Cons - built-in tools can be resource hogs; ease of use may encourage carelessness

The Professor describes two primary duties web servers have in terms of what they do for users. Describe each of these duties. Hint: It relates to the tension we see in the form of web projects as well

Serving static file - map the URL to the physical address of the file on the server Run programs - server acts as an interface for programs to be executed through http requests

The MVC pattern was briefly presented in support of our analytics project. Explain what the pattern stands for and diagram your understanding of it in a server-side focused situation

The MVC pattern is a software design pattern commonly used for developing user interfaces that divides relevant programming logic into three interconnected elements (Model, View, Controller). The logic is divided in the model to separate internal representations of information from the ways information is presented to and received from the user.

The Professor loves the idea of trade-offs. If you have been to lecture more than a few times you have probably heard about many. Describe two (2) trade-offs that we may generally encounter as web developers and provide some details about what the tradeoff means

The more performance you want the more security problems arise. The more security you want to more your performance will go down. There will always be tradeoffs between the time, cost, and quality of the development too. Server API programs are complex but run the fastest while server side scripting is easier to set up but runs slower.

Server Side Pros

Works well with big compute and large data sets, securable

A in RAIL stands for? time/value? importance?

animation, 60fps, render time

PATCH

applies partial modifications to a resource

DELETE

delete a resource from the server

I in RAIL stands for? time/value? importance?

idle work loads, 0-50ms, page responds within 50ms

Server Side Cons

interactivity challenged

L in RAIL stands for? time/value? importance?

load, <1000ms, gets contents fast

Three primary ways in which online analytical data can be collected?

log files/server side, google analytics/client side, network capture/network

TRACE

performs a message loop back test along the path to the target resource

The professor says that Web sites/apps are made up of five aspects. He called these the 5 pillars. Name them.

purpose (content and function), structure (architecture), execution (coding), distribution (hosting), form (visuals and layout)

R in RAIL stands for? time/value? importance?

response time, <100ms, interactivity

Client Side Pros

rich and interactive

POST

sends data to the server

OPTIONS

shows the methods available for use on the target resource

Explain how being a full-stack engineer is both nonsense and something we should seriously aspire to be. Give a description of how to approach "full-stack" thinking to be reasonable and to show you understand the breadth and depth of the topic matter

It's impossible to be an expert in all the layers of the stack. We should be full stack aware, knowing we aren't experts but can learn. You should always consider all the layers of the stack in the development process. Front end should consider how much data they are requesting from the back end.

The Professor believes that given a "green field" web project with no technical choice issues, that using JavaScript on both the client and server-side makes a lot of sense. Explain why he thinks this is a very well backed up thought.

JS can run in both front and back end reducing the development costs. It is isomorphic and it avoids a mismatch between client and server languages.

What does JavaScript fingerprinting mean? How is it related to the previous question? Is fingerprinting evil or not?

Javascript fingerprinting is a tracking and identification method websites use to associate individual browsing sessions with one site visitor. Unlike cookies and local storage, fingerprint stays the same even in incognito or when browser data is removed. It is traceable across browsing sessions.

Explain which is better in your opinion, client-side or server-side and why. If neither is better, then explain when each should be used and how to balance the two approaches. Be clear and provide examples for maximum points

Neither. Client side can be fast and interactive, better for designing something functional and appealing. Ex: SPAs, changing to look of a site Server side is more involved with web servers and the data and is securable. Ex: user authentication, script templates to construct webpages

Explain which is better in your opinion, client-side or server-side and why. If neither is better, then explain when each should be used and how to balance the two approaches. Be clear and provide examples for maximum points

Neither. Server side focuses on managing the data and the backend. The client side focuses on the web browser and the frontend. Examples: server side - user authentication, database access client side - changing the UI

Explain the UX/DX tension the Professor continually stresses. Provide a concrete example of the tension it describes.

Optimizing for a developer often comes at the cost of user experience and vice versa. Ex: multiple imports to a file may help a developer organize their code but ruin performance for the user.

What HTTP method(s) is/are associated with C in CRUD?

POST

Write a complete HTTP packet including the message body (aka 'payload') of your form submission using the previous example if it were sent using your actual first, last name, PID.

POST / HTTP/2.0 Host: example.com Content-type: Content-length: fname=<your first name>&lname=<your last name>&id=<your id>

What HTTP method(s) is/are associated with U in CRUD?

PUT, PATCH

Characteristics of the toolbox items: client side - client side scripting server side - server side scripting

Portable Semi-Coupled Less Complex Slower

Characteristics of the toolbox items: client side - JAVA Applets server side - JAVA Servlets

Portable Semi-Coupled Complex Fast(ish)

Characteristics of the toolbox items: client side - helper applications server side - CGI programs

Portable / Not Not Coupled Complex / Simple Slow

The use of online analytical data is ethically varied as it could be used for good or for ill. Provide two examples of the use of online analytical data -- one which might be positive and one that may be negative. You are free to use thinking from current events or information presented in class. Your point of view could be from that of a non-technical end user or yourself as a developer or both. Make sure you are clear which point of view you are using in your discussion for full points.

Positive: collect/utilize data from users to increase the productivity/efficiency of product/customer experience Negative: security risks, data quality

Online analytical data can be collected in three primary ways. Describe network capture/ network and the pro/cons

Pros - can't be opted out, capture much in one place Cons- Limited in what it can see

Online analytical data can be collected in three primary ways. Describe Log files / Server Side and the pro/cons

Pros - can't be opted out, private on your system Cons - limited in what can be recorded, hard to work with

Online analytical data can be collected in three primary ways. Describe Google Analytics / Client side and the pro/cons

Pros - lots of tracking possibility (rich data), easy to use Cons - can be blocked, data quality problems, abuse

PUT

Replaces all current representations of the target resource with the uploaded content

Name the three parts of an HTTP request

Request Type, Headers, Message Body

Name the three parts of an HTTP response

Response Type, Headers, Message Body

The Professor has presented that historically Web development has been getting more and more client-side focused. Discuss why in his opinion why this might be inevitable.

Server side is too slow for impatient people. People expect performance to meet RAIL numbers so code will mostly have to be client side.

Characteristics of the toolbox items: client side - browser extensions server side - API programs

Proprietary Coupled Complex Fastest

5 pillars?

Purpose, Structure, Execution, Distribution, Form

The Professor has given a few examples about unintended consequences of technical decisions made on the web. Browsers have long eased technical points to be permissive or even "correct" things developers might not pay attention to. Discuss an unintended consequence or later challenges that might encounter because of the permissive nature of Web browsers handling HTML, HTTP, Content-Type headers, CSS, etc. Be concrete in your discussion to show you understand it isn't just being a stickler for details.

Allowing incorrect HTML to be "fixable" by the browser may alter the dom tree and cause unexpected behavior. Not defining the correct headers for your page, specifically the content type, forces the browser to do MIME sniffing. This may lead to response delays

There are three server-side programming models that involve a web server and a code run a web server. Model 2: Server API **name an instance of the approach and note the pro and cons of each model

Apache modules, ISAPI filters and extensions Pros - very fast and low overhead if written properly, high performance Cons - very difficult; hard to write, blows up server if done wrong

In the previous examples we have used two different HTTP methods to send data to the server. Is one more secure than the other? Explain your thinking. If there are security issues provide some concrete ideas that you might employ to improve that situation.

Both are insecure because HTTP is insecure. GET is less secure than POST because sent data is part of the URL.

There are three server-side programming models that involve a web server and a code run a web server. Model 1: Classic CGI "Fork and exec" **name an instance of the approach and note the pro and cons of each model

CGI, PHP, Python, Ruby Pros - secure, least damaging if something goes wrong Cons - isolation, makes it slow and resource intensive

An HTTP response like the last question should contain a very important header that indicates what the content in the payload is. Write that header and value from the previous question to show that you know which it is Now explain what a browser does when that header is missing? Is that helpful, harmful or both? Explain your reasoning

Content-type When this header is missing, the browser does MIME sniffing Helpful: auto detect content type Harmful: if giving the wrong content type, slows performance, security issues, etc

HEAD

Fetches headers of resource but not the resource itself

Users seem quite concerned about Cookies. Describe the two forms of Cookies that exist and explain what makes users concerned about them.

First party cookies - locally stored cookies but they still remember preferences and login information and can persist for a long time Third party cookies - privacy concerns because they collect your online behavior and data that is then sold to advertisers by the sites you visit

What does it mean when people say that HTTP is stateless?

HTTP is stateless because each request is executed independently, without any knowledge of the requests that were executed before it, which means once the transaction ends the connection between the browser and the server is also lost. There is no memory from one request to the next