Configuring ember-cli-mirage for production deploys

TL;DR: if you're using Mirage in production, add this.passthrough('http://localhost:0/chromecheckurl') to your mirage/config.js

I was building a small website the other weekend, and opted to use Mirage (ember-cli-mirage) fixtures to stub static data at adapter-friendly "endpoints".

All seemed fine when testing in development, so I enabled Mirage for production environments per the docs and deployed to the live server. Most browsers continued to check out, but I was greeted to an alarming screen when testing in Chrome for iOS. It looked something like this:

Warning: Something's Not Right Here! Chrome is unable to verify that the URL for this site is correct. UNVERIFIED URL

Warning: Something's Not Right Here! Chrome is unable to verify that the URL for this site is correct. UNVERIFIED URL

Some digging exposed that Chrome for iOS introduces this small, very fixable bug when a particular outbound request is intercepted.

In summary:

  • Chrome for iOS uses a local endpoint (http://localhost:0/chromecheckurl) to circumvent Webkit's limitations and verify URLs, for authenticity & safety & other voodoo magic;
  • Mirage intercepts outbound traffic (via Pretender);
  • Chrome cannot reach its localhost:0 endpoint to verify the URL; so
  • Chrome spits a big ugly error :(

To resolve this issue, simply configure Mirage & Pretender to permit outbound requests to http://localhost:0/chromecheckurl, then redeploy.

This issue will affect any Javascript library that eagerly blocks network traffic, i.e. libraries that filter outbound traffic through a whitelist of permitted remote paths vs. a blacklist of mocked paths. So Pretender and, by affiliation, Mirage are affected, whereas libs like jQuery-Mockjax would not be.

Addendum: if you're having trouble using Passthrough with Mirage, try upgrading to pretender >= 0.11.0 || jquery >=2.1.0. There was a known issue with Pretender's passthrough strategy in much of the jQuery 1.x series which was only recently resolved.

[Hat tip to @txase & Newrelic, whose helpful blog post answered far more than several issues & SO questions returned in search.]

aidan nulman

partner @ isle of code. hacks with ember.js & btle (e.g. ibeacons).

About Isle of Code:

We’re a Javascript/Ember firm in Toronto + Chicago, est. 2012. We provide on-demand development for Mobile Apps, Websites, iBeacons/ hardware, existing codebases and team augmentation / Ember leadership.

read more