What the front end must know about computer networking — (HTTP)

The importance of computer networks in the IT industry

IT is Internet technology, engaged in work and the network has a great relationship, the front end is responsible for and background (server) interaction, IT must go through the network, so understand some network knowledge is very helpful.

The front end must know the computer network knowledge series article:

• DNS server and cross-domain problems
• Layered models of computer networks
• IP address and MAC address
• Computer networking knowledge that the front end must know – (cross domain, proxy, local storage)
• Computer network knowledge the front-end must know — (TCP)
• What the front end must know about computer networking — (HTTP)
• Computer network knowledge that the front-end must know — (XSS, CSRF, and HTTPS)

Network model data processing process

message

Composition of the request message:

1. The request line
   • Methods:
     • GET Obtain resources
     • POST sends data to the server, transmitting the entity body
     • PUT Transferring files
     • HEAD Obtains the packet HEAD
     • DELETE DELETE a file
     • OPTIONS asks for supported methods
     • TRACE TRACE path
     • trace
   • Protocol/version number
   • URL (username:[email protected]: 80 / a.h HTML? Limi…
     1. Protocol (HTTP)
     2. Login information (username:password)
     3. Host name (www.baidu.com)
     4. Port Number (80)
     5. Paths (/a.html)
     6. Query parameters (limit=1)
     7. Hahs value (Hash: The server cannot receive the hash value. It is usually a front-end route forward.)
2. Request header
   • General Header
   • Request Header
   • Entity Header Fields
3. Request body

Composition of response packets:

1. Response line
   • Protocol/version number
   • Status code:
     • 1XX Informational(Informational status code)
     • 2XX Success(Success Status Code)
       1. 200(Data sent from OK client is processed normally
       2. 204(Not Content Normal response, no entity
       3. 206(Partial Content Range request, returns Partial data, responds to the entity Content specified by content-range)
     • 3XX Redirection
       1. 301(Moved Permanently redirected Permanently
       2. 302(Found) temporary redirection, specification required, method name unchanged, but will change
       3. 303(See Other) is similar to 302, but the GET method must be used
       4. If-match, if-modified-since, if-none_match, if-range, if-unmodified-since
       5. 307(Temporary Redirect) Request methods should not be changed
     • 4XX Client Error(Client Error status code)
       1. 400(Bad Request) The syntax of the Request packet is incorrect
       2. 401 (Unauthorized) Requires authentication
       3. 403(Forbidden) The server denies access to corresponding resources
       4. 404(Not Found) Resources could Not be Found on the server
     • 5XX Server Error
       1. 500(Internal Server Error) The Server is faulty
       2. 503(Service Unavailable) The server is overloaded or is being stopped for maintenance
   • Status code Cause phrase
2. Response headers
   • General Header
   • Response Header
   • Entity Header Fields
3. Response body

The first message

Universal Head (Communications Management)

- Cache-control Controls the Cache behavior - Connection management - Date Date of the packet - Pragma packet instruction - Trailer packet tail header - trasfer-encoding Specifies the transmission code of the packet body - Upgrade Upgrade to another protocol - Via proxy server information - Warning Error notificationCopy the code

Request header (Scope, limits, and processing of request resources)

- Accept Specifies the media types that can be processed by the user agent. - Accept-Charset Specifies the preferred character set. - Accept-encoding Specifies the preferred Encoding. - Accept-langulage specifies the preferred language - From the user's email address - Host the server on which the resource is requested - if-match compares the entity tag - if-modified-since compares the update time of the resource, Used for cache - if-none-match to compare entity markers - if-range to send entity Byte Range requests when resources are not updated - if-unmodified-since To compare the update time of resources (as opposed to if-modified-since) - Max-max-maximum transfer hops - proxy-authorization Proxy server requires client authentication - Range entity byte Range request - Original obtaining party of THE URI in the Referer request - TE transmission code priority - User-agent Indicates the letter of the HTTP client programCopy the code

Node analyzes request packets

const http = require('http');
http.createServer(function(req,res) {console.log(req.httpversion)// The protocol version that prints the request line console.log(req.url); Log (req.method)// Prints the request line method console.log(req.headers); If there is no request body, the data event will not be triggered. Generally used for POST, PUT, etc. Req.on ()'data'.function (data) {
        console.log(data)
    });
    req.on('end'.function(data) {// Must be triggered every time'end'
        console.log(data);
    })
}).listen(3000);
Copy the code

Response header (resource information for response)

- accept-ranges Specifies whether bytes Ranges are accepted. Range 206 request - Age resource creation time - ETag resource matching information - Location The client is redirected to the specified URi-proxy-authenticate authentication information about the client by the Proxy server - retry-after - Server Server information - Vary proxy Server cache management information - WWW -Authenticate Server authenticates the clientCopy the code

Entity head field (body content information)

- Allow HTTP methods supported by resources - Content-encoding Encoding method of the entity - Content-language Natural Language of the entity - Content-Length Size of the Content of the entity (in bytes) - Content-location Replaces the URI of the resource - Content-MD5 digest of the entity - Content-range Location Range of the entity - Content-Type Media Type of the entity body - Expires Expiration time of the entity, used for caching - last-modified Indicates the Last modification time of the resource, which is used for cachingCopy the code

Application of packet header:

1. Range requests, which are useful when transferring large media files, or when used with the breakpoint continuation function for file downloads:

Curl -v --header'Range:bytes=0-3' localhost:4000
//download.txt => 1234567890\r\n1234567890\r\n1234567890\r\n

const http = require('http');
const fs  = require('fs');
const size =  fs.statSync('./download.txt').size;

http.createServer(function (req,res) {
    let head = req.headers['range'];
    if(head){
        let[,start,end] = head.match(/(\d*)-(\d*)/); start = start? Number(start):0; end = end ? Number(end) : size-1; console.log(start,end) res.statusCode = 206; // The status code is 206 res.setheader ('Accept-Ranges'.'bytes'); // The server indicates that this is a range request. The range request is in bytes res.setheader ('Content-Length',end-start+1); // Response body bytes res.setheader ('Content-Range', `bytes ${start}-${end}/${size}')// The position of the response body in the response message fs.createreadStream ('./download.txt',{start,end}).pipe(res);
    }else{
        fs.createReadStream('./download.txt').pipe(res);
    }
}).listen(4000);
Copy the code

2. Image security

// If the Referer is not the same as the domain name of the current server, the image is stolen const HTTP = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const {promisify} = require('util');
const stat = promisify(fs.stat);
let whiteList = ['localhost']
http.createServer(async function (req, res) {
  let { pathname } = url.parse(req.url);
  let realPath = path.join(__dirname, 'static', pathname);
  let s = await stat(realPath);
  if(s.isDirectory()){
    fs.createReadStream(path.join(realPath, '/index.html')).pipe(res);
  }else{
    let refer = req.headers['referer'] || req.headers['referred'];
    if(refer){// There is no refer for the resource currently referencedlet host = req.headers.host.split(':') [0];let r = url.parse(req.headers['referer']).hostname;
      if(whiteList. Includes (r) | | r = = = host) {/ / the current request web host and host name refer the same instructions have access to the fs. CreateReadStream realPath () pipe (res); }else{// Return split graph fs.createreadstream (path.join(__dirname,'static/1.jpg')).pipe(res); }}else{
      fs.createReadStream(realPath).pipe(res);
    }
  }
}).listen(5000);
Copy the code

3. Multi-language prompt message

// Client request header: accept-language: en,zh; Q = 0.8, ja. Q =0.9 const messages = {en:'hello world',
  ja: 'Kosher view of the world',
  zh: Hello world,}let defaultEncoding = 'zh'
const http = require('http');
let server = http.createServer(function (req,res) {
  let lan = req.headers['accept-language'];
  if(lan){ //en,zh; Q = 0.8, ja. Q =0.9 => [en, zh;q=0.8, JA;q=0.9] // And sort by weightlet lans = lan.split(', ').map(l=>{
      let q = l.split('; ')[1] ? Number(l.split('; ')[1].split('=') [1]) : 1;return {
        name: l.split('; ')[0],q
      }
    }).sort((a,b)=>b.q-a.q);
    let l = null
    for (let key in lans){ 
      if (messages[lans[key].name]){
        l = messages[lans[key].name];
        break;
      }  
    }
    console.log(l);
    if(l){
      res.setHeader('Content-Type'.'text/html; charset=utf8; ')
      res.end(l);
    }else{
      res.setHeader('Content-Type'.'text/html; charset=utf8; ') res.end(messages[defaultEncoding]); }}else{
    res.setHeader('Content-Type'.'text/html; charset=utf8; ')
    res.end(messages[defaultEncoding])
  }

}).listen(5000);
Copy the code

