Why do PerformanceResourceTiming interface values differ from browser values?

Question

I've written a script that runs on a domain and fetches images from various other domains (3rd party resources).

I'm trying to use window.performance.getEntriesByType('resource') to get a general health check of things. It seems, since these resources are on other domains that the responses would need to have Timing-Allow-Origin set in the response header to get timing data via window.performance.getEntriesByType().

Is this true?

Further, when I run my script, Chrome Browser does return useful information. Indeed, I could use this data if I could get at it programmatically. But the data Chrome displays and the data returned in the window.performance.getEntriesByType() differ.

I've attached a screenshot, which shows Chromes useful timing breakdown of loading the resource. By the performance entry object's data doesn't match.

For example, see the DNS Lookup time in the timing graph on the right, and then look at the domainLookupStart and domainLookupEnd values in the performance entry object. These values don't match up with each other.

Why is there a discrepancy and how can I get at Chrome's data? How do I derive what Chrome is displaying from the performance entry object?

Thanks!

Answer 1

You've probably figured this out by now, but I had a similar question and found this.

Most detailed fields in a PerformanceResourceTiming object report zero for cross-origin resources that do not set the Timing-Allow-Origin header, as per the spec:

connectStart must return zero unless timing allow check algorithm passes.

Similarly for other fields, such as the DNS lookup fields.

As for why the developer console allows you to see this information even if you can't access it programmatically, it's just a feature of Chrome that allows you to see this information. Hiding it is more of a courtesy than a security feature; the spec dictates what can be shared via the Resource Timing API, but the browser still has access to the information and may decide to share it with the user in other ways, as you have seen.