Plugins in PhoneGap plugins.pdf · phonegap-plugin-push 17.008 Receive and handle native push...

Plugins in PhoneGap

User-group meeting

26/04/2016

Michiel Willocx

Table of content

• Introduction

• The internals of a PhoneGap plugin

• The PhoneGap Plugin Store

• Performance of PhoneGap plugins (case study: data storage)

• Security of PhoneGap plugins (case study: hot code updates)

Web Apps

Web-To-Native

WrappersSource Code

Translator

Application

Code

Runtime

Environment

Operating

System

Runtimes

1) Based on web technology 2) Not based on Web technology

Introduction

Add PhoneGap plugins to your application

$ cd <location main folder of PhoneGap project>

$ cordova plugin add https://github.com/<plugin name>

The internals of a PhoneGap plugin

• Example: media capture plugin

• Captures:

o Audio

o Images

o Video

// capture callbackvar captureSuccess = function(mediaFiles) {

var i, path, len;for (i = 0, len = mediaFiles.length; i < len; i += 1) {

path = mediaFiles[i].fullPath;// do something interesting with the file

}};

// capture error callbackvar captureError = function(error) {

navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');};

// start audio capturenavigator.device.capture.captureAudio(captureSuccess, captureError, {limit:2});

Code Example

The internals of a PhoneGap plugin

plugin.xml

Contains all plugin settings

plugin.xml

All JavaScript files included in

the plugin.

plugin.xml

Platform specific settings

In Android:

• Permissions required by the plugin

• Included Java files

is copied to Android Manifest

Analogous, iOS

configurations are

copied to Info.plist,

and Windows Phone

configurations to

WMAppManifest.xml

www folder

JavaScript file

Functions, available for the

developer to use in the

PhoneGap application

src folder

Android Source

…

PhoneGap Plugin Store

PhoneGap Plugin Store

http://cordova.apache.org/plugins/

Featured/Core Plugins

• Basic device plugins provided by PhoneGap/Cordova

• Geolocation

• Globalization

• InAppBrowser

• Keyboard

• Media

• Dialogs (Notification)

• SplashScreen

• StatusBar

• Vibration

• Whitelist

• (Whitelist legacy version)

• Device Motion (Accelerometer)

• Battery Status

• Camera

• Media Capture (Capture)

• Device Orientation (Compass)

• Network Information (Connection)

• Console

• Contacts

• Device

• File (FileSystem)

• File Transfer

Totaal: 21(+1)

The PhoneGap Plugin Store: An overview

Analysis Method:

• Collecting information about each plugin in the store

• Selenium with Firefox in Java

• Download and analyze each plugin

• Download: Shell script

• Analyze: Java program

Overview of the PhoneGap Plugin Store

• Plugin store is growing fast

February Now

# Plugins ± 950 ± 1150

# Developers ± 450 ± 500

Platform Coverage of the Plugins

Average for all plugins:

• Coverage of 1,7-1,8 platforms per plugin

< 2 platforms

Android iOS WP Blackberry Ubuntu Firefoxos Fireos

# Plugins 810 732 168 123 63 44 79

% Plugins 71% 64% 15% 11% 6% 4% 7%

Platform Coverage of the Plugins

Some more stats

961 84% Support at least one of the 3 main platforms

157 14% Support all 3 main platforms

587 51% Support Android and iOS

• Coverage remains at 1,7-1,8 platforms per plugin

0

50

100

150

200

250

300

350

400

450

500

1 2 3

AmountofSupportedplatforms

Downloads of Plugins

Most downloaded : Whitelist plugin (see later this presentation)

0

100

200

300

400

500

600

700

800

0-10 10-100 100-1000 1000-10.000 10.000-100.000 More

AmountofdownloadsforPhoneGapPlugins(LastMonth)

Mostly featured plugins

Most popular non-featured PluginsPlugin name #Downloads What?

cordova-ios 92.897allows Cordova-based projects to be built for the iOS Platform

