JavaScript Concurrency

Phillip Roberts: What the heck is the event loop anyway?

Loupe

Web APIs

The browser provides many APIs that developers use. Functions like setTimeout or console.log do not exist in the JavaScript engine, but refer to functions provided by the platform. Calls to these functions are delegated out fromt the JavaScript runtime and sent to the browser. Any callbacks are pushed to the task queue to be handled later.

Frame

The frame is a structured collection of data important to the function call. It includes the return address of the function, any arguments passed to it, the lexical environment of the function (or a reference to it), and a space for local variables.

Frame Stack

Each function call adds a frame to the stack. Function calls are nested by using the stack's First-In-Last-Out ordering. Frames are popped off of the stack when the function returns.

Message (or Task) Queue

Functions can be referred to by a message. Callbacks are pushed to the queue as a message after the asynchronous function has finished execution. The message merely refers to the function.

Render Queue

Because we're in a single threaded environment, the runtime must juggle both script execution and rendering. Rendering has a higher priority, so the render queue will be checked before the task queue. This means that if rendering takes a long time, it will block script execution. Similarly, if a function on the call stack takes too long to finish, it will block rendering.

It may be that there is no physically separate render queue. Both tasks and messages could be in the same priority queue.

Heap

Objects are allocated in the heap - a large, unstructured section of memory for the application.

Event Loop

The event loop continually checks the stack and the queues at regular intervals. When the stack is empty, it dequeues the first message in the queue and adds its referenced function to the stack to be executed.

Communication

Web workers and cross-origin iframes have their own stack, heap, and message queues. The two runtimes communicate via the postMessage method, which will send a message of arbitrary data to any other runtimes that are listening to the message event.

Public Key Infrastructure

Goals

The goal of PKI is to provide a way to encrypt data while also providing a way to verify the sender, receiver, or both.

How does it work?

Generally speaking, each participant has both a private and a public encryption key. The private key is kept safe while the public key is made available on a public repository or sent along with the encoded message. Any data encrypted with one can only be decrypted with the other. In ths way, person A can encrypt a message with their private key, then send a message to person B, who can decrypt it with person A's public key. By virtue of the data being decrypted by the public key, person A's identity is verified. For an added level of security, person A could encrypt their message first with their private key, and then with person B's public key. Person B, being the only person with thier private key, then is able to assert that the message was both intended for them and sent by person A.

Cryptography

DSA

What is it?

The Digital Signature Algorithm (DSA) is a standard for processing digital signatures. The algorithm produces a signature consisting of two numbers, r and s, which are both 160-bits in length. It is primarily used to create assymetric keys.

How does it work?

Person A wants to sign a certificate that person B can validate. Person A will be the party who creates the signature while person B decrypts it.

Steps to create keys

1. Select a prime number, q, with bit length l.
2. Select another prime number p that
   • has bit length l
   • q divides into p - 1
3. Select a generator, 𝝰 of the unique cyclic group of order q in ℤ % q. This means that the generator must be a number where 𝝰^q is 1, and no power less than q will be 1.
   • Select some number g in ℤ % q and compute:

     𝝰 = (g ^{p - 1 / q} % p)

   • Repeat until 𝝰 is not 1
4. Select some random integer d such that 1 ≤ d ≤ q - 1
5. Compute:

   B = (𝝰^d % p)

The public key is k_pub = (p, q, 𝝰, B)

The private key is k_pr = d

Steps to use keys to sign data

1. Pick an ephemeral key, K_E, such that 0 ≤ K_E ≤ q

2. Compute

   r = (𝝰^K_E % p) % q

3. Compute

   s = (SHA(message) + d * r) K_E^-1 % q

   Note the use of an SHA hash function to get a fingerprint of the message

Steps to verify a signature

1. Compute

   u₁ = s^-1 * SHA(message) % q

2. Compute

   u₂ = s^-1 * r % q

3. Compute

   V = (𝝰^u₁B^u₂ % p) % q

4. If V == r % q, then the signature is valid

RSA

What is it?

How does it work?

How does DSA differ from RSA?

source

DSA and RSA are very similar in that they are both algorithms that generate asymmetric keys for encryption. DSA is based on disrete logarithms (𝝰^d = B) while RSA is based on large-number factorization (P * Q = N). Both methods take a very long time to reverse engineer with modern computers. DSA is a bit faster than RSA when creating a key pair and decrypting. RSA is a bit faster when validating the signature token and encrypting.

