To enable Fetch Metadata on your webserver

You need to configure your server to include the appropriate response headers in the server’s HTTP responses. Specifically, you need to include the "Cross-Origin-Embedder-Policy" and "Cross-Origin-Opener-Policy" headers in your server’s responses to allow for the inclusion of fetch metadata with the outgoing requests.

Here’s an example of how to set the headers in an Apache web server:

Header always set Cross-Origin-Embedder-Policy "require-corp"
Header always set Cross-Origin-Opener-Policy "same-origin"

These headers should be added to your server’s configuration file, either in the main configuration file or in a virtual host configuration file if you are using virtual hosting.

Note that the exact steps to enable fetch metadata on your webserver may vary depending on the server you are using, so it’s important to consult your web server’s documentation for specific instructions.

To define a list of allowed origins, methods, and headers based on web application requirements

You can use the Cross-Origin Resource Sharing (CORS) mechanism. CORS is a security feature implemented in web browsers that allows web pages to make cross-origin HTTP requests (i.e. requests for resources from domains different from the one served by the web page).

To define the allowed origins, methods, and headers in your web application, you can set the appropriate response headers in your server’s HTTP responses. The Access-Control-Allow-Origin header specifies the domains that are granted access to your resources. The Access-Control-Allow-Methods header specifies the HTTP methods that are allowed for cross-origin requests. The Access-Control-Allow-Headers header specifies the headers that are allowed in cross-origin requests.

Here is an example of how to set these headers in an Apache web server:

Header set Access-Control-Allow-Origin "https://example.com"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

This configuration allows cross-origin resource sharing for only the "example.com" domain, with GET, POST, and OPTIONS requests allowed, and the "Content-Type" and "Authorization" headers allowed.

Note that the exact syntax for configuring CORS may vary depending on the web server you are using, so it’s a good idea to consult your server’s documentation for specific instructions.

Validate incoming requests and only allow those that include the required Fetch Metadata headers

You can use the Access-Control-Allow-Headers response header. This header specifies the allowed headers for cross-origin requests.

To require Fetch Metadata headers for incoming requests, you can include the "Sec-Fetch-Mode" and "Sec-Fetch-Site" headers in the Access-Control-Allow-Headers list. These headers are a part of the Fetch Metadata specification and are used to identify the referrer information associated with a fetch request.

Here’s an example of how to specify the required Fetch Metadata headers in an Apache web server:

Header set Access-Control-Allow-Origin "https://example.com"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization, Sec-Fetch-Mode, Sec-Fetch-Site"

This configuration allows cross-origin resource sharing for only the "example.com" domain, with GET, POST, and OPTIONS requests allowed, and with "Content-Type", "Authorization", "Sec-Fetch-Mode", and "Sec-Fetch-Site" headers allowed.

Note that the exact syntax and specific headers required may vary depending on the web server you are using and the requirements of your web application, so it’s important to consult your server’s documentation and the Fetch Metadata specification for specific instructions.

Implementing server-side access control based on the Fetch Metadata headers

Requires that your server checks incoming requests for the presence of the required headers and responds accordingly.

Firstly, you will need to check that the "Sec-Fetch-Mode" and "Sec-Fetch-Site" headers are present in the incoming request. These headers are part of the Fetch Metadata specification and are used to identify the referrer information associated with a fetch request.

After verifying that the required headers are present in the incoming request, you can use the information contained within those headers to enforce access controls. For example, you can check the value of the "Sec-Fetch-Site" header to determine whether the request was initiated by a same-site context or a cross-site context, and apply different access control policies accordingly.

Here is an example of how to implement a Resource Isolation Policy with Fetch Metadata in PHP code:

function isolationPolicy(): bool {
	// If fetch metadata is not supported, allow the request.
	if (!isset($_SERVER['HTTP_SEC_FETCH_SITE'])) {
		return true;
	}
	if (!isset($_SERVER['HTTP_SEC_FETCH_MODE'])) {
		return true;
	}
	if (!isset($_SERVER['HTTP_SEC_FETCH_DEST'])) {
		return true;
	}

	// If the request originates from your own web application, allow it.
	if (isset($_SERVER['HTTP_SEC_FETCH_SITE']) && $_SERVER['HTTP_SEC_FETCH_SITE'] == "same-origin") {
		return true;
	}

	// If the request doesn't originate from a website at all (bookmark, etc.) then allow it.
	if (isset($_SERVER['HTTP_SEC_FETCH_SITE']) && $_SERVER['HTTP_SEC_FETCH_SITE'] == "none") {
		return true;
	}
	//same origin must have http refere
	if (isset($_SERVER['HTTP_SEC_FETCH_SITE']) && $_SERVER['HTTP_SEC_FETCH_SITE'] == 'same-origin' && isset($_SERVER['HTTP_REFERER'])){
		return true;
	}
	// If the request is a navigation GET request, allow it.
	if (
		$_SERVER['REQUEST_METHOD'] == 'GET' &&
		isset($_SERVER['HTTP_SEC_FETCH_SITE']) && $_SERVER['HTTP_SEC_FETCH_SITE'] == "navigate" &&
		isset($_SERVER['HTTP_SEC_FETCH_SITE']) && $_SERVER['HTTP_SEC_FETCH_SITE'] == "document"
	) {
		return true;
	}
	return false;
}

Note that the exact access control policies and checks will depend on the specific requirements of your web application. It’s important to consult the Fetch Metadata specification and other relevant documentation for more information on how to implement server-side access control based on Fetch Metadata headers.

Implementing a Resource Isolation Policy using Fetch Metadata is a crucial step in securing web applications and ensuring that user data and security is protected against attacks.

Browser Compatible

As of April 2023, the following is the browser support for fetch metadata:

1. Google Chrome(Microsoft Edge, Samsung Browser): 76+
2. Firefox: 90+
3. Safari: 16.4+