ionic-plugin-keyboard 72.587Easy interaction with the keyboard (hide, show,…)

com.instafeez.cordova 38.350 integration for Razorpay checkout

cordova-plugin-baidupush 34.811 baidu push = chinese cloud service

com.shahidachmat.intermec.scanner 23.777 barcode scanner

phonegap-plugin-push 17.008 Receive and handle native push notifications

cordova-plugin-crosswalk-webview 15.357 Crosswalk webview (Android)

cordova-camera-custom 10.258 allows camera interaction from html code

cordova-plugin-x-socialsharing 8.300 Share text, images,… via the native sharing widget

cordova-plugin-x-toast 6.119 show a Toast

CrossWalk Webview for Android

Recently: Crosswalk also available on iOS

Plugin Updates

0

50

100

150

200

250

300

<1month <3months <6months <9months <1year >1year

LastUpdateforPhoneGapPlugins • Most plugins are

frequently updated

• Many non-updated

plugins are submitted by

the same programmer

• “All” plugins were

updated last year

• Most featured plugins

are frequently updated

Plugin Updates

Plugin Name AuthorLast

UpdatedDownloads Last

MonthAmount of Commits

Amountof Issues

Amountof stars

cordova-plugin-okhttp agrieve 384 117 4 1 4

cordova-plugin-service-worker maxw 368 45 137 6 45

cobweb-camera-va-plugin panterz 355 17 12 0 0

cobweb-los-plugin panterz 355 10 12 0 0

cordova-plugin-websql-async dickvdbrink 349 43 43 9 4

cordova-plugin-android-support-v4 floatinghotpot 348 1.270 2 0 2

cordova-plugin-paypalmpl floatinghotpot 348 35 19 5 3

cordova-plugin-mobfox floatinghotpot 348 26 28 6 10

cordova-plugin-smartadserver floatinghotpot 348 9 15 0 4

cordova-plugin-iflyspeech floatinghotpot 348 8 4 1 18

cordova-plugin-wifi floatinghotpot 347 91 6 4 8

cordova-plugin-android-support-v7-appcompat floatinghotpot 347 23 1 0 0

cordova-plugin-appleiap floatinghotpot 347 11 16 1 13

cordova-plugin-barcodescanner hypery2k 346 943 170 6 10

How to update a Cordova plugin in a PhoneGap app

• PhoneGap Plugins are not automatically updated!

• Manually remove and add the plugin again:

$ cordova plugin rm https://github.com/apache/cordova-plugin-camera

$ cordova plugin add https://github.com/apache/cordova-plugin-camera

Plugin updated in the Plugin Store ≠ Plugin updated in your application

Android permissionsandroid.permission.INTERNET 177

android.permission.ACCESS_NETWORK_STATE 161

android.permission.WRITE_EXTERNAL_STORAGE 116

android.permission.WAKE_LOCK 66

android.permission.ACCESS_COARSE_LOCATION 62

android.permission.ACCESS_FINE_LOCATION 60

android.permission.VIBRATE 51

com.google.android.c2dm.permission.RECEIVE 50

android.permission.READ_PHONE_STATE 47

$PACKAGE_NAME.permission.C2D_MESSAGE 42

android.permission.ACCESS_WIFI_STATE 41

android.permission.RECORD_AUDIO 35

android.permission.GET_ACCOUNTS 29

android.permission.RECEIVE_BOOT_COMPLETED 29

android.permission.BLUETOOTH 26

android.permission.READ_EXTERNAL_STORAGE 26

android.permission.BLUETOOTH_ADMIN 22

android.permission.CAMERA 22

android.permission.MODIFY_AUDIO_SETTINGS 18

android.permission.CHANGE_WIFI_STATE 9

Android permissions

github.com/Lancezh/cordova-plugin-qtpaysdk 18

github.com/Pushwoosh/pushwoosh-phonegap-3.0-plugin 17

github.com/Code1Tech/phonegap-plugin-push 14

github.com/Kandy-IO/kandy-phonegap 14

