Links in iOS Ionic app not opening immediately

Question

I have a few links in one of the views in my app for:

1. Sharing
2. Adding to calendar
3. Opening an external link

On an iPhone which I used to test the app, 1 and 2 sort of work but only if I press the Home button and then return to the app, then the share/calendar dialogs appear. Can anyone suggest what could cause this? I'm not sure where to even look.

The external link uses window.open(url, "_system") because I was not able to get regular type links to work in the simulator. I may switch back to regular HTML links though as another link was able to work on the test iPhone. What is the suggested method to open links in the phone's browser using iOS?

Code is roughly as below.

.controller('WCtrl', function ($scope, $stateParams, $sce) {
  // ...
  $scope.doShare = function () {
    var options = {
      message: 'Message here',
      subject: 'Event shared'
    };
    var onSuccess = function (result) {
      console.log('Share successful.');
    };
    var onError = function (msg) {
      console.log('Sharing failed with message: ' + msg);
    }
    window.plugins.socialsharing.shareWithOptions(options, onSuccess, onError);
  };
  $scope.doCalAdd = function () {
    var onSuccess = function (result) {
      console.log('Add to calendar successful.');
    };
    var onError = function (msg) {
      console.log('Add to calendar failed with message: ' + msg);
    }
    // ...
    window.plugins.calendar.createEventInteractively(
      title,
      location,
      notes,
      starttime,
      endtime,
      onSuccess,
      onError);
  };
  $scope.doTicketsOpen = function () {
    var url = w.ticketing;
    window.open(url, '_system');
  };
})

<ion-view class="item-text-wrap" view-title="Event Details">
  <ion-content class="has-footer">
    <!-- ... -->
  </ion-content>
  <ion-footer-bar>
    <div class="button-bar">
      <div class="button icon ion-share" ng-click="doShare();">Share</div>
      <div class="button icon ion-calendar" ng-click="doCalAdd();">Calendar</div>
      <div class="button icon ion-link" ng-click="doTicketsOpen();">Ticketing</div>
    </div>
  </ion-footer-bar>
</ion-view>

I have a Content-Security-Policy meta tag in the index.html as below.

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />

Answer 1

You have to add gap: in the default-src of your Content-Security-Policy meta tag in your index.html.

This is because on iOS 10 Apple got stricter with the CSP, and * doesn't cover some things