---
# System prepended metadata

title: WEB TRAINING DIARY TASK 1

---

# WEB TRAINING DIARY TASK 1

> Tìm hiểu: The HTTP Protocol, HTTP Requests, HTTP Responses, HTTP Methods (List ra toàn bộ các method và chi tiết về chúng), URLs, HTTP Headers (List ra các Request và Response header thông dụng và chi tiết về chúng), Cookies, Status Codes, HTTPS, HTTP Proxies, HTTP Authentication

## I. HTTP Protocol là gì

* Đây sẽ là phần research đầu tiên về web của mình, task này chủ yếu là kiến thức nên có lẽ sẽ hơi dài mn thông cảm.

* Trước tiên **`HTTP ( Hyper Text Transfer Protocol)`** là một giao thức cần có khi ta sử dụng web hoặc truy cập bất cứ một website nào trên browser, HTTP được thiết kế để thực hiện việc trao đổi thông tin giữa các máy khách (clients) và máy chủ (servers) trên mạng máy tính.

    ![image](https://hackmd.io/_uploads/BkcqGrL70.png)

* Ở hình trên ta thấy được khi máy `Client` gửi một `Request` đến `Server` thì sau đó `Server` sẽ phản hồi lại bằng một `Reponse` những công việc này đều có mặt của giao thức. Nghĩ đơn giản thì giao thức cứ như là một thằng shipper khi đó nó sẽ nhận nội dung và các `Method` từ phía `Client` sau đó đi gửi cho `Server` và ngược lại. Trong đời sống hằng ngày ta cũng đã ít nhất một lần thực hiện giao thức, đó là soạn tin nhắn lên tổng đài, bắt buộc phải đúng cú pháp đúng không? Đó cũng là một dạng giao thức đấy!

## II. HTTP Request & Method
* Đây là các nội dung, thông tin từ phía `Client` gửi về `Server` bao gồm cả method để `Server` có thể tìm kiếm và trả về cho phía `Client` 

    ![image](https://hackmd.io/_uploads/Sk3zQILQR.png)

* Hình trên là structure của một `Request` bao gồm :
    *  **`Request Line`** : Bao gồm phương thức `HTTP (Ta sẽ nói ở mục sau)`, `URL`, và phiên bản `HTTP`.
    * **`Headers`**: Sẽ là nơi chứa thông tin của của `Request` gửi từ `Client` như `Host`, `User-Agent`,....
        * 
    * **`Body`** : là nơi chứa dữ liệu cần gửi lên máy chủ ở hình trên thì body được để trống tức là gửi `Request` mà không có nội dung vì do ta dùng Method `GET`.
 
* Ở trong một `HTTP Request` sẽ có nhiều các `Method` khác nhau nhằm để đưa yêu cầu lên cho `Server` thực hiện. Ta có các `Method` bao gồm:

    * **`GET`** : Dùng để gửi yêu cầu và nhận dữ liệu từ `Server` (Ví dụ khi ta load 1 trang web bằng cách nhập `URL` và ấn Enter trên Browser thì ta cũng đã thực hiện `Request GET` đến `Server`)
    * **`HEAD`** : Chức năng tương tự như `GET` nhưng khác ở chỗ `Method` này chỉ yêu cầu `Server` gửi về phần `HTTP Headers` để phục vụ mục đích kiểm trả.
    * **`POST`** : Gửi thông tin đến cho `Server` xử lý, có thể như là cập nhật thông tin khách hàng, dữ liệu cá nhân,...
    * **`PUT`** : Ghi đè tất cả thông tin của đối tượng với những gì được gửi lên
    * **`DELETE`** : gửi yều cầu để xóa các tài nguyên trên `Server`

* Các `Method` trên tương tự như các câu lệnh `CRUD` trong các ngôn ngữ lập trình như C/C++ mình đã từng học đều có các chứng năng nhận, thêm, xóa, sửa. Ngoài các `Method` này ra ta còn một số các `Method` khác nhưng ít thông dụng hơn như là:

    * **`OPTIONS`** : Gửi `Request` lên `Server` để nhận được những thông tin về khả năng của `Server` trên 1 resources. Ví dụ nếu như giới hạn `POST` file lên `Server` tối đa là 50Mb nhưng ta lại gửi đến 51Mb, thì lúc này `Method GET` sẽ k hợp lệ, ta phải tốn thời gian hơn thay vì thế ta sẽ lấy các options trước của `Server` và căn chỉnh việc `POST` file lên một cách hợp lý.
    * **`CONNECT`** : có tác dụng tạo kết nối đến máy chủ thông qua HTTP và tham số URL.
    * **`PATH`** : Đúng như cái tên là "vá" thì `Method` này cho phép sửa đổi 1 phần nhỏ nội dung trên resources ở trên `Server`. Lệnh này khác với `POST` là tạo mới thêm một nội dung lênh resouces còn `PUT` là sửa mới toàn bộ nội dung từ `CLient` gửi lên thay vì sửa đổi 1 phần nhỏ như `PATCH`
    * **`TRACE`** : Là cách để kiểm tra sự lặp lại theo đường dẫn của tài nguyên đích, dùng để chạy các thử nghiệm gỡ lỗi và thực hiện thao tác chẩn đoán trên API.


## III. HTTP Response

* Là phần được gửi về từ `Server` sau khi nhận được `Request` từ phía `Client`. Cấu trúc của `Response` cũng có 3 phần như `Request` 

    ![image](https://hackmd.io/_uploads/HyqXOx67R.png)

    * **`Status Line`** : Hiển thị dòng trang thái của phản hồi từ `Server` bao gồm trả về phiên bản HTTP, `Status Code` và trạng thái của `Response`
    * **`Headers`** : Chứa các thông tin mình sẽ nói đến ở phần sau
    * **`Body`** : Cũng là một đoạn nội dung văn bản được gửi về từ phía `Server`.
## IV. URL

* **`URL (Uniform Resource Locator)`**. Từ cái tên ta cũng có thể đoán rằng `URL` được sử dụng để xác định duy nhất một tài nguyên trên Web. 

   ![image](https://hackmd.io/_uploads/HkvKBf9mA.png)


* Một URL có 4 part chính đó là:
    * **`Protocol`** : Đây là phần chứa các giao thức của `URL` như trên hình sẽ là giao thức `https`, ngoài ra còn có các giao thức khác như `http`, `ftp`, `ws`,...
    * **`Subdomain * Domain`** : Đây là phần tên miền nơi địa chỉ máy chủ lưu tài nguyên
    * **`Port`** : Cổng của link `URL`
    * **`Path`** : Đường dẫn đến tài nguyên cụ thể trên máy chủ
    * **`Query Parameters (Tham số truy vấn)`** : Các tham số bổ sung được truyền đến máy chủ, ví dụ: ``?id=123&name=abc`.
    * **`Fragment`** : Dùng để truy cập trực tiếp đến nội dung muốn đến trong đoạn `URL` là phần đoạn mã cụ thể

## V. HTTP Headers

* Là các thành phần quan trọng của giao thức HTTP. Chúng chứa các thông tin bổ sung được gửi và nhận trong các `Request` và `Response` giữa `Client` và `Server`. Các tiêu đề này giúp cung cấp siêu dữ liệu về yêu cầu hoặc phản hồi, bao gồm thông tin về trình duyệt, máy chủ, loại nội dung, phương thức mã hóa, và nhiều hơn nữa.


    ![image](https://hackmd.io/_uploads/r1PbtI9XA.png)

* Có 4 loại Headers:

    * **`General Headers`**: Được áp dụng cho cả `Requests` và `Responses`, cũng như các thông điệp chuyển tiếp trong quá trình giao tiếp giữa `Client` và `Server`. Chúng không chứa thông tin về dữ liệu thực tế của thông điệp, mà chủ yếu cung cấp các siêu dữ liệu chung về giao dịch HTTP. Trong General Headers có các nhánh headers khác như: 


        * **`Cache-Control`**: Chỉ định các chỉ thị để kiểm soát cách thức các yêu cầu và phản hồi HTTP được lưu trữ tạm thời (cache).
        * **`Connection`**: Kiểm soát các khía cạnh của kết nối mạng hiện tại.
        * **`Date`**: Chỉ định ngày và giờ khi thông điệp HTTP được gửi.
    * **`Request Headers`**: Là phần Headers được gửi từ `Client` đến `Server` gồm có các thành phần sau :
        * **`Accept`** : Để cho `Server` biết được loại dữ liệu mà `Client` muốn nhận khi nhận được phản hồi từ `Server` 
        * **`Accept-Charset`** :
        * **`User-Agent`** : Cho biết được loại công cụ mà `Client` dùng để gửi yêu cầu lên `Server`, có thể là một browser, mobile apps, hay một tools nào đó.
        * **`Accept-Encoding`** : Cho ta thông tin kiểu mã hóa mà `Client` muốn nhận
        * **`Content-Type`**: Kiểu định dạng được sử dụng trong body của `HTTP Request`
        * **`Content-Length`** : Độ dài của body được tính bằng byte 
    * **`Respones Headers`** :
        * **`Content-Type`**: Chỉ định định dạng của nội dung trong phần body, ví dụ "text/html", "application/json", "image/png", v.v.
        * **`Content-Length`**: Chỉ định kích thước của nội dung (tính bằng byte).
        * **`Date`**: Thời gian tạo ra response.
        * **`Last-Modified`**: Thời gian cuối cùng mà tài nguyên được chỉnh sửa.
        * **`Expires`**: Ngày và giờ mà response sẽ hết hạn, giúp trình duyệt biết khi nào cần tải lại.
        * **`Cache-Control`**: Chỉ định cách thức và thời gian lưu trữ response trong bộ nhớ cache.
        * **`Set-Cookie`**: Gửi cookie từ server về client.
        * **`Location`**: Chỉ định URL mà client cần chuyển hướng tới (thường dùng với mã trạng thái 3xx).
        * **`Server`**: Chỉ định phần mềm server đang chạy.
        * **`Access-Control-Allow-Origin`**: Xác định các nguồn được phép truy cập tài nguyên.
    * **`Entity Headers`** :



## VI. Cookies
![image](https://hackmd.io/_uploads/Hkti4l6XA.png)

* `Cookies` là những mẩu dữ liệu nhỏ được lưu trữ trên thiết bị của người dùng (thường là trong trình duyệt web) từ các trang web họ truy cập. Các tệp dữ liệu này được sử dụng để lưu trữ thông tin liên quan đến các tương tác và sở thích của người dùng trên trang web. Nhờ có `cookie` mà mỗi lần ta out web hoặc browser thì khi trở lại web thì browser sẽ ghi nhớ và lưu lại thông tin của ta ở lần đăng nhập trước.

* Có một số loại `cookie` cơ bản và thường gặp như sau: 
    * **`Session Cookies`** : Là loại cookie lưu trữ tạm như một `session`, chỉ được lưu trữ trên thiết bị của người dùng trong phiên duyệt web của họ. Sau khi đóng trình duyệt, `cookies` này sẽ tự động bị xóa.
    * **`Permanent Cookies`** : Khác với `Session Cookies` thì `cookies` này được lữu trữ lâu hơn và không bị tự động xóa sau khi người dùng đóng browser mà phải được xóa thủ công. Loại `cookies` này thường được dùng để lưu thông tin đăng nhập của người dùng trên web
    * **`First-Party Cookies`** :  cookies của bên thứ nhất được đặt theo miền trang web mà người dùng hiện đang truy cập. Được sử dụng để lưu trữ dữ liệu liên quan đến các chức năng riêng của trang web và thường được coi là ít xâm phạm hơn về mặt quyền riêng tư.
    * **`Third-Party Cookies`** : được đặt bởi các miền khác với miền mà người dùng đang truy cập. Các `cookies` này thường được các bên quảng cáo sử dụng để theo dõi hành vi của người dùng trên các trang web khác nhau, cho phép các bên quảng cáo được nhắm mục tiêu và lập hồ sơ người dùng.
    * **`Flash Cookies`** : Giống với các `cookies` thông thường nhưng có thể lưu trữ được lượng dữ liệu lớn hơn
    * **`Zombie Cookies`** : Là loại `cookies` có thể được tạo lại sau khi đã bị người dùng xóa đi

* `Cookies` hoạt động bằng cách thiết lập một kênh liên lạc quan trọng giữa trình duyệt web của người dùng và máy chủ. Quá trình này bắt đầu khi người dùng truy cập một trang web, yêu cầu máy chủ gửi hướng dẫn đến trình duyệt một tệp văn bản nhỏ chứa dữ liệu theo cặp khóa-giá trị.

## VII. Status Code

* Đây là một thành phần rất quan trọng trong `HTTP Response`. Các `Status Code` được sử dụng để thông báo về kết quả của quá trình xử lý `Request` từ phía `Server`.

    ![image](https://hackmd.io/_uploads/S1a-Fg67C.png)

* Có 5 nhóm `Status Code` bao gồm theo thứ tự từ 1xx-5xx ta có:
    * **`1XX Informational`** : Đây là nhóm được trả về và đưa cho `Client` các thông tin như yêu cầu được chấp nhận, hoặc là tiếp tục một quá trình nào đó. Đây đơn giản là thông báo của `Server` đến với `Client` về một thông tin nào đó.
    * **`2XX Success`** : Đây là nhóm mã thông báo cho `Client` biết về `Request` được gửi hoặc một quá trình nào đó đã thành công.
    * **`3XX Redirection`** : Nhóm mã này dùng để thông báo chuyển hướng nghĩa là `CLient` phải thực hiện thêm một hành động bổ sung nào đó để thỏa mãn yêu cầu của `Server`.
    * **`4XX Client Error`** : Đây có lẽ là nhóm mã ai cũng đã từng gặp qua khi truy cập một trang web như lỗi `404(page not found)` hay `403(forbidden)` đây là các lỗi đến từ phía `CLient`
    *  **`5XX Server Error`** : Đây là nhóm mã thông báo có lỗi từ `Server`, tức là `Server` không thể hoàn thành yêu cầu và trả `Response` về cho `Client` được do một số lỗi.


## VIII. HTTP Proxy 

* Trước tiên ta cần hiểu `Proxy` là gì?

* `Proxy` ta có thể hiểu nó là một máy chủ trung gian giữa `Client` và `Server`. Mọi `Request` từ phía người dùng sẽ được chuyển qua `Proxy` để xử lý trước khi đến `Server` và ngược lại mọi phản hồi từ `Server` cũng sẽ được chuyển đến `Proxy` trước khi đến `Client` 

* Một số ứng dụng chính của http proxy bao gồm:

    * **`Bảo mật`**: Proxy có thể che giấu địa chỉ IP thật của `Client`, giúp tăng tính riêng tư và bảo mật.
    * **`Kiểm soát truy cập`**: `Proxy` có thể được dùng để kiểm soát và hạn chế các trang web mà người dùng có thể truy cập.
    * **`Tăng tốc độ`**: Proxy có thể lưu trữ bộ nhớ cache các trang web, từ đó giảm thời gian truy cập và tăng tốc độ.
    * **`Logging và giám sát`**: Proxy có thể ghi lại và giám sát các hoạt động truy cập mạng của người dùng.

## IX. HTTP Authentication 

* `HTTP authentication` là một cơ chế cho phép `Server` yêu cầu `Client` cung cấp thông tin xác thực (chẳng hạn như tên người dùng và mật khẩu) trước khi cho phép truy cập vào tài nguyên được bảo vệ.

* Có 2 loại `HTTP Authentication` chính:

    * **`Basic Authentication`**: Đây là hình thức xác thực `HTTP` đơn giản và phổ biến nhất.
        * Khi `Client` gửi yêu cầu đến `Server`, `Server` sẽ trả về một mã trạng thái `401 Unauthorized` cùng với một header `WWW-Authenticate` yêu cầu `Client` cung cấp thông tin xác thực. `Client` sẽ gửi lại yêu cầu kèm theo header `Authorization` chứa thông tin xác thực dưới dạng mã hóa base64.
        * Ưu điểm: Đơn giản, dễ triển khai. Nhược điểm: Thông tin xác thực được truyền dưới dạng plain text, không an toàn.
    * **`Digest Authentication`**: Đây là hình thức xác thực `HTTP` an toàn hơn `Basic Authentication`. Thay vì truyền thông tin xác thực dưới dạng plain text, D`igest Authentication` sử dụng hashing và thông tin ngẫu nhiên (nonce) để mã hóa thông tin xác thực.
        * Quá trình xác thực diễn ra qua nhiều bước, phức tạp hơn `Basic Authentication` nhưng an toàn hơn.
        * Ưu điểm: An toàn hơn `Basic Authentication`. Nhược điểm: Phức tạp hơn, khó triển khai.
* Ngoài ra, một số hình thức xác thực `HTTP` khác như `NTLM`, `OAuth` cũng được sử dụng trong một số trường hợp cụ thể.


## X. HTTPS

* Do nhu cầu bảo mật thông tin ngày càng cao nên giao thức `HTTP` ban đầu đã lỗi thời nên việc chúng ta cần môtj giao thức mới dựa trên giao thức cũ nhưng theo đó nâng cấp độ ổn định và bảo mật hơn, khắc phục những điểm yếu của cái cũ. Vì thế `HTTPS` ra đời.

    ![image](https://hackmd.io/_uploads/Sy_XvhBVR.png)


* `HTTPS` có thể được coi như là một bản update lớn dành cho `HTTP` để nâng cấp độ an toàn và bảo mật thông tin cho việc tương tác giữa `CLient` và `Server` vậy chúng khác nhau những gì?

    * **`Bảo mật`**: HTTPS sử dụng mã hóa để bảo vệ dữ liệu được truyền giữa trình duyệt và máy chủ web, trong khi HTTP không có cơ chế bảo mật này. HTTPS sử dụng SSL/TLS để mã hóa dữ liệu, đảm bảo an toàn thông tin như mật khẩu, thông tin thanh toán, v.v.
    * **`Cổng kết nối`**: HTTP sử dụng cổng 80, trong khi HTTPS sử dụng cổng 443.
    * **`Biểu tượng`**: Trong trình duyệt, các trang web sử dụng HTTPS sẽ hiển thị biểu tượng ổ khóa, đánh dấu trang web là an toàn.
    * **`Tốc độ`**: Do quá trình mã hóa/giải mã, HTTPS có thể chậm hơn một chút so với HTTP. Tuy nhiên, sự khác biệt này ngày càng giảm nhờ các cải tiến về công nghệ.