External images no longer loading on iOS

I deployed a new build to iOS last night and, now, external images no longer load.

My app runs on Modulus. When accessing the app through the browser, it works fine. But, after submitting the app, through Xcode, to Apple, and installing the app through TestFlight, external images no longer load. The same happens in the Xcode iOS simulator.
I also use client-side http get, which still works fine.

In my app’s mobile-config.js, I have the following:

App.accessRule(’://.{my website}/*’);

And, for good measure, just to try and figure out what might be going on:

App.accessRule(‘http://’);
App.accessRule('https://
’);

The app tries to download images from {my website}, but fails (where applicable, little squares with question marks inside them are shown instead). When running the app in the iOS simulator from within Xcode, the app throws no errors.

I’m using Meteor 1.3 and Xcode 7.2.

Any insight would be immensely helpful.

Are you sure it’s not an iOS issue instead of a Meteor issue? Allowing all domains is quite a security risk. Not sure what you use case is though. In general I would suggest hosting them on s3 (duplicate the files) so you can set correct CORS headers.

Yes, allowing everything is a security risk. But, I added those rules just for testing purposes.

No, I’m not sure its a Meteor issue, but I have no idea how to confirm it is or isn’t. Over the past week or so, Xcode, iOS, Modulus and Meteor have all gone through significant updates, while I have not changed the code relevant to displaying external images. Yet, within the iOS app, external images are no longer showing.

(Also, I notice that my submitted post was garbled slightly by the forum. I will update it to make it a bit clearer.)

I think you should first try to get to see the errors. I see them when I use Safari with USB cable to inspect the web view.

That works when I run the app in my device’s mobile browser. But, if I’m not mistaken, not when building the app in Xcode and then running it as a native app. Doesn’t Xcode for that provide the console? If so, in that console, I see no errors whatsoever.

Connect iOS device with USB, then press play to deploy your code to the device. You cannot inspect an app deployed via for example TestFlight.

If your console stays empty add the Cordova console package to your project, that might relay the messages.

edit: We use that plugin but by reading the docs it seems you should just see the output if you follow the first advice.

Also see the logging section of the mobile guide for more information. Remote debugging using Safari might be able to give you better error logging here.

I found that running my app locally worked fine. All external files (images, really) loaded without a problem.

Only when deploying to Modulus did external images fail to load.

Running my app through Xcode inside an iOS simulator, and using Safari’s console (under Develop > Simulator) I got surprisingly few errors. Only one, really, even though my app tries to load many images.

This was the error:

Failed to load resource: The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.

I resolved this by following the steps mentioned here:

In short:

  1. Opened my Projects info.plist file
  2. Added a Key called NSAppTransportSecurity as a Dictionary.
  3. Added a Subkey called NSAllowsArbitraryLoads as Boolean and set its value to YES.

I’m not clear as to why this suddenly started happening. But, it’s resolved.

You shouldn’t have to add NSAllowsArbitraryLoads (which disables ATS altogether). Adding the domain through App.accessRule should add the appropriate ATS configuration automatically (see the [guide section on domain whitelisting] (http://guide.meteor.com/mobile.html#accessing-local-files) for more information).

Right.

Yet, that did solve my problem at the time.

Meanwhile, now, some six weeks after resolving my initial issue, my deployed app decided to not show external images that were not served over https. When running the app through localhost, there were no issues, all images displaying properly. But when deploying to a remote location (Modulus), images not served over https were not shown.
So, it seems that adding NSAppTransportSecurity indeed makes little difference.

I have not been able to fix this current (or is it the same) issue, except for serving all images over https.