github.com/cranberrygame/cordova-plugin-ad-admob-inmobi 13

github.com/rongcloud/cordova-plugin-rongcloud-im 12

github.com/mrwutong/cordova-qdc-baidu-push 12

github.com/EtherZhou/baidupush 10

github.com/Donky-Network/cordova-plugin-donky-core 10

github.com/Donky-Network/cordova-plugin-donky-push 10

github.com/mobiletools/context-sensing-cordova 10

github.com/Lancezh/cordova-plugin-qtpaysdk

android.permission.ACCESS_NETWORK_STATE

android.permission.WRITE_EXTERNAL_STORAGE

android.permission.WAKE_LOCK

android.permission.ACCESS_COARSE_LOCATION

android.permission.ACCESS_FINE_LOCATION

android.permission.VIBRATE

android.permission.READ_PHONE_STATE

android.permission.ACCESS_WIFI_STATE

android.permission.RECORD_AUDIO

android.permission.BLUETOOTH

android.permission.READ_EXTERNAL_STORAGE

android.permission.BLUETOOTH_ADMIN

android.permission.CHANGE_WIFI_STATE

android.permission.ACCESS_LOCATION_EXTRA_COMMANDS

android.permission.DISABLE_KEYGUARD

android.permission.SYSTEM_ALERT_WINDOW

android.permission.BROADCAST_STICKY

Pushwoosh/pushwoosh-

phonegap-3.0-plugin

What do PhoneGap Plugins offer?

“There is a plugin

for everything”

What do PhoneGap Plugins offer?

• Featured/Core PhoneGap plugins provide basic device features

• Geolocation

• Globalization

• InAppBrowser

• Keyboard

• Media

• Dialogs (Notification)

• SplashScreen

• StatusBar

• Vibration

• Whitelist

• (Whitelist legacy version)

• Device Motion (Accelerometer)

• Battery Status

• Camera

• Media Capture (Capture)

• Device Orientation (Compass)

• Network Information (Connection)

• Console

• Contacts

• Device

• File (FileSystem)

• File Transfer

User interface

User interface

User interface

Security

Storage

Social networks

Payment

• In app purchases

Payment related

• PayPal

Other

• Push notifications

Other

• Update JavaScript code of the PhoneGap application

o Update without the app store

Alternatives for the PhoneGap Plugin Store

Most JavaScript Frameworks have a custom plugin store

• Some plugins are also in the main PhoneGap plugin store

• Also paid plugins

Alternatives for the PhoneGap Plugin Store: Examples

Ionic

• >100 plugins

• Free and paid

• Only 19 Ionic plugins in the

PhoneGap Plugin store

•

Alternatives for the PhoneGap Plugin Store: Examples

Alternatives for the PhoneGap Plugin Store: Examples

jQuery Mobile

• >500 free JavaScript plugins

(Plugins which don’t require a

JavaScript bridge)

Performance of PhoneGap Plugins

Case study: Data Storage

Case Study: Data Storage

Database Storage

Store 100 books, request

all books, delete 50

books and finaly request

all books again

File Storage

Storing and retrieving file

contents native and

through Cordova

Key-Value Pairs

Save and retrieve a

string (1000 iterations)

Storage strategies in Cordova

Storageimplementations Androiddevice

iOSdevice

Database

WebSQL ■ ■

IndexedDB þ ý

SQLite(plugin) þ þ

File FileAPI(plugin) þ þ

Variables

LocalStorage þ þ

NativeStorage þ þ

Not supported

Supported

■ Deprecated (but supported)

NativeStorage vs classic LocalStorage

NativeStorage LocalStorage

Plugin HTML5

Executed on the native side Executed in the webview

Guaranteed persistent storage NO guaranteed persistent storage

All primitive types (string, int,

double, boolean) and objects(!)

Only strings

https://www.npmjs.com/package/cordova-plugin-nativestorage

Database performance

Store 100 books, request

all books, delete 50

books and finaly request

all books again

SQLiteWebSQLSQLite PluginIndexedDB SQLite

