Content security policy on Ionic v1 app using Firebase


#1

I’m coding an app using the Ionic framework v1 and utilizing firebase to store users data. The app works perfectly when I run it on my desktop computer and there are no connection issues to the database. However, when I run it on my iPhone or on a iPhone emulator with iOS 10, I get a connection error. This does not happen on iOS 9 emulators. This led me to the conclusion that the issue lied in the way iOS 10 deals with the Content-Security-Policy. So, I tried to add this meta tag in my index.html:

<meta http-equiv="Content-Security-Policy"
      content="default-src * 'unsafe-eval' 'unsafe-inline'; img-src * 'unsafe-eval' 'unsafe-inline'; script-src * 'unsafe-eval' 'unsafe-inline';
      style-src * 'unsafe-eval' 'unsafe-inline'; connect-src * 'unsafe-eval' 'unsafe-inline';
      font-src * 'unsafe-eval' 'unsafe-inline'; media-src * 'unsafe-eval' 'unsafe-inline'; object-src * 'unsafe-eval' 'unsafe-inline';
      frame-src * 'unsafe-eval' 'unsafe-inline'; form-action * 'unsafe-eval' 'unsafe-inline';
      child-src * 'unsafe-eval' 'unsafe-inline';">

I’m just trying to allow everything in hopes of allowing a connection to the database. However, when I run my app, certain functions don’t work like opening the Camera Roll and autofocusing the keyboard on an input. The firebase connection error I was getting before has disappeared, but it still doesn’t write anything to the database. (Remember, Everything relating to writing to the database works perfectly running it on my desktop but not on an iPhone running iOS 10). I’ve added cordova-plugin-whitelist. What’s the best way to just allow everything for the content-security-policy? I’ve tried so many different combinations and while some end up fixing certain problems they all create new ones.