Home / Angular / Expose date headers
Standard world time zones

Expose date headers

For an auctioning platform, time is of the essence. If there is a difference between the time on the server and the time on the client, it can result in a very strange user experience. People might see auctions that they think are open but are actually closed, or the other way around. Of course the severity depends on how big this difference is.

In order to minimise this issue, we recommend clients to compare their current time with the time which is in the response from the server. This time (or actually it is a date), is a header which is being sent. More information about this header can be found in RFC7231, which is about Semantics and Content of HTTP/1.1. Since the date can be calculated before the actual payload is created, a very small and fast response is preferred.

So in the end there is little to none effort put into getting this working.

There are a couple of caveats however!

Make header readable

One thing we found was that in the browser’s Developer Console, we were able to read the value of the date header. It did not work in our AngularJS website. This was caused due to the fact that we did not allow it to be read. The solution is, to add it to one of the CORS headers in the response as well. This can be done by adding the following header to the response:

Access-Control-Expose-Headers: date

In an Apache configuration this would be done in a following way:

<IfModule mod_headers.c>
  SetEnvIf Origin "^http(s)?:\/\/(.+\.)?(bva-auctions\.com)$" AccessControlAllowOrigin=$0
  Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
  Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
  Header always set Access-Control-Max-Age "1000"
  Header always set Access-Control-Allow-Headers "accept-language, accept, cache-control, content-type, accessToken, refreshToken"
  Header always set Access-Control-Expose-Headers "date"
  Header set Access-Control-Allow-Credentials true
</IfModule>

Testing the headers

If it will actually work can be easily tested by using for instance the curl command.

curl -I https://api.bva-auctions.com/name_of_the_endpoint

The response should then contain the CORS headers as well as the date header. For instance:

HTTP/1.1 200 OK
Date: Thu, 15 Dec 2016 15:42:47 GMT
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT
Access-Control-Max-Age: 1000
Access-Control-Allow-Headers: accept-language, accept, cache-control, content-type
Access-Control-Expose-Headers: date
Content-Type: text/plain
Access-Control-Allow-Credentials: true

Using a content delivery network

Since we are building a high traffic site, we are also using a CDN (Akamai in our case). The response of a lot of requests is being cached, but what does it do with the date header?!

Luckily Akamai wrote a very nice blog post on how to get more information on what is being cached and what not. In the blog they describe some Pragma request headers and what they do.

You could for instance execute a command like:

curl -H "Pragma: akamai-x-cache-on" -H "Pragma: akamai-x-check-cacheable" -I "https://api.bva-auctions.com/name_of_the_endpoint"

So this is exactly the same command as done earlier. Except now the response shows more information about Akamai caching.

HTTP/1.1 200 OK
Date: Fri, 16 Dec 2016 08:58:56 GMT
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT
Access-Control-Max-Age: 1000
Access-Control-Allow-Headers: accept-language, accept, cache-control, content-type
Access-Control-Expose-Headers: date
Content-Type: text/plain
Access-Control-Allow-Credentials: true
X-Cache: TCP_MISS from a95-101-2-209.deploy.akamaitechnologies.com (AkamaiGHost/8.2.0.0.1-18764048) (-)
X-Check-Cacheable: NO

Apparently this endpoint is not being cached, otherwise the X-Check-Cacheable would return YES.

In conclusion

Using the standard date header of a response is an easy way to enable clients to check if they have (roughly) the same time. By using a command like curl it is easy to see if the header is returned by the servers. But do keep in mind, that if you want others to use it as well, expose it!

One thing to keep in mind is that you should have the time synchronised on your network/servers by using NTP (Network Time Protocol).

Interested joining BVA Auctions?

Take a look to our vacancies

About Marcel van den Brink

Marcel van den Brink is a software engineer with almost 20 years of experience in web development. He is passionate about the development process, CI, CD, metrics and getting the most out of a team.

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php