SQLite

WebSQL

SQLite Plugin

IndexedDB

Duration of

total operation

time

97 1398 1855 2140(ms)

Database performance [Android]

SQLite

WebSQLSQLite Plugin

Duration of

total operation

time

1925 2235 2467(ms)

Database performance [iOS]

File storage performance

Storing and retrieving file

contents native and

through Cordova

SQLite SQLite

File API (plugin)

https://github.com/apache/cordova-plugin-file

File storage performance [Android]

0

500

1000

1500

2000

2500

3000

3500

4000

4500

0 5 10 15 20

Rea

d/W

rite

du

rati

on

(ms)

File volume (Mb)

Cordova Write

Cordova Read

Android Read

Android Write

Read overhead in Cordova Android

Native read

Cordova Read Overhead

Get JS message

(our text)

Resolve to local URL

Cordova Write Overhead

Write overhead in Cordova Android

JS Processing command

Execute call delay

Blob creation

Native write

A blob

represents a

byte sequence

File storage performance [iOS]

https://github.com/apache/cordova-plugin-file

0

1000

2000

3000

4000

5000

6000

7000

8000

0 2 4 6 8 10 12

Rea

d/W

rite

Du

rati

on

(m

s)

Read/Write volume (MB)

Cordova vs iOS (iphone 6 [9.2])

iOS Read

iOS Write

Cordova iOS Read

Cordova iOS Write

Read overhead in Cordova iOS

Native read

Cordova Read Overhead

Send over bridge

Convert to JSONArray

Cordova Write Overhead

Write overhead in Cordova iOS

JS Processing command

Blob creation

Native write

Key-value storage performance

SharedPreferencesNativeStorage (plugin)localStorage NSuserDefaults

Save and retrieve a

string (1000 iterations)

Plists

https://www.npmjs.com/package/cordova-plugin-nativestorage

Key-value storage performance

GET: <1 ms for all implementations

SET: <1 ms for all implementations, except NativeStorage (1,8 ms)

GET: <1 ms for all implementations

SET: <1 ms for all implementations

Cordova overhead +

asynchronous

Plugins and Security

Plugins and Security

The resource could not be loaded because the App Transport Security

policy requires the use of a secure connection.

Intro

Whitelist Plugin

• Featured PhoneGap Plugin

• Automatically added to each PhoneGap project

Adaptation of the whitelist plugin

Mohamed Shehab and Abeer AlJarrah. 2014. Reducing Attack Surface on Cordova-based Hybrid Mobile Apps. In Proceedings

of the 2nd International Workshop on Mobile Development Lifecycle (MobileDeLi '14). ACM, New York, NY, USA, 1-8.

60 % of PhoneGap apps grants open access to all domains

Personal experience: it’s probably even worse…

History of the whitelist plugin

• Cordova Whitelist doesn’t work

o On Android API 10 and below (=2.3.3 Gingerbread)

o On Windows Phone 8 for iframes and XMLHttpRequest

o On Cordova versions below 2.9

example.com whitelisted example.com.evil.com also accepted

Hot code update plugins

• Allow PhoneGap applications to be updated without the app store

Hot code update plugins

APK

Webview

…Assets

WWW …

……

Updated www

<Location outside of the APK>

Meteor-cordova-update-plugin

Meteor Todo App

Man-In-The-Middle Attack

iptables -t nat -A PREROUTING -i wlan0 -p tcp --dport 80 -j

DNAT --to 192.168.1.100:8080

Man-In-The-Middle Attack

Man-In-The-Middle Attack

Actual content,

loaded into the

application

Replaced the HTML content

of the response

Result

Okay, but what is the point?

Actual content,

loaded into the

application

Insert some extra

JavaScript code

Result

App launches as always, nothing special?

Pictures from the device

How to protect against this?

Conclusion Security of PhoneGap Plugins

What does the plugin do?

What is the quality of the code?

Is the plugin up-to-date (store & app)?

How do I use the plugin?

Do I still use every plugin in my

application?