5. Cache 304

• Forced caching, forced caching is when the server tells the client, “Don’t send any more requests, go to the cache.
• Negotiate (compare) the cache, each time the request is sent, but the server can compare the requested content and return 304 if there is a cache, otherwise return new content

Mandatory cache + last-modified time comparison cache:

1. Enforce cache-control: no-cache, Expires(browser fields)
2. Time comparison cache last-modified (sent by server to browser) + if-modifed-since(fetched by server from browser)

const http = require('http');
const path = require('path');
const fs = require('fs');
const url = require('url');
const {promisify} = require('util');
const mime = require('mime');
const stat = promisify(fs.stat);
const static = path.join(__dirname,'static')
http.createServer(async function (req,res) {
  let {pathname} = url.parse(req.url,true);
  if(pathname === '/favicon.ico') return res.end();
  let realPath = path.join(static,pathname);
  let statObj = await stat(realPath); // Request res.setheader ('Cache-Control'.'no-cache'); // The request will not be sent again within 10 secondslet time = req.headers['if-modified-since']; // The browser arrives again with a headerif- modified - since the fieldif(statObj.isfile ()){// Compare the cache and send the last modification time of the current file to the client res.setheader ('Last-Modified'.statObj.ctime.toGMTString()); 
    res.setHeader('Content-Type',mime.getType(realPath)+'; chatset=utf8');
    if (time === statObj.ctime.togmtstring ()) {// If the value is equal, let's cache res.statusCode = 304; res.end(); }else{ fs.createReadStream(realPath).pipe(res); } } }).listen(3000); // Different CDN distribution times may also result in cache invalidationCopy the code

Mandatory cache + keyword comparison cache:

1. Enforce cache-control: no-cache, Expires(browser fields)
2. Keyword comparison cache: Etag(sent by the server to the browser) + if-none-match(fetched by the server from the browser)

const http = require('http');
const path = require('path');
const fs = require('fs');
const url = require('url');
const {promisify} = require('util');
const mime = require('mime');
const stat = promisify(fs.stat);
const crypto = require('crypto');
cosnt static = path.join(__dirname,'static');
http.createServer(async function (req,res) {
  let {pathname} = url.parse(req.url,true);
  if(pathname === '/favicon.ico') return res.end();
  let realPath = path.join(static,pathname);
  let statObj = await stat(realPath); // Force cache res.setheader ('Cache-Control'.'no-cache'); // The request will not be sent again within 10 secondsif(statObj.isfile ()){// Compare cache: the Etag content is the requested resource after MD5 encryptionlet rs = fs.createReadStream(realPath);
    let md5 = crypto.createHash('md5');
    rs.on('data'.function (data) {
      md5.update(data);
    });
    rs.on('end'.function () {
      let r = md5.digest('base64');
      res.setHeader('Etag',r );
      if (req.headers['if-none-match'] === r ){
        res.statusCode = 304;
        res.end();
      }else{
        res.setHeader('Content-Type', mime.getType(realPath) + '; chatset=utf8'); fs.createReadStream(realPath).pipe(res); } }) } }).listen(3000); // If the file is very large, the content of the file needs to be read, which affects the performanceCopy the code

6. The compression

Accept-encoding: gzip, deflate, br Content-encoding: gzip const HTTP = require('http');
const fs = require('fs');
const zlib  = require('zlib');
http.createServer(function (req,res) {
  let encoding = req.headers['accept-encoding'];
  if(encoding){
    if (encoding.match(/\bgzip\b/)){
      res.setHeader('Content-Encoding'.'gzip');
      fs.createReadStream('./static/index.html').pipe(zlib.createGzip()).pipe(res);
    } else if (encoding.match(/\bdeflate\b/)){
      res.setHeader('Content-Encoding'.'deflate');
      fs.createReadStream('./static/index.html').pipe(zlib.createDeflate()).pipe(res);
    }else{
      fs.createReadStream('./static/index.html').pipe(res); }}else{
    fs.createReadStream('./static/index.html').pipe(res);
  }
}).listen(3000);
Copy the code

7. cookie

//
const http = require('http');
const server = http.createServer(function (req,res) {
  if(req.url === '/visit') {if(req.headers['cookie']){ 
      res.setHeader('Content-Type'.'text/html; charset=utf-8');
      let queryObj=require('querystring').parse(req.headers['cookie');
      queryObj.visit++;
      res.setHeader('Set-Cookie', `visit=${queryObj.visit}; httpOnly`);
      res.end('You are number one' + queryObj.visit+ 'This visit')}else{
      res.setHeader('Content-Type'.'text/html; charset=utf8');
      res.setHeader('Set-Cookie'.'visit=1; httpOnly');
      res.end('You are visiting for the first time')
    }
  }
}).listen(6000);

Copy the code

8. session

const http = require('http');
const uuid = require('uuid/v4');
const SESSION_ID = 'connet.sid'; // Card number :110 = {m:1000} cosnt session = {} // CSRF plus verification code referlet server = http.createServer(function (req, res) {
  if (req.url === '/go') {
    let cookies = require('querystring').parse(req.headers['cookie'].'; '.'=');
    if (cookies[SESSION_ID] && session[cookies[SESSION_ID]]) {
      session[cookies[SESSION_ID]].m -= 200;
      res.setHeader('Content-Type'.'text/html; charset=utf8');
      res.end('Your card has' + session[cookies[SESSION_ID]].m + '元');
    } else {
      let cardId = uuid();
      session[cardId] = { m: 1000 };
      res.setHeader('Set-Cookie', `${SESSION_ID}=${cardId}`);
      res.setHeader('Content-Type'.'text/html; charset=utf8');
      console.log(session)
      res.end('Your card has' + session[cardId].m + '元');
    }
  }
}).listen(8888);
Copy the code

9. The agent

// www.self1.cn proxy localhost:3001 // www.self2.cn proxy localhost:3002 const map = {'www.self1.cn': 'http://localhost:3001'.'www.self2.cn': 'http://localhost:3002',
}
const httpProxy = require('http-proxy');
const http = require('http');
const proxy = httpProxy.createProxyServer();

