Capacitor support for SSL pinning

[HoverBaum]

The plugin currently doesn't play nicely together with capacitor which is the successor for Cordova. The following was experienced while developing for iOS.

While the plugin generally work as expected, it breaks on certificate pinning. The problem lies in a changed project structure within xCode and therefor the resulting iOS App. Due to the changes the plugin doesn't have access to users files right of the bat.

At the moment there is a hard-coded requirement to provide certificates within the www/certificates folder. New Capacitor applications don't have this folder anymore. They have a public folder. By updating the angular.json one can compile certificates into Angulars www folder which then lands them in public/certificates in the xCode project. The only trouble being that the advanced-http plugin doesn't have access to this folder. At least not by default.

This is probably an issue with access rights needing setup within the xCode project. A similar issue might apply to Android.

[ashenwgt]

I am about to implement SSL Pinning with Capacitor and would like to know whether this issue is still there with the plugin. Any suggestions @silkimen?

@HoverBaum : What is the alternative path did you take after trying this plugin with Capacitor? Any advice for getting SSL Pinning integrated in an Angular/Ionic app?

[HoverBaum]

Hi @ashenwgt for our Capacitor project we ended up forking this plugin and hardcoding our certificates into it. That was a feasible solution because we worked on a prototype that was only supposed to be live for a month.

The underlying problem is that between Cordova, which this plugin was written for and Capacitor, the file structure of the native code changed and the plugin can thus no longer find the certificate files. If you happen to have native developers in your team or close by it would be awesome if they could contribute an update to this plugin 🙂

[ashenwgt]

By updating the angular.json one can compile certificates into Angulars www folder which then lands them in public/certificates in the xCode project. The only trouble being that the advanced-http plugin doesn't have access to this folder.

Hi @HoverBaum, thanks for the awesome explanation. I also could update my angular.json to get www/certificates/ location, but could not implement the second workaround mentioned by you: hardcoding certificates to the native build since the advanced-http plugin doesn't have access to this certificates folder. Current progress: https://github.com/ashenwgt/ionic-capacitor-ssl-pinning

Could you please specify where you hardcoded your certificates in the native app?

[HoverBaum]

We hardcoded them directly within the plugin as a string 🙈

Sadly we did not have a team member available that could help us to figure out a way to read it from the file system in Capacitor.

[sarath-vijay]

I just found a workaround and it works for me. Instead of modifying the path for the certificate('www/certificates'), we can add a folder inside the Xcode bundle.

If we try to create a group ('www/certificates') in Xcode root(which will appear as yellow color folder icon) it won't work. Because the Xcode archive won't retain the folder structure.

But, if you try to add the folder reference('www/certificates') in the Xcode root folder(which will appear as blue color folder icon) and put the certificate there, it will work.

[2ez4salt]

I just found a workaround and it works for me. Instead of modifying the path for the certificate('www/certificates'), we can add a folder inside the Xcode bundle.

If we try to create a group ('www/certificates') in Xcode root(which will appear as yellow color folder icon) it won't work. Because the Xcode archive won't retain the folder structure.

But, if you try to add the folder reference('www/certificates') in the Xcode root folder(which will appear as blue color folder icon) and put the certificate there, it will work.

it works

[rodalz]

Based on @sarath-vijay 's solution, I bring another workaround:

1. remove code from angular.json, as it is not necessary

{
  "glob": "**/*.cer",
  "input": "src/certificates",
  "output": "./certificates"
}

2. add a new script to package.json

"set:ios:certificate": "mkdir -p ios/App/App/www/certificates && cp src/certificates/*.cer ios/App/App/www/certificates && ruby addCertToXcodeProj.rb"

3. Since capacitor depends on cocoapods, we already have the Xcodeproj gem.

So here is the ruby ​​script for addCertToXcodeProj.rb:

require 'xcodeproj'
project_path = 'ios/App/App.xcodeproj'
project = Xcodeproj::Project.open(project_path)
main_group = project.main_group['App']
folder = main_group['www']
if (!folder)
    certificates_path = 'www'
    certificates_ref = main_group.new_reference(certificates_path, :group)
    main_target = project.targets.first
    main_target.add_resources([certificates_ref])
    project.save
end

4. npm run set:ios:certificate

[jonesdhtx]

Thanks @sarath-vijay! Anybody solved this for Android?

---

Update: I came across the workaround outlined here: https://github.com/ashenwgt/ionic-capacitor-ssl-pinning

I hope a more orthodox solution emerges in regards to placement/packaging/etc of the pinned certs between capacitor <-> cordova-plugin-advanced-http but until then i incorporated the workaround as a part of my npm run build:mobile script