HTTPプロトコル

HTTPプロトコルとWebがどのように機能するかの詳細な説明

HTTP(ハイパーテキスト転送プロトコル)は、インターネットを強化する一連のプロトコルであるTCP / IPのアプリケーションプロトコルの1つです。

それを修正させてください:そうではありません1プロトコルの中で、それはどうしても最も成功し、人気のあるものです。

HTTPは、ワールドワイドウェブを機能させるものであり、ブラウザにWebページをホストするリモートサーバーと通信するための言語を提供します。

HTTPは、1989年以来、欧州原子核研究機構であるCERNでTim Berners-Leeが行った作業の結果として、1991年に最初に標準化されました。

目標は、研究者が論文を簡単に交換して相互リンクできるようにすることでした。これは、科学界がより良く機能するための方法として意図されていました。

当時のインターネットの主なアプリケーションは、基本的にFTP(ファイル転送プロトコル)、電子メール、Usenet(ニュースグループ、今日ではほとんど廃止されたもの)で構成されていました。

1993年に最初のグラフィカルWebブラウザであるMosaicがリリースされ、そこから物事が急上昇しました。

Webはインターネットのキラーアプリになりました。

時間の経過とともに、Webとその周辺のエコシステムは劇的に進化しましたが、基本はまだ残っています。進化の一例:HTTPは、Webページに加えてREST APIを利用できるようになりました。これは、インターネットを介してプログラムでサービスにアクセスするための一般的な方法の1つです。

HTTPは1997年にHTTP / 1.1でマイナーリビジョンを取得し、2015年にその後継であるHTTP/2は標準化され、現在、世界中で使用されている主要なWebサーバーによって実装されています。

HTTPプロトコルは、暗号化された接続を介して提供されない他のプロトコル(SMTP、FTP ..)と同様に、安全でないと見なされます。これが、TLSを介して提供されるHTTPであるHTTPSの使用に向けて最近大きな推進力がある理由です。

そうは言っても、HTTP / 2とHTTPSの構成要素はHTTPにルーツがあります。この記事では、HTTPがどのように機能するかを紹介します。

HTMLドキュメント

HTTPは方法ですウェブブラウザChrome、Firefox、Edge、その他多くの(別名クライアントこれから)と通信するWebサーバー

ハイパーテキスト転送プロトコルという名前は、FTPのようにファイルだけでなく「ファイル転送プロトコル」を転送する必要があることに由来しています。ハイパーテキストはHTMLを使用して記述され、ブラウザによってグラフィカルに表示され、優れたプレゼンテーションとインタラクティブな機能を備えています。リンク。

リンクは、新しいWebページの作成の容易さとともに、採用を推進した原動力でした。

HTTPは、これらのハイパーテキストファイル(および画像やその他のファイルタイプも表示されます)をネットワーク経由で転送するものです。

Webブラウザー内では、ドキュメントはリンクを使用して別のドキュメントを指すことができます。

リンクは、ドメイン名またはIPのいずれかを介して、プロトコルとサーバーアドレスを決定する最初の部分で構成されます。

もちろん、この部分はHTTPに固有のものではありません。

次に、ドキュメントの部分があります。アドレス部分に追加されたものはすべて、ドキュメントパスを表します。

たとえば、このドキュメントのアドレスはhttps://flaviocopes.com/http/

  • httpsプロトコルです。
  • flaviocopes.com私のサーバーを指すドメイン名です
  • /http/サーバーのルートパスを基準にしたドキュメントのURLです。

パスはネストできます。https://flaviocopes.com/page/privacy/この場合、ドキュメントのURLは/page/privacy

Webサーバーは、要求を解釈し、分析されると、正しい応答を提供する責任があります。

リクエスト

リクエストには何が含まれていますか?

まずはURL、これはすでに見たことがあります。

アドレスを入力してブラウザでEnterキーを押すと、内部でサーバーが正しいIPアドレスに次のようなリクエストを送信します。

GET /a-page

where /a-page is the URL you requested.

The second thing is the HTTP method (also called verb).

HTTP in the early days defined 3 of them:

  • GET
  • POST
  • HEAD

and HTTP/1.1 introduced

  • PUT
  • DELETE
  • OPTIONS
  • TRACE

We’ll see them in detail in a minute.

The third thing that composes a request is a set of HTTP headers.

Headers are a set of key: value pairs that are used to communicate to the server-specific information that is predefined, so the server can know what we mean.

I described them in detail in the HTTP request headers list.

Give that list a quick look. All of those headers are optional, except Host.

HTTP methods

GET

GET is the most used method here. It’s the one that’s used when you type an URL in the browser address bar, or when you click a link.

It asks the server to send the requested resource as a response.

