Ionic 4: Pinned Certificates in Output Folder
If you want to use certificate pinning in Ionic 4 applications, the Cordova Advanced HTTP plugin is your best option. There's even an Ionic Native wrapper available for it to make it easier to use.
To make it work, you need to pass all Angular HTTP requests to its API and then convert the responses back. I might write more about this process in a future blog post. This time I'll focus only on how to put the certificates into the www/certificates folder as required by the certificate pinning functionality.
The problem with that is that the www folder is deleted at the beginning of every build. This can be disabled by passing the --deleteOutputPath=false option to the build command:
ionic build -- --deleteOutputPath=false
However, I wanted to avoid this if possible because it could cause files from previous build to remain in the output folder. Fortunately, I stumbled upon the asset configuration options in the angular.json file. All I needed to do was add the following object to the projects.app.architect.build.assets array:
{
"glob": "**/*.cer",
"input": "src/certificates",
"output": "/certificates"
}
As you can see, I decided to store the certificates in the src/certificates folder and have them copied from there to the correct location during each build. It works great!