What is AES?

What is the Diffie-Hellman exchange algorithm?

Diffie-Hellman is a way for two parties to come up with a shared secret that can be used for symmetical encryption without having to send any compromising data in the clear. Instead of sharing sensitive data, both parties are creating a key together. Since nothing is ever transmitted or saved, anyone looking at the traffic later cannot easily decrypt it.

How does Diffie-Hellman work?

DFE relies on a straightforward mathmatical property of exponents.

(M^a)^b % p == (M^b)^a % p

1. Person A and Person B agree to use a modulus P and a base G (which is a primitive root modulu P).

2. Person A chooses a secret integer a, calculates A = G^a % P, then sends the result to Person B.

3. Person B chooses their own secret integer b, calculates B =G^b % P, then sends the result to Person A.

4. Person A uses Person B's calculation to create the shared secret, s = B^a % P.

5. Person B does the same with Person A's calculation, giving the same shared secret, s = A^b % P.

source1 related

What is elliptic-curve cryptography?

Because elliptic functions are periodic, inputs can be mapped to a finite set of numbers within a group, much like we accomplish with modular arithmetic in Diffie-Hellman. By using point multiplication, a shared secret key can be derived for key agreement protocols like Diffie-Hellman.

How is elliptic-curve cryptography used?

Elliptic-curve cryptography is useful for key agreement, digital signatures, and number generators. Its use in encryption is in key agreement for symmetic encryption.

Why would elliptic-curve cryptography be used?

We use elliptic-curve cryptography because its very efficient. To reach the same level of security that we would get from a 3,000+ bit key using modular arithemtic, we only need 256 bits using elliptic functions.

What is SHA?

The Secure Hash Algorithm is a one-way hash function that is meant for signatures rather than cryptographic encryption. It always outputs a 160-bit number that can be used to verify the integrity of the data.

Immutable Data Structures

What are they?

Immutable data structures are any data structure whose value or state cannot change. In practice, most "immutable" data structures are actually persistant data structures. The difference is that while immutable data structures absolutely cannot change their value, persistant data structures can, though they always keep the data they had and use clever tricks to add new data.

How do they work?

Immutability is best handled by a data structure called a Hash Array Mapped Trie (HAMT). The idea is that we can break up one array into a prefix tree of smaller arrays. Data can be accessed via a string key or numerical index by somehow converting the value to a binary representation, then using the binary to descend the tree. We can then update the data by copying only the leaf of the prefix tree and updating the node pointers to reach the new leaf. Since the old data was never removed, it's simple to create multiple references to different versions of the same data structure without recreating it entirely. This is called "Structural Sharing", and it's the big idea behind Immutability in many languages.

• reference
• reference
• video

Why are they useful?

source

• Thread safety - because the state of any object cannot be modified, threads working on the same data can only copy it to their own memory space in stack in order to manipulate it. This means it's impossible for any one thread to interfere with the operation of another.

• Temporal Coupling - Objects that take configuration to work can be tricky to manage since misconfigurations will only be exposed during runtime. This makes the code brittle as deleting those calls to the configuration methods would silently break the code. If the object's configuration methods were to return a new object with the desired setting instead of altering internal state, the compiler would be able to watch for code breaking modifications.

• Avoiding side effects - if two different function calls are manipulating the same piece of data, such as sorting an array, then the manipulation has a side effect of altering the array's state for the other function. This leads to bugs and maintainability issues, as well as the extra code required to make defensive copies.

• Failure Atomicity - If an object's methods alter its internal state, an error in one line of code could leave the object's state broken (one field gets updated just before the crash so it no longer accurately represents anything). Forcing the object to return a new object each time the method is called means that any errors just results in a discarded object.

• Immutable data structures can be shared easily by reference and do not require defensive copying.

• Debugging is easier as there is only one value for the structure.

Scalability and Architecture

Microservices

What are they?

The microservice architecture is an application style that structures app's logic in loosely coupled services which are usually distributed among distinct systems. For instance, a server app may itself simply handle client requests, and operations like data fetching or image processing will be handled by sending a request to yet another machine.

