Ý nghĩa của các HTTP header trong một request thực tế

7 giờ 0 1 13 phút đọc

Mỗi lần bạn mở một trang web, trình duyệt và server trao đổi hàng chục dòng thông tin ẩn sau màn hình. Những dòng đó gọi là HTTP header. Bài viết này phân tích chi tiết từng header trong một request lấy file JavaScript thực tế, giúp bạn hiểu rõ cuộc đối thoại giữa Chrome và Cloudflare đang diễn ra như thế nào.

Ý nghĩa của các HTTP header trong một request thực tế

Mục lục

Header là gì và tại sao cần quan tâm
Dòng trạng thái: cuộc trò chuyện bắt đầu từ đây
Pseudo-header HTTP/2: ngôn ngữ mới của giao thức
Request header: lá thư từ trình duyệt gửi đi
Thông tin về khả năng chấp nhận dữ liệu
Thông tin về cache và tối ưu
Thông tin về nguồn gốc và ngữ cảnh
Thông tin về trình duyệt và thiết bị
Cookie và phiên đăng nhập
Response header: bức thư trả lời từ server
Thông tin cơ bản về tài nguyên
Chiến lược cache và thời gian sống
Header đặc thù của Cloudflare
Header bảo mật và tuân thủ
Header báo cáo và giám sát lỗi
Những cặp header hay đi cùng nhau
Bài học rút ra cho developer
Kết luận

Header là gì và tại sao cần quan tâm

Khi bạn truy cập một trang web, trình duyệt gửi đi một HTTP request để xin dữ liệu. Server nhận được, xử lý, rồi gửi lại HTTP response kèm theo nội dung.

Cả hai bên đều đính kèm những dòng metadata gọi là header để mô tả: “Tôi là ai”, “Tôi muốn gì”, “Dữ liệu này định dạng gì”, “Có nên lưu cache không”, “Có an toàn không”…

Hiểu header giúp bạn gỡ lỗi nhanh hơn, tối ưu hiệu suất, bảo mật tốt hơn, và đôi khi phát hiện ra vấn đề mà mắt thường không nhìn thấy được.

Dòng trạng thái: cuộc trò chuyện bắt đầu từ đây

Trước khi đến các header, request và response đều có một dòng trạng thái mở đầu. Đây là bản tóm tắt nhanh toàn bộ cuộc giao tiếp.

Thông tin	Giá trị	Ý nghĩa
`Request URL`	`https://inithtml.com/games/.../game.min.js?v=5.0.1`	Địa chỉ chính xác của tài nguyên được yêu cầu. Tham số `v=5.0.1` giúp cache busting khi có phiên bản mới.
`Request Method`	`GET`	Trình duyệt chỉ muốn lấy dữ liệu, không gửi hay xóa gì cả.
`Status Code`	`200 OK`	Server tìm thấy file, mọi thứ suôn sẻ, đây là phản hồi thành công.
`Remote Address`	`104.21.7.98:443`	IP và cổng của server. `:443` là cổng HTTPS mặc định.
`Referrer Policy`	`strict-origin-when-cross-origin`	Quy tắc gửi thông tin referer: cùng origin thì gửi đầy đủ, khác origin chỉ gửi tên miền, không gửi khi chuyển từ HTTPS sang HTTP.

Pseudo-header HTTP/2: ngôn ngữ mới của giao thức

Bạn thấy các header bắt đầu bằng dấu hai chấm :? Đó là pseudo-header của HTTP/2. Chúng không phải header thật sự mà là cách HTTP/2 mã hóa thông tin cơ bản của request để tối ưu hiệu suất.

Header	Giá trị	Ý nghĩa
`:authority`	`inithtml.com`	Tên miền đích, thay thế cho header `Host` trong HTTP/1.1.
`:method`	`GET`	Phương thức HTTP, lặp lại từ dòng trạng thái.
`:path`	`/games/.../game.min.js?v=5.0.1`	Đường dẫn và query string, giúp server biết tài nguyên cụ thể nào được yêu cầu.
`:scheme`	`https`	Giao thức sử dụng, xác nhận kết nối được mã hóa.