HEAD is just like GET, but tells the server to not send the response body back. Just the headers.

POST

The client uses the POST method to send data to the server. It’s typically used in forms, for example, but also when interacting with a REST API.

PUT

The PUT method is intended to create a resource at that specific URL, with the parameters passed in the request body. Mainly used in REST APIs

DELETE

The DELETE method is called against an URL to request deletion of that resource. Mainly used in REST APIs

OPTIONS

When a server receives an OPTIONS request it should send back the list of HTTP methods allowed for that specific URL.

TRACE

Returns back to the client the request that has been received. Used for debugging or diagnostic purposes.

HTTP Client/Server communication

HTTP, as most of the protocols that belong to the TCP/IP suite, is a stateless protocol.

Servers have no idea what’s the current state of the client. All they care about is that they get request and they need to fulfill them.

Any prior request is meaningless in this context, and this makes it possible for a web server to be very fast, as there’s less to process, and also it gives it bandwidth to handle a lot of concurrent requests.

HTTP is also very lean, and communication is very fast in terms of overhead. This contrasts with the protocols that were the most used at the time HTTP was introduced: TCP and POP/SMTP, the mail protocols, which involve lots of handshaking and confirmations on the receiving ends.

Graphical browsers abstract all this communication, but we’ll illustrate it here for learning purposes.

A message is composed by a first line, which starts with the HTTP method, then contains the resource relative path, and the protocol version:

GET /a-page HTTP/1.1

After that, we need to add the HTTP request headers. As mentioned above, there are many headers, but the only mandatory one is Host:

GET /a-page HTTP/1.1
Host: flaviocopes.com

How can you test this? Using telnet. This is a command-line tool that lets us connect to any server and send it commands.

Open your terminal, and type telnet flaviocopes.com 80

This will open a terminal, that tells you

Trying 178.128.202.129...
Connected to flaviocopes.com.
Escape character is '^]'.

You are connected to the Netlify web server that powers my blog. You can now type:

GET /axios/ HTTP/1.1
Host: flaviocopes.com

and press enter on an empty line to fire the request.

The response will be:

HTTP/1.1 301 Moved Permanently
Cache-Control: public, max-age=0, must-revalidate
Content-Length: 46
Content-Type: text/plain
Date: Sun, 29 Jul 2018 14:07:07 GMT
Location: https://flaviocopes.com/axios/
Age: 0
Connection: keep-alive
Server: Netlify

Redirecting to https://flaviocopes.com/axios/

See, this is an HTTP response we got back from the server. It’s a 301 Moved Permanently request. See the HTTP status codes list to know more about the status codes.

It basically tells us the resource has permanently moved to another location.

Why? Because we connected to port 80, which is the default for HTTP, but on my server I set up an automatic redirection to HTTPS.

The new location is specified in the Location HTTP response header.

There are other headers, all described in the HTTP response headers list.

In both the request and the response, an empty line separates the request header from the request body. The response body in this case contains the string

Redirecting to https://flaviocopes.com/axios/

which is 46 bytes long, as specified in the Content-Length header. It is shown in the browser when you open the page, while it automatically redirects you to the correct location.

In this case we’re using telnet, the low-level tool that we can use to connect to any server, so we can’t have any kind of automatic redirect.

Let’s do this process again, now connecting to port 443, which is the default port of the HTTPS protocol. We can’t use telnet because of the SSL handshake that must happen.

Let’s keep things simple and use curl, another command-line tool. We cannot directly type the HTTP request, but we’ll see the response:

curl -i https://flaviocopes.com/axios/

this is what we’ll get in return:

HTTP/1.1 200 OK
Cache-Control: public, max-age=0, must-revalidate
Content-Type: text/html; charset=UTF-8
Date: Sun, 29 Jul 2018 14:20:45 GMT
Etag: "de3153d6eacef2299964de09db154b32-ssl"
Strict-Transport-Security: max-age=31536000
Age: 152
Content-Length: 9797
Connection: keep-alive
Server: Netlify

<!DOCTYPE html> <html prefix=“og: http://ogp.me/ns#” lang=“en”> <head> <meta charset=“utf-8”> <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> <title>HTTP requests using Axios</title> …

I cut the response, but you can see that the HTML of the page is being returned now.

Other resources

An HTTP server will not just transfer HTML files, but typically it will also serve other files: CSS, JS, SVG, PNG, JPG, lots of different file types.

This depends on the configuration.

HTTP is perfectly capable of transferring those files as well, and the client will know about the file type, thus interpret them in the right way.

This is how the web works: when an HTML page is retrieved by the browser, it’s interpreted and any other resource it needs to display property (CSS, JavaScript, images..) is retrieved through additional HTTP requests to the same server.


More network tutorials: