@approov/ionic-native-http-connection-backend

ionic-native-http-connection-backend

This library adds @awesome-cordova-plugins/approov-advanced-http (when available) as a connection backend to Angular's Http and HttpClient.

This is a fork of project original developed for a different reason, see CORS Motivation. It is being used to intercept Angular requests so they can use the Advanced Http Plugin that has been updated to provide Approov protection.

CORS Motivation

Now that Apple promotes/requires the use of WKWebView instead of the deprecated UIWebView, Ionic has switched newly created apps over via their cordova-plugin-ionic-webview (and Cordova offers it via their cordova-plugin-wkwebview-engine). That causes requests that used to work just fine to fail with CORS errors.

The real solution of course is to fix the CORS issues server side - but this may not be possible with e.g. 3rd party APIs.

Even though there is a way to solve CORS issues without changing server's response header by using @awesome-cordova-plugins/http, this only works on device and doesn't provide all the power of Angular's Http and HttpClient.

How it works

• The library provides a HttpBackend interface for Angular's HttpClient
• This HttpBackend interface tries to use @awesome-cordova-plugins/approov-advanced-http whenever it is possible (= on device with installed plugin)
• If HttpBackend finds it impossible to use @awesome-cordova-plugins/approov-advanced-http, it falls back to standard Angular code (HttpXhrBackend, which uses XmlHttpRequest)

This strategy allows developers to use Angular's HttpClient transparently in both environments: Browser and Device.

Installation

npm install --save ionic-native-http-connection-backend

Then follow instructions at https://ionicframework.com/docs/native/http/#installation

Usage

Add NativeHttpModule, NativeHttpBackend and NativeHttpFallback into the application's module

import { NgModule } from '@angular/core';
import { HttpBackend, HttpXhrBackend } from '@angular/common/http';
import { NativeHttpModule, NativeHttpBackend, NativeHttpFallback } from '@approov/ionic-native-http-connection-backend';
import { Platform } from '@ionic/angular';

@NgModule({
    declarations: [],
    imports: [
        NativeHttpModule
    ],
    bootstrap: [],
    entryComponents: [],
    providers: [
        {provide: HttpBackend, useClass: NativeHttpFallback, deps: [Platform, NativeHttpBackend, HttpXhrBackend]},
    ],
})
export class AppModule {
}

Contributing

Contributing guidelines could be found in CONTRIBUTING.md

Troubleshooting

TROUBLESHOOTING.md