WhatsMyLot.com Stopped Working in Google Chrome

When Chrome 50 was released in April, my WhatsMyLot.com app stopped working because with that release Chrome would no longer allow use of the Geolocation API for non-secure sites.

The reasons for this are sound:

Location is sensitive data! Requiring HTTPS is required to protect the privacy of your users’ location data. If the user’s location is available from a non-secure context, attackers on the network will be able to know where that user is. This seriously compromises user privacy.

In other words, you probably don’t want your specific location, which WhatsMyLot.com needs to locate the township lot you’re standing in, flying around the Internet in the clear for anyone to intercept.

To make this work I needed to do two things:

First, I needed to purchase and install an SSL certificate. This cost me $34 wholesale from RapidSSL and took about 15 minutes to request and configure. I had to update my Apache server configuration to serve the site on port 443 instead of port 80, and I needed to ensure that any traffic going to port 80 got redirected to port 443.

Once that was done, the site was serving from https://WhatsMyLot.com/. But it still wasn’t working properly.

Chrome’s JavaScript console was reporting two errors:

Refused to execute script from 'https://whatsmylot.com/data/pei-lots-wgs84-simplified.geojson' because its MIME type ('') is not executable, and strict MIME type checking is enabled.
whatsmylot.com/:1 Refused to execute script from 'https://whatsmylot.com/data/lot-data.json' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

There are really two separate errors here – the MIME type of .geojson files wasn’t configured in Apache, and Chrome wasn’t executing JSON files – but there was a simple, common solution.

The app needs two objects define to work properly, metadata and lots. These are JSON objects that define the metadata about each lot and the geographic coordinates of each lot’s polygon respectively. For ease of management, I had these loaded from the index.html like this:

<script src="data/pei-lots-wgs84-simplified.geojson"></script>
<script src="data/lot-data.json"></script>

While this worked, it technically wasn’t correct, as these were JavaScript files, not GeoJSON nor JSON files. Chrome’s complaint, in a sense, reflects this. The fix was easy: I renamed the files with .js extensions, and changed the index.html to:

<script src="data/pei-lots-wgs84-simplified.js"></script>
<script src="data/lot-data.js"></script>

With that change Chrome users are again able to identify which of the Samuel Holland-surveyed townships lots on Prince Edward Island they’re in at any given time. The source code repository has been updated accordingly.