SENG365 Exam Notes

GraphQL

REST: weakly-typed, multiple round-trips; bad especially in mobile networks.

Prevents over-/under-fetching by fetching exactly what data you need, all without having to update the backend and frontend in sync.

All responses return 200; errors returned in user-defined fields.

Security

OWASP Top 10:

  1. Injection: eval, SQL injection, log injection (e.g. newline in username)
  2. Broken auth: MITM attack with session information exposed in plain-text, un-hashed/weak passwords, no rate limits, no session invalidation
  3. Sensitive data exposure: plain text or weak encryption while in transit, passwords not encrypted, other flaw used to extract information after decryption
  4. XML external entities: XML parser accessing local files etc.
  5. Broken access control: roles/user permissions not validated
  6. Security misconfiguration: insecure defaults, unnecessary features enabled, no hardening, default accounts/passwords used, unpatched, stack traces in error messages
  7. XSS:
    • Persistent XSS: page with unsanitized user input viewed by victim
    • Reflected/DOM-based XSS: victim sent URL with attacker-controlled JS in query parameter
  8. Insecure de-serialization: attacker modifies serialized data sent to server (e.g. changing own user permissions, directory path, replay attacks)
  9. Vulnerable components: outdated/unpatched libraries, databases, OSes etc.
  10. Insufficient logging

Authentication: establish claimed identity

Authorization: establish permission to act

HTTP stateless: authenticate and authorize every request.

SPAs

SPAs: can redraw any part of the page without requiring a full reload.

Model-View-*:

Model-View-Controller:

        model          user                event
Model ---------> View -------> Controller --------> Model
        update         event               handler

Model-View-Presenter:

          model update 
Model <--> Presenter <---> View
           user event

Model-View-ViewModel:

Used by Vue.

         model update               two-way
Model <---------------> ViewModel <---------> View
        event handler               binding

Communication

XMLHttpRequest (or JQuery’s AJAX - async JS and XML):

const req = new XMLHttpRequest();
req.addEventListener("load", (response) => ...
req.open("GET", "http://example.com");
req.send();

Asynchronous, via callbacks. JS’s concurrency model uses event loops - it is single threaded so it can deal with multiple tasks at once, but is not parallel - it does not run multiple things simultaneously. When the call stack is empty, it grabs oldest finished item from the event loop which is finished and pushes it onto the call stack.

Fetch is a newer API which uses promises:

fetch("http://example.com")
.then(res => res.json())
.then(obj => console.log(obj))
.catch(err => console.log(err));

CORS

Browser disallows XHR requests to different origins (protocol + domain + port).

Server can optionally allow this. Browser sends an HTTP OPTIONS request before making any XHR request:

WebSockets

Persistent two-way communication.

Client sends GET request to specific endpoint with a few headers (e.g. Connection: Upgrade, Upgrade: websocket, Sec-WebSocket-Key/-Protocol/-Version) to which the server response with a 101 (switching protocols) and a few more headers. After this handshake, it switches to using WebSocket.

const WebSocket = require("ws");
const ws = new WebSocket("ws://example.com/path");

ws.on("open", () => ws.send("A"));
ws.on("message", msg => console.log(msg));

Performance

Bundling: bundles code from multiple files into one, possibly minifying it.

Webpack: configured with app entry point; recursively follows imports, so only code that is used is outputted. Output file name contains hash.

Lazy loading: download only the chunks you need. Requires integration with framework.

Compression: accept-encoding: gzip, ... request header, server may respond with content-encoding: gzip.

Caching

expires:

cache-control:

Weak caching requires round-trip but ensures all clients have the up-to-date version of the resource.

SPAs:

Modules

// ES2015: ECMAScript Standard
export const bla = 10;
export default bla;

import defaultExport, { bla, bla as alias } from "lib";
import * as lib from "lib";

// CommonJS: used in many NodeJS libraries

exports.bla = 10;

const lib = require("./lib.js")

Virtual DOM

Copy of the DOM in JS:

Web Storage

Cookies: ~4 kB max sent in headers on every request.

Local/session storage: ~5 MB max of key-value string pairs. Specific to origin.

IndexedDB:

CacheStorage:

Progressive Web Apps

Web apps that appear to be ‘installed’ like native applications.

PWAs:

Service workers allow notifications and background sync (offline cache). Service workers:

Testing

Automated tests of the backend server fails because interpretation and/or implementation of API by the server and tests differ:

Test for both successful and failure cases; note that some tests may pass for the wrong reasons.

Tests should be independent where possible.

User pre- and post-conditions for set-up and tidy-up.

Chai-HTTP:

W3C WebDriver:

Selenium-WebDriver:


const webdriver = require("selenium-driver"),
  By = webdriver.By,
  key = webdriver.Key,
  until = webdriver.until
;

const driver = new webdriver.Builder().forBrowser("firefox").build();

driver.get("https://google.com")
  .then(() => 
    driver.findElement(By.name("q"))
    .sendKeys("reddit", Key, RETURN)
  ).then(() => {
    driver.wait(until.titleIs("reddit - Google Search"), 1000)
  }).then(() => driver.quit())

Vue test utils: arrange, act, assert

Misc

"use strict"; // First statement inside a script or function
// this defaults to undefined
// variables must be declared
// errors thrown instead of tolerating some bad code
// `with` statements and octet notation rejected (use 0o123)
// `eval` and other keywords cannot be assigned
// ES6 modules always in strict mode