Whitelisting Phonegap Build Apps And Connecting To Internet

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

There are only a few scenarios where you do not want your app to connect to the internet, but most of the time you will need your app to connect to a back end somewhere. We can enable and restrict network access in our application by whitelisting the domains that we wish to access with out app.

Whitelisting in Cordova has been moved to a separate plugin after Cordova version 4.x. If you are looking for information regarding the use of Whitelisting on pre-cordova 4.x versions then you should read the documentation here.

I assume that you are following along with my Free Phonegap Build Beginner course here. If you are creating a new app then you should always use the latest version of Cordova / PhoneGap.

Installing Whitelist plugin in Phonegap build

Before we take a look at any of the options that you can set, we will first make sure that we have the plugin installed. We can install the plugin by adding the <plugin> tag to the config.xml file as follows

Learn more on how to add plugins here.

 

Types of Whitelist

There are basically three types of Whitelists.

  1. Navigation Whitelist
  2. Intent Whitelist
  3. Network Request Whitelist

Let’s take a look at them one by one.

1. Navigation Whitelist

The web view in a PhoneGap opens the html, js and css files that you have placed inside the www folder. A thing to note here is that this does not mean that the web-view acts as a server of any sort, so you cannot use php files in place of html files. With that said there will come a time when you might want to navigate the web-view to a webpage, this can be done by whitelisting the URL in the config.xml file using the <allow-navigation> tag. This sort of whitelisting is known as Navigation Whitelist and can be done as follows

Note that the above code is taken from the Cordova-Plugin documentation here.

 

2. Intent Whitelist

This kind of whitelist is used to control which URL the app is allowed to open. Note that this will by default open the URL in the system’s default browser. This whitelist does not apply to plugins, so your plugins will be able to access any back-end resources that the plugin needs to work properly.

Intent whitelist can be by adding the <allow-intent> tag to the config.xml file as shown below

Note that the above code is taken from the Cordova-Plugin documentation here.

You can allow all URLs to open as follows

Such a method of allowing all URLs is not recommended and should be avoided.

 

3. Network Request Whitelist

Network Request whitelist will allow you to whitelist domains that your app need to access for various requests such as images, XHR, etc. This kind of whitelist is useful when making XHR requests to a remote server to get data, whatever that data might be. In short, this will allow your app to access the back-end for any data. A thing to note here is that this whitelist is to be used with Content Security Policy.

To whitelist a domain you need to use the <access> tag in the config.xml file as shown

Note that the above code is taken from the Cordova-Plugin documentation here.

Here we are just whitelisting the domains that the app can request data from, but using the Content Security Policy(CSP)  meta tag we can even drill down as to what resource the app can access over which domain. You can read more about CSP here.

 

Conclusion

In this post we saw Navigation Whitelist which allows you to control navigation of the web-view itself, Intent Whitelist which allows you to control which URLs your app is allowed to open and Network Request Whitelist which allows you to control what network requests are made.

Making sure that the users do not access content or receive data from any other domain that you do not specify is an important feature that all developers should implement to tighten the security of the app.

Watch Video Tutorial Here:

 

Full Course Curriculum : Click here

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)