Lưu ý: HTTP/2 nén header bằng HPACK, nên các pseudo-header này giúp giảm kích thước gói tin đáng kể so với việc gửi lặp đi lặp lại Host, GET /path HTTP/1.1 như thời HTTP/1.1.

Request header: lá thư từ trình duyệt gửi đi

Đây là những gì Chrome kể với server trước khi nhận file. Mỗi dòng là một thông tin hữu ích để server quyết định trả về gì.

Thông tin về khả năng chấp nhận dữ liệu

Header	Giá trị	Ý nghĩa
`accept`	`/`	Trình duyệt chấp nhận mọi loại MIME type. Với file JS, server thường vẫn trả `application/javascript` để chính xác.
`accept-encoding`	`gzip, deflate, br, zstd`	Danh sách thuật toán nén mà trình duyệt hiểu được. `br` là Brotli của Google, `zstd` là Zstandard của Facebook, cả hai đều hiệu quả hơn gzip.
`accept-language`	`vi,en-US;q=0.9,en;q=0.8`	Ngôn ngữ ưu tiên: tiếng Việt đứng đầu, tiếng Anh Mỹ xếp sau với hệ số ưu tiên 0.9, tiếng Anh chung là 0.8.

Thông tin về cache và tối ưu

Header	Giá trị	Ý nghĩa
`cache-control`	`no-cache`	Trình duyệt yêu cầu luôn kiểm tra lại với server trước khi dùng bản cache, dù đã có bản sao local.
`pragma`	`no-cache`	Phiên bản cũ của `cache-control`, giữ lại để tương thích với HTTP/1.0.
`priority`	`u=2`	Gợi ý mức độ ưu tiên tài nguyên. `u=2` thường là mức trung bình, giúp browser quản lý băng thông thông minh hơn.

Thông tin về nguồn gốc và ngữ cảnh

Header	Giá trị	Ý nghĩa
`referer`	`https://inithtml.com/tank-300iq/`	Trang web đang mở khiến request này phát sinh. Server dùng để thống kê, chống hotlink, hoặc gỡ lỗi.
`sec-fetch-dest`	`script`	Tài nguyên được yêu cầu sẽ được dùng làm script. Giúp server và browser áp dụng đúng chính sách bảo mật.
`sec-fetch-mode`	`no-cors`	Request này không yêu cầu CORS. Thường dùng cho tài nguyên cùng origin hoặc cross-origin đơn giản như script, image.
`sec-fetch-site`	`same-origin`	Request đến từ cùng origin với trang hiện tại. Đây là lý do không cần CORS.

Thông tin về trình duyệt và thiết bị

Header	Giá trị	Ý nghĩa
`sec-ch-ua`	`"Google Chrome";v="149", "Chromium";v="149", "Not)A;Brand";v="24"`	Thông tin chính xác về engine trình duyệt. `Not)A;Brand` là chiến thuật của Google để tránh bị nhận diện quá chi tiết qua User-Agent.
`sec-ch-ua-mobile`	`?0`	`?0` nghĩa là không phải thiết bị di động. `?1` sẽ là di động.
`sec-ch-ua-platform`	`"Windows"`	Hệ điều hành đang chạy trình duyệt.
`user-agent`	`Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...`	Chuỗi nhận diện đầy đủ: Windows 10 64-bit, Chrome 149, engine WebKit/Blink. Vẫn cần thiết vì nhiều server cũ chưa hỗ trợ Client Hints.

Cookie và phiên đăng nhập

Header	Giá trị	Ý nghĩa
`cookie`	`cf_clearance=...; wordpress_logged_in_...=...`	Chuỗi cookie gửi kèm. Gồm `cf_clearance` (xác minh qua Cloudflare challenge), các cookie Google Analytics (`_ga`), và cookie đăng nhập WordPress. Server dùng để nhận diện người dùng, duy trì phiên làm việc.

