Sec-Fetch-Mode header
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
Tiêu đề HTTP Sec-Fetch-Mode fetch metadata request header cho biết chế độ của yêu cầu.
Nói một cách đơn giản, điều này cho phép máy chủ phân biệt giữa các yêu cầu xuất phát từ người dùng điều hướng giữa các trang HTML và các yêu cầu để tải hình ảnh và các tài nguyên khác.
Ví dụ: tiêu đề này sẽ chứa navigate cho các yêu cầu điều hướng cấp cao, trong khi no-cors được sử dụng để tải hình ảnh.
| Loại tiêu đề | Fetch Metadata Request Header |
|---|---|
| Forbidden request header | Có (tiền tố Sec-) |
| CORS-safelisted request header | Không |
Cú pháp
Sec-Fetch-Mode: cors
Sec-Fetch-Mode: navigate
Sec-Fetch-Mode: no-cors
Sec-Fetch-Mode: same-origin
Sec-Fetch-Mode: websocket
Máy chủ nên bỏ qua tiêu đề này nếu nó chứa bất kỳ giá trị nào khác.
Chỉ thị
Note:
Các chỉ thị này tương ứng với các giá trị trong Request.mode.
cors-
Yêu cầu là yêu cầu giao thức CORS.
-
Yêu cầu được khởi tạo bởi điều hướng giữa các tài liệu HTML.
no-cors-
Yêu cầu là yêu cầu no-cors (xem
Request.mode). same-origin-
Yêu cầu được thực hiện từ cùng nguồn gốc với tài nguyên đang được yêu cầu.
websocket-
Yêu cầu đang được thực hiện để thiết lập kết nối WebSocket.
Ví dụ
Sử dụng Sec-Fetch-Mode
Nếu người dùng nhấp vào liên kết trang đến một trang khác trên cùng nguồn gốc, yêu cầu kết quả sẽ có các tiêu đề sau (lưu ý rằng chế độ là navigate):
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
Yêu cầu cross-site được tạo bởi phần tử <img> sẽ dẫn đến yêu cầu với các tiêu đề HTTP sau (lưu ý rằng chế độ là no-cors):
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
Đặc tả
| Specification |
|---|
| Fetch Metadata Request Headers # sec-fetch-mode-header |
Tương thích trình duyệt
Xem thêm
Sec-Fetch-Dest,Sec-Fetch-Site,Sec-Fetch-Userfetch metadata request headers- Protect your resources from web attacks with Fetch Metadata (web.dev)
- Fetch Metadata Request Headers playground (secmetadata.appspot.com)