Embed Size (px)
Citation preview
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?
