HTTP Headers

Supports Loading Mode

HTTP Header

The HTTP Supports-Loading-Mode response header allows a response to opt-in to being loaded in a novel, higher-risk context that it would otherwise fail to be loaded in.

Syntax

Supports-Loading-Mode: <client-hint-headers>

Directives

The Supports-Loading-Mode header accepts one or more tokens that specify supported loading modes. The following values can be used:

credentialed-prerender (Experimental):
Signals that the destination origin allows documents to be loaded through cross-origin, same-site prerendering.
fenced-frame:
Indicates that the response is permitted to load within a fenced frame. Without this explicit opt-in, all navigations inside a fenced frame will be blocked.

Example

Supports-Loading-Mode: fenced-frame

How to Modify Header using Requestly

Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Supports Loading Mode header. This is helpful when you want to control or simulate how your web application loads resources under different conditions for testing or debugging purposes. Steps to Modify the Supports Loading Mode 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 Supports-Loading-Mode.
- In the “Header Value” field, enter the desired mode value (e.g., lazy or eager).
Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-website.com/*).
Save the rule.

Once configured, Requestly will add or replace the Supports-Loading-Mode header in all matching requests, allowing you to test how your application behaves with different resource loading strategies.