Web

(function () {
    var ready = new Promise(...);
    function sendNativeRequest(request, sendResponse) {
        ready.then(...);
    }
    return {
        sendNativeRequest: sendNativeRequest,
        ...
    };
})();

• It creates single runtime object and its contents are all truely private.

• Javascript code can be executed by clicking a bookmark entry, simply by adding javascript: prefix to the url as a protocol.

• JavaScript Object Notation

HTTP/0.9

• No status code, only GET

HTTP/1

• The TCP handshake and TLS is made every request.

HTTP/1.1

• Persistent Connection: the connection not closed unless it is explicitly told so.
• Pipelining: Multiple request over one TCP connection without waiting for the response.
  • Problem with Head-of-Line Blocking: The later requests has to wait for the delaying previous response.
  • Pipelining was not widely used. Instead, Domain Sharding was employed.
• Chucked Transfer Encoding: Sever transfer data in chunk for large and dynamic contents.
• Cache-Control: The age of data can be specified for it to be cached.
• ETag: Conditionally request data. For example, if it has changed since last visit.

HTTP/2

• The header and body of a message is framed within Binary Framing Layer, instead of the previous plain text format.
  • Multiple independent request can be made through a single TCP connection using the Binary Framing Layer.
  • Stream Prioritization: Set the priority of loading certain data.
• Server Push: Server can send multiple response.
• HPACK Compression: Header is now compressed. Repeated tags are compressed.

HTTP/3

• Use QUIC instead of TCP
• It is connectionless, and the handshake is much faster. It uses connection ID that is independent of IP addresses.
• It handles network changes better.

1. Initial Browser Request
   • Browser cannot assume which protocol is available from the server. Therefore it use the lowest possible protocol, often HTTP/1.1 or HTTP/2.
     • The protocol informations can also be provided by the DNS server.
     • Some servers just refuse to connect when the protocol is not matched.
     • Modern browser uses HTTPS by default for security reasons, unless the IP address is directly specified.
2. Initial Server Response
   • The server can replies with which protocols are available using the Alt-Svc field.
     • e.g. h3 for HTTP/3.
   • The server can also redirect the HTTP, port 80, to HTTPS, port 443.
   • The domain name the user used is passed as the :authority: (pseudo) field in the request header, so that it can be checked whether it is the case of cross-origin, when using HTTPS.
     • The strict-origin-when-cross-origin policy.
   • In the case of HTTPS, the browser blocks the initial connection if the returned certificate does not match:
     • Common Name: the url user used
     • …
3. Renewed Browser Request
   • Browser reconnect (when available) with the specified protocol.

Cross origin access is the behavior of an web page from a domain accessing the resources of the different domain. The cross-origin is allowed in a restricted manner by default.

A request to cross-origin is checked, by the browser and the server whether it is valid.

The browser preflight the HTTP OPTIONS request and gets approval from the server with Access-Control-Allow-Origin (ACAO). The actual request by the web page is then made.

• Asynchronous JavaScript and XML
• The decoupled data interchange form the display of the web page.

• Let's Encrypt provides free TLS certificates that can be easily installed with certbot.

• Open Authorization

This is used for a limited access by third-party through HTTP by issuing an access token to them.

It can

• Granting partial authorizations with a special access tokens.
• Connect accounts.
• Login with other accounts.

• Simple Per-page key-value storage that is persistent.
• Set with localStorage.setItem(string key, string value) and get with localStorage.getItem(string key) -> string value in 2.

Based on React