Response header: bức thư trả lời từ server

Sau khi xử lý request, server (qua Cloudflare) gửi lại một loạt header để trình duyệt biết cách xử lý dữ liệu nhận được.

Thông tin cơ bản về tài nguyên

Header	Giá trị	Ý nghĩa
`content-type`	`application/javascript`	Xác nhận đây là file JavaScript. Trình duyệt sẽ parse và thực thi, không hiển thị như text.
`content-encoding`	`gzip`	File đã được nén bằng gzip trước khi gửi. Trình duyệt tự động giải nén trước khi dùng.
`date`	`Fri, 12 Jun 2026 19:05:22 GMT`	Thời điểm server tạo ra response, theo giờ UTC.
`last-modified`	`Fri, 12 Jun 2026 19:03:00 GMT`	Lần cuối file bị sửa đổi trên server. Dùng để so sánh với `If-Modified-Since` trong request sau.
`etag`	`W/"6a2c57e4-1926c"`	Entity Tag là “dấu vân tay” của file. `W/` nghĩa là weak validator, cho phép so sánh nhanh hai phiên bản file mà không cần tải toàn bộ nội dung.

Chiến lược cache và thời gian sống

Header	Giá trị	Ý nghĩa
`cache-control`	`public, max-age=31536000`	File được phép lưu ở mọi nơi (browser, CDN, proxy) trong 1 năm (31.536.000 giây). Đây là lý do file JS tĩnh thường có version query string để ép reload khi cập nhật.
`expires`	`Sat, 12 Jun 2027 19:03:46 GMT`	Ngày hết hạn cụ thể của cache. Backup cho `cache-control` nếu trình duyệt cũ không hỗ trợ.
`age`	`96`	Tài nguyên này đã nằm trong cache của CDN 96 giây kể từ lần fetch gốc cuối.
`vary`	`Accept-Encoding`	Cache phải lưu riêng biệt cho từng kiểu nén (gzip, br, zstd). Không được dùng bản gzip cho request chỉ hỗ trợ deflate.

Header đặc thù của Cloudflare

Header	Giá trị	Ý nghĩa
`server`	`cloudflare`	Server phản hồi là Cloudflare, một CDN và WAF phổ biến.
`cf-ray`	`a0ab206e2cb2a67c-HKG`	ID duy nhất của request. `HKG` cho biết request được xử lý tại Hong Kong. Rất hữu ích khi gỡ lỗi với bộ phận hỗ trợ Cloudflare.
`cf-cache-status`	`HIT`	File được phục vụ từ cache của Cloudflare, không cần hỏi lại server gốc. Các giá trị khác: `MISS`, `EXPIRED`, `DYNAMIC`.
`alt-svc`	`h3=":443"; ma=86400`	Gợi ý trình duyệt: server cũng hỗ trợ HTTP/3 (QUIC) trên cổng 443, thời hạn 24 giờ. Lần sau có thể thử kết nối bằng HTTP/3.

Header bảo mật và tuân thủ

Header	Giá trị	Ý nghĩa
`strict-transport-security`	`max-age=31536000`	HSTS: bắt buộc trình duyệt chỉ dùng HTTPS trong 1 năm, không được fallback về HTTP. Chống tấn công SSL stripping.
`speculation-rules`	`"/cdn-cgi/speculation"`	Cloudflare cung cấp quy tắc speculation cho Chrome, giúp trình duyệt dự đoán và preload tài nguyên sắp cần, tăng tốc độ tải trang.
`x-powered-by`	`W3 Total Cache/2.9.4`	Tiết lộ server gốc dùng plugin W3 Total Cache cho WordPress. Đôi khi bị coi là rò rỉ thông tin, nên gỡ bỏ trong môi trường production.

Header báo cáo và giám sát lỗi

