HTTP Headers

Timing Allow Origin

HTTP Header

The HTTP Timing-Allow-Origin response header specifies which origins are permitted to access attribute values retrieved using features of the Resource Timing API. Without this header, such attributes would typically be reported as zero due to cross-origin restrictions.

Syntax

Timing-Allow-Origin: *
Timing-Allow-Origin: <origin>, <origin2>, <originN>

Directives

Any origin may see timing resources.

Specifies a URI that may see the timing resources. You can specify multiple origins, separated by commas.

Example

Using Timing-Allow-Origin

To enable any resource to access timing information, you can set the following header:

Timing-Allow-Origin: *

If you want only specific origins, such as https://developer.mozilla.org, to access timing resources, you can specify it like this:

Timing-Allow-Origin: https://developer.mozilla.org

How to Modify Header using Requestly

Requestly is a handy Chrome extension that lets you change HTTP headers, including the Timing-Allow-Origin header. Modifying this header is useful when you want to control which origins can view timing data on your website, helping with performance monitoring and debugging. Steps to Modify the Timing-Allow-Origin 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 Timing-Allow-Origin.
- In the “Header Value” field, enter the origin(s) you want to allow (e.g., * to allow all).
Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-website.com/*).
Save the rule.

This setup enables you to test how your site handles cross-origin timing data sharing, which is essential for optimizing performance and ensuring accurate analytics.