http.createServer(function (req, res) {
  let head = req.headers['host'];
  proxy.web(req, res, {
    target: map[head]
  });
}).listen(80);
Copy the code

10. Cross-domain cros

const http = require('http')

http.createServer(function (req, res) {
  res.header("Access-Control-Allow-Origin"."*"); // Allowed domain name (* all domains) res.header("Access-Control-Allow-Headers"."X-Requested-With"); / Server supported headers res.header("Access-Control-Allow-Methods"."PUT,POST,GET,DELETE,OPTIONS"); // allowed methods}).listen(9000,function () {
    console.log('server is runing at 9000')})Copy the code

Front-end application of HTTP and TCP

1. The client automatically sends a /favicon.icon to the server, so a /favicon.icon file will be placed in the resources directory
2. HTTP can have up to six simultaneous requests on the same server, so we need to separate resources on different servers
3. The requested resources should not be too large or too small, because the requested resources are sent in segments and have certain size requirements. Therefore, if the requested resources are too small, the bandwidth will be wasted, and if the requested resources are too large, the congestion will be caused, which leads to compression and resource combination (Sprite diagram).
4. Asynchronous loading needs to be controlled to avoid frequent annoying network requests
5. Front-end resource files have hash values to avoid the undesirable effects of forced caching, as well as for version control

conclusion

IT is Internet technology, engaged in work and the network has a great relationship, the front end is responsible for and background (server) interaction, IT must go through the network, so understand some network knowledge is very helpful. The following will be introduced:

• HTTPS

Reference for this article:

1. Computer network
2. The illustration of HTTP