CORS and Resource Timing in mPulse

Document created by Dave Murphy Employee on Jul 20, 2017Last modified by Ken Harker on Sep 15, 2017
Version 2Show Document
  • View in full screen mode

Akamai mPulse can capture element-level performance details during each page load.  When viewed in the Waterfall Analysis Dashboard, you can see exactly when every HTML, image, style sheet, and Javascript asset is being requested and how long they take to load.  This is very useful information when diagnosing performance problems on a page.  As you use waterfalls, however, you may notice that some elements on a page give you details on component timings such as DNS lookup time, TCP connect time, SSL connect time, request time, and response time, whereas other elements just have a single "total time" value.

 

The Resource Timing API

 

The values collected by mPulse come from the W3C Resource Timing API, a standard Javascript API that is implemented in modern web browsers.  Because the information is exposed through Javascript, the Resource Timing API is subject to the cross-origin security limitations that browsers enforce on scripts.  This limitation means that if your site uses multiple domains (such as 'www' and 'images') or has content served from both secure and non-secure servers, you will only be able to get component-level details for requests from the same server/domain that served the base document request, unless you change some settings.  In order to get component-level details for elements on a different origin server than the base page HTML server, you will need to have headers configured to allow Cross Origin Resource Sharing (CORS).  Specifically, you should add the following HTTP header to all requests:

 

Timing-Allow-Origin = "Timing-Allow-Origin" ":" origin-list-or-null | "*"

 

If you have third-party tags/elements on your pages, you will need to have those service providers add this header to their elements responses in order to get component-level details in the mPulse waterfalls for those page assets as well.

 

Security Consideration

 

Using a wildcard "*" header for Timing-Allow-Origin is relatively safe.  It does not expose the same security concerns as using the Access-Control-Allow-Origin: * header, for example.  The only thing that using Timing-Allow-Origin: * allows is for is Javascript from another site to get a breakdown of DNS, TCP, Request and Response times for content on third-party domains.  

 

That being said, if you want to use a more restricted Timing-Allow-Origin, you can have your site respond with the same value of the Origin HTTP request header.  The Origin HTTP request header is added to any request for third-party domains.  So if a browser requests content from a server with: 

 

Origin: http://www.example.net

 

You can include this HTTP header:

   

Timing-Allow-Origin: http://www.example.net

 

If however, someone requests content from:

   

Origin: http://some-other-domain.com

 

You can skip responding with the Timing-Allow-Origin header.

1 person found this helpful

Attachments

    Outcomes