Part 4 - TLS, Performance, More JS, and Progressive Web Apps Flashcards
4th part of the course, Optimizing, new techniques, and a lil bit of security
What is TLS?
Transport Layer Security
- Transport Layer: works on top of TCP/UDP
- Fully integrated with QUIC
- TLS is primarily used to secure data during transmission
What is HTTP inside of TLS is called?
HTTPS
How does TLS ensure identity?
With TLS I can ensure the server I’m connected to is the server I meant to connect to.
This is done with certificates.
A certificate works like an ID card.
The server sends a certificate with its domain name (called a “Common Name”) and a big number called a public key.
The certificate also includes other details, such as who made it, for example, “Bank Inc.”
What does the certificate that the server sends (in TLS) have that is so crucial?
cryptographic signature
What are signed certificates?
The certificate’s signature is unique to that certificate.
If you change the public key or the domain name, the signature won’t match anymore.
The certificate’s signature also comes from a specific entity that made that signature.
It tells us who signed it, and only they could have produced that signature.
No one else can pretend to have signed the certificate, or the signature won’t match.
Explain how Cryptographic Signatures work
I make a private key and a public key as a part of a cryptographic signature algorithm.
I keep my private key secret, known only to me.
I give away my public key to the whole world so everyone knows it’s my public key.
I make signatures by combining my private key and some other information I want to sign. In this case its the banks domain name and the bank’s different public key.
You can check my signature by using my public key (which I already gave you) and combining it with the signature and information that’s been signed to check it.
What is Certificate Authority?
In an example with a bank,
A certificate authority uses their private key to sign the bank’s certificate.
The bank sends their certificate to you so you can check it.
You have the CA’s public key.
You combine it with the banks certificate.
I.E the person that uses their private key to sign the certificate
What is the TLS handshake?
TCP Handshake
Client sends TLS “hello”
Server sends TLS “hello”
Client verifies server certificate
Client and server agree on an encryption key
Client sends encrypted “ready”
Server sends encrypted “ready”
What are Cipher Suites
Client and server agree on crypto algorithm to use during handshake
Many different crypto algorithms are available
So then generally, how do we avoid security problems?
TLS everything
Make sure all traffic to/from your web app is running over TLS
Example: it may not help if only login is over TLS because an attacker can replace your TLS-encrypted login page with an unencrypted one by replacing the link on the unencrypted main site
How do we avoid TLS security problems?
Keep software up to date
No Windows XP
Don’t communicate with out-of-date software
Example: if something on your site is meant to be secret, even one bad client can leak the secret!
How is performance measured in web development
It is a non-functional requirement
measured as:
- Concurrency (# of requests or users at once)
- Latency (ms)
- Volume (requests/second)
- Bandwidth (bytes/second)
- Utilization (percent)
What are the things we have to do before we optimize?
Make sure you have a performance problem.
Measure all of our performance metrics
record these #s
compare performance after changes
run tests
What are the techniques of optimization?
Caching
Reduce # of round trips
Reduce download size
Asynchronous communication
How does Caching affect performance?
Caching increases locality
Content/data is closer to where it is needed
Locality increases available bandwidth
Locality decreases latency
What are the levels we can cache?
CPU
Memory (RAM)
Disk
Network
What are the levels of HTTP caching?
Browser cache (memory/disk)
Near reverse proxy cache server or CDN (Network)
Far reverse proxy cache server (Network, but higher latency and lower bandwidth)
Original server
Browser Caching
Fastest
Force-refresh with control-shift-R
Browser manages balance between RAM and disk
Private windows typically won’t use disk at all
What is the difference between tracking state and caching
Server tracking state and changing its response depending on state prevents effective caching
Authentication is a kind of state
→ Authentication prevents caching
Limit stateful and authenticated server content
Separate out content that needs to be stateful/authenticated from content that can be public and shared!
What should you avoid for static content?
Cookies and Auth
What is static content?
Static content = content that doesn’t change or rarely changes
Examples:
Images
CSS
Fonts
Scripts
what should you use for static content
Use GET for static content
Use cache-busting: version number or hash in URL for static content
What effect do round-trips have on latency?
Increase latency
Happen whenever you have to wait for a response before making the next request
How do we reduce round trips?
- Use HTTP/3: TCP is eliminated, TLS/HTTP requests can be done in fewer round trips
- Use Fewer Servers –> look up fewer domains, make fewer connections
use - use asynchronous loading
- Avoid CSS imports, use JS ‘complier’ like webpack
- Avoid HTTP redirects
How do we reduce DNS round trips?
Avoid CNAME
Allow DNS Caching
Provide multiple A/AAAA records in a single response
Why is async better than sync?
Other things can be processed or loaded while something is loading
Fewer requests are blocked
Synchronous adds a round trip for each request
Asynchronous = Parallelizable
Synchronous = Serialized
How do we reduce request size?
Use HTTP/2 and HTTP/3
- Automatically applies header compression
- If headers don’t change, they won’t be re-sent!
- Lots of headers, big cookies and big URIs not a big deal!
How do we minimize the resource size?
HTTP compression
image compression
Why should we avoid POST?
POST is not idempotent
POST is not cacheable
POST is dynamic
POST adds lots of round trips
How do errors affect performance?
403s, 404s, 410s, etc. are all slow
- Server often works harder to serve an error than serve content
- Errors not cached/cacheable
- cause logging overhead
Why do we use ES modules?
At some point it became necessary to split js into multiple files
So now we use ES(ES6) modules
How does node tell if something is an ES module
.mjs
What extensions does node not recognize is an ES module, but actually is?
.esm or .esm.js
What are common JS module?
frontend code that uses CommonJS
- Needs a library or bundler to work in browser
What is an ES module?
Needs Node.js version 14 or better, supported natively in browser.
You can use “top-level await” that is, await outside of an async function
This delays loading until the promise resolves
What are transpilers and bundlers?
They make JS load faster (possibly) by merging large trees of modules into single files
Support modern features on older browsers
Compile a variety of languages to JS
What is tree shaking
Bundlers usually perform Tree-Shaking
Removing unused parts of modules and their dependencies
For example, say you exported a bunch of modules, but only used 2, all other exports would just get removed
What are polyfillls?
Bundlers often also auto-add these
JS script that adds support for newer features not supported in older browsers
What is the difference between a transpiler and a Polyfill?
Transpiler: runs before deployment during build
Polyfill: runs in the browser at runtime
What does the spread operator do?
…
When used in arguments: takes an array and turns it into arguments
When used in parameters: takes the rest of the arguments passed in and turns it into an array
When used in an array: takes an array and inserts its contents into the array
*Maybe add examples here later
What are progressive web apps?
Run on multiple platforms and devices from one codebase
Can run both as a website and a mobile app
Can even run on some refrigerators
Can perform tasks while main app is not running
Modern examples include Uber, Spotify, Google Maps, and Pinterest
What are the parts of PWA
ServiceWorkers API
Installer script
ServiceWorker Script
What is the service worker script
Loaded by HTML (directly or indirectly) script tag
Should be in all the main pages of the app
Uses the navigator.serviceWorker object, a ServiceWorkerContainer
Has access to the page and everything like a normal script
What is a ServiceWorker?
Intended to improve performance of website/app
caching - different from HTTP cache
Event based
Works in the background- does not interrupt main app
Optional
How does the ServiceWorker API work?
Basically everything returns promises
async / await is your friend!
How does the ServiceWorker Script work?
Loaded by the browser after being registered by the installer script
Must be at the root of all the pages it’s going to work with
It includes sub-folders and pages in the same folder
Excludes other domains and other parent folders!
How must the ServiceWorker script be loaded? How does it run? What can it access?
Must be loaded over HTTPS
Cannot access the page, window, and most JS APIs
console.log messages will not show up in the tab!
Runs in a separate thread
In PWA, can objects be cloned?
Yes!
Objects that can be easily cloned
Similar to Python copy.deepcopy
Used for thread-to-thread Communication
- Web Workers
- Shared Workers
- Service Workers
What can structured cloneable objects not have?
Functions
DOM Nodes
Complicated objects (e.g. made by a class)
Event
Are serviceworker scripts always running?
Can (and will!) be killed by the browser whenever it feels like it
Use event.waitUntil() to ask browser for more time
They are not always running!
When does the service worker script run?
Only runs when first registered and some events:
install - service worker is first installed
activate - service worker becomes the active service worker version
message - a tab (client) sent the serviceworker a message
fetch - page makes a fetch request
push… - Push API (Notifications)