Why are they useful?

Microservices make development easier to plan and scale because each service can focus on their own goals and implementations without having to worry about what any other team is doing. So long as there is a stable API for the services to communicate with each other, modules may be refactored, updated, and tested separately where a monolithic app would have to be tested for regressions in its entirity before each deployment.

Using microservices, it is also much easier to scale an application's backend to include as many client platforms as needed. Because services are so loosely coupled, they can be mixed into any app stack without having to build a tightly itegrated monolith.

What problems could microservices introduce?

• Relying on multiple, smaller services can introduce latency in the app. Each service may only take a few milliseconds, but that number scales linearly to the number of services used. Adding features to a monolith, on the other hand, does not require new network calls and so does not generate nearly as much latency.

• Downtime can be more difficult to manage and requires a lot of redundancy. A monolith with 99% uptime is great, but 10 microservices with 99% uptime each works out to 90% uptime total

• While development velocity seems like it should only increase, multiple projects working without coordination or consistent environments can lead to a fragmented codebase where teams become insular and specialized. Similarly, it can be more difficult to get new developers up to speed as the setup is complicated.

SaaS

What does it mean?

SaaS (Software as a Service)is a delivery model that turns software into something that the user pays to access rather than something they pay to obtain. Such services are typically access via a thin client, most often a web browser.

PaaS

What does it mean?

PaaS (Platform as a Service) takes the same concepts as SaaS but applies them specifically to developers who want to create apps without having to manage their own infrastructure. This could come in the form of a cloud service that the user can access from anywhere, or a private service which is local to their own intranet or even their own system.

Because it streamlines setup and removes many opportunities for mistakes, PaaS can accelerate development and reduce friction for new employees.

HTTP

What is it?

HTTP (Hypertext transfer protocol)is an application protocol that connects distributed hypermedia information systems. It is defined as structured text which uses logical links betwen nodes (hyperlinks) to exchange or transfer hypertext. It is stateless.

HTTP has been the foundational protocol for the internet.

Definitions:

Session

A series of request-response transactions between server and client. Begins with a client hello mesage on port 80 (443 for SSl). Server responds with requested resource (if any) or an error code.

Authentication scheme

A challenge-response mechanism that verifies the client's identity. HTTP provides basic access and digest access schemes but is also extensible.

Authentication realms

Realms divide resources within a single URI to allow for more granular access.

Methods

A text indication that categorizes the desired action to be performed by the server.

Status code

A 3-digit numeric code that, along with the reason phrase, describes the response and its outcome.

Persistent connection

HTTP/1.1 introduced a keep-alive mechanism. Prior to this version, connections were close after a single request-response pair and any subsequent requests needed to restart the TCP handshake. Because this is slow, persistent connections reduces latency and with other optimizations (chunked transfer encoding, pipelining, byte serving), connections become noticebly faster.

Session state

Because HTTP is stateless, there is no protocol definition for maintaining connection state. Some applications do manage connection state by using cookies or hidden tokens in web forms.

Chunked transfer encoding

Allows the server to maintain a persistent connection for dynamicaly generated content. Because the length of the content isn't known before it has been completed, the Content-Length header cannot be used. Chunked encoding allows the server to send the data in discrete chunks that do not have to have any knowledge of any other chunk, with the final chunk explicitly indicating that the content is finished. Chunking also allows the server to send additional header fields after the body which cannot be known until the content has been produced. An example of this is digital signatures. Without chunking, the sender would have to buffer data until it was complete in order to calculate these field values.

HTTP pipelining

Pipelining allows for multiple HTTP requests to be made in a single TCP connection without waiting for each response. This technique dramatically improves page load times. Each request is queued by the server, so they are processed in the order that they are received and while each request can be made without waiting for any response, the response to any one request could be blocked if there were a problem with the request made before it. Idempotent requests can be pipelined, but POST should never be.

Byte serving

This allows a client to request only a particular piece of a file. Servers advertise their willingness to serve partial requests with the Accept-Ranges response header, and subsequent requests from the client can use the Range header to specify the byte range of the request. Successful partial requests are returned with a 206 status code. If the range is invalid, the response includes a 416 code. Byte serving is an important part of media streaming, as well as reading very large PDF documents.

Long Polling