Header	Giá trị	Ý nghĩa
`nel`	`{"report_to":"cf-nel",...}`	Network Error Logging: cấu hình cho trình duyệt tự động báo cáo lỗi mạng (timeout, DNS fail, SSL error…) về endpoint chỉ định.
`report-to`	`{"group":"cf-nel",...}`	Định nghĩa nhóm endpoint nhận báo cáo. Ở đây là `https://a.nel.cloudflare.com/report/v4` để Cloudflare thu thập dữ liệu lỗi mạng.
`server-timing`	`cfExtPri`	Gợi ý về thời gian xử lý phía server. `cfExtPri` liên quan đến ưu tiên mở rộng của Cloudflare.

Những cặp header hay đi cùng nhau

Một số header không đơn độc mà tạo thành cặp bài trùng, bổ sung ý nghĩa cho nhau.

etag + if-none-match: Lần sau trình duyệt gửi if-none-match với giá trị etag cũ. Nếu file chưa đổi, server trả 304 Not Modified, tiết kiệm băng thông tối đa.
last-modified + if-modified-since: Cơ chế tương tự etag nhưng dựa trên thời gian. Kém chính xác hơn etag nếu file được sửa lại nội dung giống hệt.
cache-control + expires: cache-control là chuẩn mới, expires là chuẩn cũ. Nếu cả hai có mặt, cache-control được ưu tiên.
nel + report-to: report-to khai báo địa chỉ, nel kích hoạt tính năng ghi nhận lỗi mạng. Không có report-to, nel không biết gửi báo cáo đi đâu.
sec-fetch-* ba anh em: dest nói loại tài nguyên, mode nói chế độ CORS, site nói mối quan hệ origin. Cả ba giúp browser và server áp dụng đúng chính sách bảo mật.

Bài học rút ra cho developer

Qua phân tích request thực tế này, có một số điều đáng ghi nhớ khi bạn tự triển khai hoặc tối ưu website:

Cache tĩnh đúng cách: File JS/CSS nên có max-age dài (1 năm) và đổi tên hoặc query string khi cập nhật. Đừng sợ cache, hãy sợ cache sai.
Nén đúng thuật toán: Hỗ trợ Brotli (br) nếu có thể, nó nhỏ hơn gzip 15-25% cho file text. Nhưng giữ gzip làm fallback an toàn.
Gỡ bỏ x-powered-by: Header này không mang lại giá trị cho người dùng mà chỉ tiết lộ stack công nghệ. Ẩn nó đi trong production.
Bật HSTS: strict-transport-security là lớp phòng thủ quan trọng. Nhưng hãy chắc chắn HTTPS đã chạy ổn định trước khi bật, vì khó rollback.
Hiểu cf-cache-status: Nếu bạn dùng Cloudflare, HIT nghĩa là nhanh, MISS nghĩa là chậm. Quan sát header này để đánh giá hiệu quả cache rule.
Client Hints đang thay thế User-Agent: sec-ch-ua và bạn bè là tương lai. Đừng viết logic dựa hoàn toàn vào chuỗi user-agent dài dòng và dễ giả mạo.

Kết luận

HTTP header không chỉ là những dòng chữ kỹ thuật khô khan. Chúng là ngôn ngữ giao tiếp giữa trình duyệt và server, quyết định tốc độ tải trang, bảo mật dữ liệu, chiến lược cache, và cả khả năng gỡ lỗi khi có sự cố.

Hiểu từng header trong một request thực tế như ví dụ trên giúp bạn không còn bị choáng ngợp khi mở DevTools. Thay vào đó, bạn sẽ đọc được câu chuyện đằng sau mỗi dòng: Chrome đang xin file gì, Cloudflare đang cache ở đâu, file đã bị nén chưa, và liệu lần sau truy cập có cần tải lại hay không.

Nắm vững header, bạn nắm vững một phần quan trọng của nghệ thuật làm web.