HTTP Headers
Sec Purpose
HTTP Header
The HTTP Sec-Purpose fetch metadata request header indicates the purpose for which the requested resource will be used, when that purpose is different from immediate use by the user-agent.
The only currently defined purpose is prefetch, which signifies that the resource is requested in anticipation of being needed by a page likely to be navigated to soon, such as a link in search results or one that a user has hovered over.
The server can utilize this information to modify caching durations, disallow the request, or treat it differently when tallying page visits.
This header is sent when a page loads that contains a <link> element with the attribute rel="prefetch".
| Header type | Fetch Metadata Request Header |
|---|---|
| Forbidden request header | Yes (Sec- prefix) |
| CORS-safelisted request header | No |
Syntax
Syntax
http
Sec-Purpose: prefetchDirectives
The allowed tokens are:
The purpose of the prefetch directive is to prefetch a resource that might be needed in a potential future navigation.
Example
Examples
Consider the case where a browser loads a file with a <link> element that has the attribute rel=”prefetch” and an href attribute containing the address of an image file.
The resulting fetch() should result in an HTTP request where Sec-Purpose: prefetch, Sec-Fetch-Dest: empty, and an Accept value that is the same as the browser uses for page navigation.
An example of such a header (on Firefox) is given below:
http
GET /images/some_image.png HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Sec-Purpose: prefetch
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: same-origin
Pragma: no-cache
Cache-Control: no-cache
Note:
At the time of writing Firefox incorrectly sets the Accept header as Accept: */* for prefetches.
The example has been modified to show what the Accept value should be.
This issue can be tracked in Firefox bug 1836334.
How to Modify Header using Requestly
Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Sec-Purpose header. This can help you test how your server or application reacts to different security or fetch purposes in development and debugging. Steps to Modify the Sec-Purpose Header:
- Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
- Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
- Add a new header modification:
- Under “Action”, select “Add” or “Override”.
- In the “Header Name” field, enter Sec-Purpose.
- In the “Header Value” field, enter your desired purpose value (e.g., prefetch).
- Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://example.com/*).
- Save the rule.
Once set up, Requestly will inject the Sec-Purpose header with your specified value into all matching requests, helping you simulate different fetch intents and test how your application manages these scenarios. Modifying the Sec-Purpose header is useful when you want to understand how your server or client handles different resource fetching purposes like prefetching or prerendering. This can improve performance and security by ensuring your app responds properly to these directives.
Table of Contents
- No headings found.