Long polling is an application design pattern that allows the server to "push" data to the client, which is normally not possible in HTTP. The client initiates a connection as normal, but the connection is set to stay open for a long time. When the connection closes, the client opens a new one. The problem with this method is that both servers and browsers can support only a set number of active connections, so long polling can easily eat into available resources.

Common Headers

Request Fields

Accept

Lists acceptable Content-Type for response

Accept-Encoding

Lists acceptable encodings (ex. gzip, deflate)

Accept-Language

Lists acceptable languages for response

Access-Control-Request-Method, Access-Control-Request-Headers

Initiates a request for cross-origin resource sharing

Authorization

Credentials for HTTP authentication

Cache-Control

Used to specify directives that must be obeyed by all caching mechanisms along the request-response chain (the client and any intermediate servers)

Connection

Control options for the current connection and list of hop-by-hop request fields. Must not be used with HTTP/2.

Cookie

An HTTP cookie previously sent by the server with `Set-Cookie`

Content-Type

The MIME type of the request body (for use with POST and PUT)

Date

The date and time that the message was originated

Forwarded

Disclose original information of a client connecting to a web server through an HTTP proxy

Host

The domain name of the server (virtual or real) and the TCP port number on which the server is listening (omitted if standard). Mandatory in HTTP/1.1, but omitted in HTTP/2

If-Modified-Since

Allows 304 Not Modified to be returned if content is unchanged (by date)

If-None-Match

Allows a 304 Not Modified to be returned if content is unchanged (ETag)

Origin

Initiates a request for CORS (asks server for Access-Control-* fields)

Referer [sic]

Misspelled. The address of the previous web page from which a link the currently requested page was followed.

User-Agent

The user agent string

Upgrade

Ask the server to upgrade to another protocol (ex. HTTPS/1.2, websocket). Cannot upgrade to HTTP/2.

X-Requested-With

Mainly used to identiy AJAX requests. Most JavaScript frameworks send this field with value of XMLHttpRequest.

DNT

Do not track request.

X-Forwarded-For

De facto standard for identifying originating IP address of a client connecting to a web server through an HTTP proxy or load balancer. Superceded by _Forwarded_ header.

X-Forwarded-Host

Like X-Forwarded-For, but identifies the host rather than IP address. Also superceded by _Forwarded_

X-Forwarded-Proto

Like X-Forarded-For, but identifies the protocol rather than the IP address. Also superceded by _Forwarded_

X-Csrf-Token

Transmit token to prevent CSRF attack.

Response fields

Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Expose-Headers, Access-Control-Max-Age, Access-Control-Allow-Methods, Access-Control-Allow-Headers

Specifies which sites, methods, and headers can participate in CORS.

Accept-Patch

Specifies which patch document formats the server supports.

Age

The age the object has been in proxy cache (seconds).

Allow

Valid methods for a specified resource. Disallowed methods result in _405 Method Not Allowed_

Cache-Control

Instructs all caching mechanisms from server to client whether the object can be cached, and for how long. Measured in seconds.

Connection

Control options for the current connection and list hop-by-hop response fields. Must not use with HTTP/2.

Content-Disposition

Indicates whether the response body content should be displayed **inline** - that is, as markup - or as an attachment to be saved on the client machine.

Content-Encoding

Specifies the encoding type.

Content-Language

The natural language of the content.

Content-Length

The length of the response body in octets (8-bit bytes).

Content-Location

An alternate location for the returned data.

Content-MD5

A Base64-encoded binary MD5 sum of the response content.

Content-Security-Policy

An added layer of security against XSS and data injection attacks

Content-Type

MIME type of the content.

Date

The date and time that the message wa sent.

ETag

Identifies a specific version of the resource for comparing against cached copies.

Expires

Gives the date/time after which the response is considered stale.

Last-Modified

The last modified date for the requested object.

Link

Used to express a typed relationship with another resource.

Location

Used in redirection, or when a new resource has been created.

Proxy-Authenticate

Request authentication to access the proxy.

Public-Key-Pins

