Web Applications

Concepts#

1. 1 Network Sockettransport layer: host + port endpoints, bind/listen/accept, reading bytes in rounds start here
2. 2 Character Encodingsockets carry bytes, code uses strings: encode/decode explicitly (UTF-8)
3. 3 HTTP Protocolrequest line, status line, headers (Content-Length, Content-Type media types), status codes
4. 4 HTTP Serverthe server loop: read until \r\n\r\n, parse the path, serve file/template/JSON safely
5. 5 HTML Structurepage skeleton, key tags, CSS, where scripts go
6. 6 HTML Formstatic app: browser sends ?name=value and loads a new page; template variables
7. 7 URL Encodingescaping query parameters as %-encoded UTF-8 bytes, + for space
8. 8 DOM Manipulationdynamic app: select elements, read/write content, event handlers
9. 9 AJAX and Fetch APIfetch + async/await/then + JSON, no page reload
10. 10 Code Injection Protectionuntrusted input inserted as HTML executes; use text insertion or sanitize
11. 11 Same-Origin Policyscripts may only use results from the page’s own origin unless CORS allows it

How it fits together#

The stack, bottom to top#

browser  ──TCP socket (bytes)──►  server socket          Network Socket
          "GET /search.html?query=b%C3%A4r HTTP/1.1"     HTTP Protocol + URL Encoding
                                  read until \r\n\r\n,     HTTP Server
                                  decode UTF-8, parse,      Character Encoding
                                  compute, encode
          ◄── "HTTP/1.1 200 OK / Content-Type / ... "
renders HTML + CSS                                        HTML Structure
user action → form submit (new page)  or  JS fetch (DOM update)

Each layer only adds structure to the one below: the socket knows only bytes, HTTP gives them a request/response shape, HTML gives the content a page structure, JavaScript makes the page change without reloading.

Static vs. dynamic web app#

Encoding at every boundary#

A query like bär crosses four representations: the string in the input field → URL-encoded UTF-8 bytes in the request line (b%C3%A4r, URL Encoding) → bytes received by the server, URL-decoded and then decoded as UTF-8 to the string bär (Character Encoding) → result string encoded to UTF-8 bytes, whose byte count is the Content-Length. Typical bugs: decoding %XX codes one by one into characters (bär), computing Content-Length from the string length, a <meta charset> that does not match the file.

Three kinds of vulnerabilities#

Exam recipe#

1. HTML: full skeleton <html><head>…</head><body>…</body></html>; give every element the script touches an id; include the script with defer in the head or at the end of the body; for form tasks give the input a name.
2. JavaScript: select with querySelector("#id"), attach onclick / addEventListener("input", …), build the URL by concatenation, await fetch(url).then(r => r.json()) inside an async function, write with .textContent (or sanitize if the task mentions injection).
3. HTTP lines: request line = method + path-with-query (no host) + HTTP/1.1; response = HTTP/1.1 200 OK and Content-Type: application/json (or text/html for a page).
4. Encoding: code point → byte count from the range → fill payload bits → hex → %XX per byte.

Exercises & Exam Questions#

<html><body>
  <h1>Search</h1>
  <form>
    <input type="text" name="query">
    <input type="submit" value="Search">
  </form>
</body></html>

GET /search.html?query=example HTTP/1.1

<html><body>
  <h1>Enter Query</h1>
  <input type="text" id="query"/>
  <p id="result"></p>
  <button>Predict</button>
  <script src="script.js"></script>
</body></html>

document.querySelector("button").onclick = async function() {
    let q = document.querySelector("#query").value;
    let ob = await fetch("/backend?q=" + q).then(r => r.json());
    document.querySelector("#result").textContent =
        ob.class + " " + ob.probability;
};

HTTP/1.1 200 OK
Content-Type: application/json

<html><body>
  <input type="text" id="query"/>
  <div id="result"></div>
  <script src="jquery.js"></script>
  <script src="search.js"></script>
</body></html>

GET /?q=h HTTP/
GET /?q=he HTTP
GET /?q=hey HTT

def search_server(server_socket, index, titles):
    while True:
        client = server_socket.accept()
        request = client.read()
        request = request[5 : request.find("HTTP")]
        query = request.split(" ")
        title = search(query, index, titles)
        headers = "Content-Type: text/plain\r\n" + \
                  "Content-Length: " + len(title) + "\r\n" + \
                  "\r\n"
        client.send(headers + title)

document.querySelector("#query").addEventListener("input", async function() {
    const content = document.querySelector("#query").value;
    const response = await fetch(
        "http://localhost:8000/?query=" + content
    ).then(response => response.text());
    document.querySelector("#result").innerHTML = response;
});

Occurrences#

Lectures#

• DBIS_VL09 — sockets, bytes vs. strings, HTTP, media types, HTML, CSS, forms, template variables, URL encoding (static app)
• DBIS_VL10 — JavaScript, DOM, fetch/async/promises/JSON, multi-threaded server, vulnerabilities (private data, code injection, SOP/CORS), Unicode/UTF-8 and URL encoding (dynamic app)

Related Topics#

• Fuzzy Search and Q-Grams — the web app of Sheets 9/10 serves fuzzy prefix matches for Wikidata entities; the server keeps the Q-Gram Index in memory and answers each request from it (Slides 10).
• SPARQL and Knowledge Graphs — clicking a matched entity shows all triples with it as subject, computed with the SPARQL-to-SQL engine from Sheet 6 (optional in DBIS Sheet 09 (not published), required in DBIS Sheet 10 (not published)).
• Encodings and Compression — UTF-8 in detail (code points, validity, byte counts); URL encoding builds on it.