Securing your apps

Securing your apps

Fliplet apps can have each of their screens and data sources secured so that they can only be accessed when certain conditions are met. Take the following example:

My app has 5 screens, one being a login screen with email validation based on a Fliplet data source. I want to secure the other 4 screens of the app so that they can only be accessed by logged-in users.

Such security rule can be set up as follows:

img

Custom app security rules

If you need more control on your security rules, you can also write your custom conditions using Javascript. When doing so, these variables are available to the context:

  • server (Boolean) true when the security rule is being checked for a webapp
  • client (Boolean) true when the security rule is being checked for a native app on iOS/Android/Windows
  • page (Object { id: Number, title: String }) the page that is running the security rule
  • session (Object) the user’s session, when available. Contains the same attributes found in the v1/session endpoint
  • ipRangeCheck (Function) please check the next section on IP address whitelisting/blacklisting for usage

Here follows an example that protects all screens (aside from the loginScreen) from being accessed unless the user is logged in against a dataSource and the column foo of his user has value bar.

When those conditions are not met, an error is raised and the user is redirected (see navigate) to the loginScreen:

var loginScreen = 123;
var hasSession = session && session.entries && session.entries.dataSource;
var isAllowed = hasSession && session.entries.dataSource.data['foo'] !== 'bar';

if (server && page.id !== loginScreen && !isAllowed) {
  error = true;
  navigate = { action: 'screen', page: loginScreen, transition: 'slide.left' };
}

When running your security code on mobile devices you can also make use of the Javascript variables available in the browser, like Modernizr and Fliplet.Env.

As an example, targeting an iOS or Android device can be achieved like this:

// this rule only runs on mobile devices
if (client) {
  if (Modernizr.iOS) {
    // this will only run on iOS
  } else if (Modernizr.Android) {
    // this will only run on Android
  }
}

Whitelist or Blacklist access by IP address

Using the ipRangeCheck function you can write a custom rule to check if the user’s IP address is within a range:

if (server && !ipRangeCheck(ipAddress, "170.18.0.1/24")) {
  error = 'Not in range'
  errorMessage = 'Please come to the office if you need to use this app'
}

Or blacklist a single IP (note the missing ! negation in the block condition):

if (server && ipRangeCheck(ipAddress, "170.18.0.1/24")) {
  error = 'You are blacklisted'
  errorMessage = 'Nothing to see here.'
}

Or redirect the user to a specific screen of the app with a custom message:

if (server && !ipRangeCheck(ipAddress, "170.18.0.1/24")) {
  navigate = { page: 123, action: 'screen' }

  // this is optional and it's sent as a GET query to the screen
  errorMessage = 'IP is not in range, please come to the office'
}

Or redirect the user to another URL:

if (server && !ipRangeCheck(ipAddress, "170.18.0.1/24")) {
  navigate = { url: 'https://fliplet.com' }
}

Your code must be able to handle connections from both IPv4 and IPv6 addresses. As an example, the ipAddress variable may have values such as 2001:db8:3333:4444:5555:6666:7777:8888 when the user is connected via an IPv6 address.

Additionally, please note that ipRangeCheck always returns true when run on the client.

Since app hooks allow javascript code in the custom rule, you’re free to declare the list of whitelisted IPs as follows:

var allowed = [
  "102.1.5.2/24",
  "192.168.1.0/24",
  "106.1.180.84"
]

if (server && !ipRangeCheck(ipAddress, allowed)) {
  error = 'Can\'t view the app from there.'
  errorMessage = 'Your IP address ' + ipAddress + ' is not in range. Please come to the office!'
}

Note: this feature only works on webapps. Please target them using the server boolean flag as shown above in the examples.

Sample error page for the above code:

img

More docs on the ipRangeCheck function can be found here

Session expiration

When your app is using the login component connected to a Data Source, you can enable two optional features to improve security for your users:

  • Require the user to reauthenticate after a certain time
    • The user will be logged out after the defined period of time (in minutes) has past since the login date.
    • Configure this via the sessionMaxDurationMinutes option as per example below.
  • Log the user out when the app has not been used for a period of time
    • The user will be logged out when the session has been idle for the defined period of time (in minutes) since the last recorded activity
    • Configure this via the sessionIdleTimeoutMinutes option as per example below.

These option must be set in the Data Source definition JSON via the “App data” section of Fliplet Studio, in the settings of your login Data Source.

The following setup will ensure a user is logged out 2 hours past the login date:

"sessionMaxDurationMinutes": 120

Likewise, this setup will automatically log the user out when the app is inactive for 30 minutes:

"sessionIdleTimeoutMinutes": 30

The two options can also be used together:

Data Sources