[HTTP Public Key Pinning](https://en.wikipedia.org/wiki/HTTP_Public_Key_Pinning), announces hash of website's authentic TLS certificate.

Retry-After

If an entity is temporarily unavailable, instructs the client when to try again (seconds or HTTP-date).

Server

Name of the server.

Set-Cookie

Sets an HTTP cookie.

Strict-Transport-Security

Defines HSTS policy for the client, how long to cache the HTTPS only policy and whether it applies to subdomains.

Transfer-Encoding

The encoding used to transfer data to the user. Must not be used with HTTP/2.

Tk

Response to DNT. Possible values: > "!" — under construction "?" — dynamic "G" — gateway to multiple parties "N" — not tracking "T" — tracking "C" — tracking with consent "P" — tracking only if consented "D" — disregarding DNT "U" — updated

Upgrade

Ask the client to upgrade to another protocol. Cannot be used with HTTP/2.

WWW-Authenticate

Indicates the authentication scheme that should be used to access the requested content.

X-Frame-Options

Clickjacking protection: deny - no rendering within a frame; sameorigin - no rendering if origin mismatch; allow-from - allow from specified location; allowall - allow from any location (nonstandard).

Upgrade-Insecure-Requests

Tells a server which hosts mixed content that the client would prefer redirection to HTTPS and can handle `Content-Security-Policy: upgrade-insecure-requests`. Must not be used with HTTP/2.

X-Powered-By

Specifies the server technology (related to X-Runtime and X-Version).

X-Request-ID, X-Correlation-ID

Correlates HTTP requests between client and server.

X-UA-Compatible

Recommends the preferred rendering engine.

X-XSS-Protection

Cross-site scripting filter.

How does ETag work?

Each ETag identifies a specific version of a resource. If the resource ever changes, so does the ETag. If the resource is downloaded and cached, the ETag is stored with it. Any subsequent requests for resource is sent with If-None-Match its ETag. The server compares the versions, and if they match, a 304 response is sent to the client. If they differ, the server sends the updated resource in a full response, including a new ETag.

How does Content-Security-Policy work?

Content-Security-Policy is a way for website administrators to whitelist the origins that are allowed to host executable scripts. Any other script source, even valid JavaScript that is injected, will not be accepted. CSP can also specify security protocols, such as enforcing HTTPS for data transfer and redirects, and marking cookies with the secure flag.

source

Methods

• GET: Retrieves data from the server with no side effects
• POST: Sends data to the server to create a new entitiy.
• PUT: Sends data to the server to replace an existing entity.
• PATCH: Sends data to the server to update an existing entity.
• DELETE: Remove the specified data from the server.
• TRACE: Tests which machine receives the request.
• OPTIONS: First step in CORS. Requests information about the methods and headers supporting cross origin requests.
• HEAD: Retrieves just the response headers with no message body.
• CONNECT: Establishes a network connection to a resource. Returns a 200 status code and "Connection Established" message.* HEAD: Retrieves just the response headers with no message body.

HTTPS

Why do we need it?

HTTPS is meant to accomplish two things: allow the client to verify the identity of the server, and provide a way to establish a secure connection without sending sensitive data in the clear.

How does it work?

SSL certificates are signed and verified using the chain of trust. When a client wants to establish a secure connection, they initiate the TLS handshake. Starting with a CLIENT_HELLO message, the handshake involves selecting a cypher suite, then having the server transmit its SSL certificate. The client decrypts the certificate using the issuing authority's public key, which reveals the server's public key. Now the client has both established the server's identity and a way to encrypt data which can only be decrypted by the server. The client picks some random prime number to server as the shared secret, then encrypts that secret with the public key and sends it back to the server with a CHANGE_CYPHER_SPEC message, indicating that the client is ready to switch to symmeitrcal encryption. When the server receives the shared secret and the message, it sends a CHANGE_CYPHER_SPEC message back to the client. At this point, an encrypted channel of communication has been established.

Data Structures

Thunk

What is it?

A thunk is a pattern that resembles partial completion. A thunk is a function that returns another function with all parameters completed but one. This allows for function composition and caching the result of a computation for later reuse. Very useful when combined with persistent data structures for asynchronous operations, such as that used in Redux.

Bloom Filters

What is it?

Bloom filters are a way to map arbitrary values to indicies in an array. Data are run through a hash function which outputs the index at which a small value, usually a bit, is switched. In this way, the data's existence can be remembered in a way that's fast to look up, though the exact data itself is not stored. In order to avoid hash collision, most implementations run the data through more than one function.

Why do we use it?

Because lookups are so fast, bloom filters are great for checking whether a given datum exists in a set, such as words in a dictionary or addresses in a routing table.

Binary Search Tree

What is it?

A BST is a tree of data where all nodes have up to two children each - a "left" and a "right". The left side values are all less than the parent node's value, and the right side are all greater than it. This facilitates searches by binary search.

Why do we use it?

Binary search is very fast. A BST allows for searches in the order of Log₂ of the number of nodes.

What does it mean to be balanced?

There is no single definition, but a BST could be considered balanced when the depth of all branches of the tree differ in depth by no more than 1.

How do we balance it?

Balancing a binary tree can be done using either a series of tree rotations (where values are exchanged between parent, left, and right children), or by placing all of the tree's values into a linked list or array, then creating a new BST.

Promises?

What are they?

Promises are an object that represent the eventual result of some asynchronous operation. The promise constructor takes an executor function which itself takes both a success and a failure function reference. The executor function will perform the asynchronous operation and call the appropriate function with the result. The promise object's API consists of two methods - then and catch. A function passed to then becomes the success callback, and a function passed to catch becomes the failure callback. Regardless of what gets returned in either callback, the value is always wrapped in another promise. This means that promises can be chained.

Why do we use them?

Being single threaded, the model historically used to handle asynchronicity in JavaScript is the callback function. The problem with callbacks is that it doesn't take many before the code becomes difficult to read due to indentation. It can also be complicated to keep track of return values. Promises allow for composable asynchronous functions that are not only easier to reason about, but maintain a flat indentation style that is readable.

Security

Mixed Content

What is it?

Mixed content occurs when the initial HTML is loaded over a secure (HTTPS) connection, but other resources (media, stylesheets, scripts) are loaded over insecure (HTTP). It is broken up into two general categories:

• Passive - This is content that does not interact with the rest of the page. This includes images, video, and audio.
• Active - This is content that does interact with the rest of the page. This includes scripts, stylesheets, iframes, flash, and other code that the browser can execute. Active Mixed Content has the highest potential for damage to the user.

Why is it a problem?

• Secrecy - HTTPS prevents an attacker from evesdropping on requests. Mixed content reveals those requests. This opens up the user to man-in-the-middle attack.
• Integrity - HTTPS lets the browser detect if an attacker has changed any of the data the browser is receiving. While this is important for media and other content, it's critical for scripts that transfer sensitive data.
• Authentication - It's important to know that the server you're requesting data from is the same server that you expect and not someone impersonating your bank.

How do we prevent it?

• Always use HTTPS URLS when loading resources.
• Use the Content-Security-Policy-Report-Only header to monitor mixed content errors on your site.
• Use the upgrade-insecure-requests CSP directive to protect visitors.

Cross Site Request Forgery

What is it?

A CSRF attack is one that exploits a site that accepts unauthorized actions from authenticated users. For instance, a banking app that gives authenticated users a form to transfer funds will send a message to the server via a POST request. If the user doesn't have the opportunity to confirm or deny each request, or if the app doesn't somehow authorize each transfer, then it is simple for a malicious actor to create a POST Request on an unrelated site that makes a transfer without the user's knowledge or input. Because a browser will send authentication information in a cookie to the domain, if the user is logged in then there is nothing to stop the malicious request from going through.

What do we do for defense?

The simplest way to mitigate CSRF attack is to have the server generate a token which is embedded in the form. Any action that the user sends with the form will include the token.

Cross Site Scripting

What is it?

Any site that takes user input and injects it into the markup unsanitized is at risk for injecting a malicious script into a link or altered web page. The script could access cookies, send data to another server, run a cryptocurrency miner, or any number of activities that are unwanted by the user.

What do we do for defense?

Browser protections vary by vendor, but the most effective protection is to sanitize all input to neutralize HTML.

What is the same-origin policy?

The same-origin policy restricts JavaScript's ability to access data in domains other than the one it was originally downloaded from. An origin is defined as a combination of URI scheme, host name, and port number. This is a security measure to prevent malicious scripts from accessing sensitive data on another domain, such as the user's bank (the login info would be submitted automatically via cookies) and sending it to yet another (the malicious actor's own server).

JSONP

What is it?

Browser security prevents code execution if it was received via JavaScript from a domain other than what is currently in context. This is a security feature meant to mitigate XSS attacks, but it can be frustrating to deal with if your app is meant to get data from one or more different sources. Browsers do allow script tags to download arbitrary JavaScript code, however, and JSONP is a hack that gets around browser security by placing the download request in a generated script element.

Why do we use it?

JSONP allows us to get around the same-origin security policy by generating a script tag and setting its source to the desired endpoint with a function name appended on the end. The endpoint responds with the desired code wrapped in the function call. Once the browser has downloaded the code, it executes the function.

CORS

What is it?

CORS is a mechanism in HTML5 that manages script access to different domains. It works by intercepting all HTTP requests, first sending an OPTIONS request to the server. The server's response includes all REST methods and origins that apply to CORS.

Why do we use it?

Browser security policy prohibits JavaScript from fetching data in another domain without CORS enabled. By establishing permitted origin domains, we can open APIs to applications.

HSTS

What is it?

HTTP Strict Transport Security is a policy that prevents downgrade attacks and cookie hijacking by declaring that clients should only interact with the server using TLS. It is communicated via the Strict-Transport-Security header, which also specifies a period of time that HSTS should be respected.

Clickjacking

What is it?

It is possible for a malicious actor to set up a page that entices a user to click on something which looks like a good link but actually performs some action to the benefit of the actor. For instance, an invisible iframe laid over a link to an Amazon product could trigger a share on the user's Facebook page or an online purchase somewhere. JavaScript can further obfuscate the hidden action by placing the malicious link under the user's cursor at all times so every click performs the action.

What do we do for defense?

A site can send the Content-Security-Policy or X-Frame-Options response header to indicate whether the site content can be framed. Other techniques are hacks, but can be effective. For instance, loading a CSS rule that hides the site's body only if it has been loaded in an iframe will keep it from being usable in a clickjacking attack.

General

Tips to reduce load times of a web app

• Optimize images to no longer than screen resolution and save it as a compressed file

• Eliminate all JavaScript files to reduce the amount of transferable data

• Combine and minify all CSS and JS files

• Call all JS files at the bottom of the body tag

• Defer or async JS files

• HTTP compression

• Reduce lookups

• Minimize redirects

• Cache

What is a MIME type?

The Multipurpose Internet Mail Extensions standard was originally a way to extend the format of email to support media, extended character sets, multipart message bodies, and header information with non ASCII characters. HTTP has adopted the content types for its headers as a way to appropriately select a media viewer or process data included with the message.

What does a MIME multipart message look like?

MIME messages begin with a message header which contains information about the MIME-Version, Content-Type, and boundary. The version will be 1.0, the type multipart/mixed. The boundary can be an arbitrary string which will appear in the body prepended with two dashes '--'. Each boundary separates distinct MIME messages with zero or more content headers and a body.

    MIME-Version: 1.0
    Content-Type: multipart/mixed; boundary=wall

    Message with multiple parts.
    --wall
    Content-Type: text/plain

    Here's a text message
    --wall
    Content-Type: application/octet-stream
    Content-Transfer-Encoding: base64

    PGh0bWw+CiAgPGhlYWQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+VGhpcyBpcyB0aGUg
Ym9keSBvZiB0aGUgbWVzc2FnZS48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+Cg==
    --wall

Why do we include JavaScript files at the end of the body?

Script downloads block the download of other resources (images, style, content). By leaving the scripts until all of the markup and content has been downloaded, the page can appear to be loaded more quickly.

What do the async and defer attributes do for script tags?

async indicates that the browser should, if possible, execute the script asynchronously.

defer indicates that the browser should download the script after the document has been parsed, but before firing DOMContentLoaded.

Why do we include CSS files in the head?

With the style loaded before the DOM is rendered, the browser can apply CSS rules as the elements are loaded.

What is the difference between cookies and local storage?

	Cookies	Local Storage
Client / Server	Data accessible both at client and server side. Data is sent to the server with each HTTP request	Accessible only at the client. Data must be sent manually.
Size	Storage capacity of cookies is 4095 bytes per cookie	Storage capacity of local storage is 5MB per domain
Expiration	Cookies have expiration and cookie data gets deleted after some time	There is no expiration and has to be removed manually.

How is XHTML different from HTML?

XHMTL

• ...requires that all tags should be lowercase

• ...requires that all tags should be closed with closing tag

• ...requires that all attributes are enclosed in double quotes

• ...forbids inline elements from containing block level elements

What is a RESTful web API?

REST is a set of constraints outlined by Roy Fielding in his doctoral disseration. The constraints define an architectural style that simplifies and decouples the client from the server.

• Uniform Interface - defines the interface between client and servers. The four guiding principles are:

  • Resource based: Resources are identified using URIs, but the resources themselves are conceptually separate. A request does not return a database, or any reference to it, but a representation of the data. This means that the data may be transformed in some way to meet the request, such as translation.

  • Manipulation of resources through representations: when a client holds a representation of a resource, including any metadata attached, it has enough information to modify or delete the resource on the server (provided it has permission). So a RESTful request does not need to know about how or where a resource is stored, but just provide a reference to it that the server will understand.

  • Self-descriptive messages: each message includes enough information for the server to process it (e.g. MIME type). Responses explicitly indicate their cache-ability.

  • Hypermedia as the engine of application state (HATEOAS): Hypermedia is defined as the body content of a message, plus any query string parameters, headers, and the URI itself. This is the way application state is delive

• Stateless - The necessary state to handle any request should be contained within the request itself. If the state must span multiple requests, that state should be resent each time. Statelessness ensures that requests will be deterministic, enables greater scalability (the server doesn't have to store, maintain, update, or communicate sessions state), and load balancers don't have to worry about session affinity.

• Cacheable - responses must implicitly or explicitly define themselves as cahcable or not. This improves scalability and performance as both clients and server can eliminate some interactions.

• Client-Server - Separation of concerns between the two roles keeps data in the server and presentation in the client. This improves portability of the client. Either client or server should be replaceable without affecting the other.

• Layered system - A client cannot distinguish between the end server or intermediaries, allowing for transparent proxies to cache data and provide load balancing. May also enforce security policies.

• Code on demand (optional) - Servers are able to temporarily extend or customize the functionality of a client by transferring logic back to it for execution. JavaScript in the browser may be written to process data, for instance.

reference

What SOAP?

Simple Object Access Protocol specifies a structure for exchanging information, mainly in web services. It is XML based and gets sent over HTTP. A SOAP message consists of 3 parts: an envelope which defines the structure and how to process it, a set of encoding rules for expressing instances of application defined datatypes, and a convention for representing procedure calls and responses.

What is the difference between stateless and stateful protocols?

A stateful protocol is one in which the responder maintains information about the requesting entity across multiple requests from the same source.

A stateless protocol treats each request as an independent transaction, providing all of the information required for the connection.

What is DTD (Document Type Declaration)?

A DTD defines the structure, legal elements, and attributes of an XML document.

• PCDATA - A Parsed Character Data. XML parsers usually parse all the text in an XML document.

• CDATA - Marks code that could be parsed as XML, but indicates that it should not be. CDATA is like a comment, but with some key differences:

  • CDATA is still part of the document, whereas comments are stripped away.

  • CDATA cannot include the string ]]> because it ends the block. Comments cannot include double dashes -- because it ends the comment block.

  • CDATA will interpolate Parameter Entity References while comments will not.

What is HTTP/2?

What is WebSockets?

WebSockets is a fully duplex protocol for client-server communication over a single TCP connection.

What are Server-sent DOM events?

Clients can be configured to accept events streamed from some server location. The server must be configured to send data with the MIME type "text/event-stream".

var eventSource = new EventSource('some_url', { /* options object */ });

eventSource.onmessage = function(data) {
// do stuff with data here
};

eventSource.onerror = function(error) {
// do stuff with error here
};

reference

How would you manually trigger the browser to enable hardware acceleration?

This is easily accomplished by using 3D transform rules, even if they don't transform anything.

.some-class {
  transform: translate3d(0,0,0);
  /* can also use translateZ */
  transform: translateZ(0);
}

reference

What is a factory function?

What is a constructor function?

What does the ES6 class keyword do?

What are the ways that classical paradigms can cause problems in JavaScript?

Testing

Vocab

Stub

A faked method that returns specific data

Mock

A stub with an assertion that the method was called