Hands on Firefox-OS Apps - Introducing CSP

Getting started with FOS-App: Calculator

I started developing an App for FOS, though a simple Calculator App performing some basic arithmetic calculations. I opted this app just to give a try and get familiar with the process that goes around. I successfully created the app using HTML5, CSS3 and JavaScript. It’s so simple no, easily have an FOS app from your already created HTML5 driven app.

I follow the procedure to submit an FOS app on firefox marketplace. I use App Validator just to ensure me that my App is too good :). App Validation failed with errors and warnings. Crap! Wait! What’s that? CSP validation errors and warnings. Ah, that’s what Mozilla always focus on, Security.

A primary goal of CSP is to mitigate and report XSS attacks. XSS attacks exploit the browser’s trust of the content received from the server. Malicious scripts are executed by the victim’s browser because the browser trusts the source of the content, even when it’s not coming from where it seems to be coming from.

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware.

CSP is designed to be fully backward compatible; browsers that don’t support it still work with servers that implement it, and vice-versa. Browsers that don’t support CSP simply ignore it, functioning as usual, defaulting to the standard same-origin policy for web content. If the site doesn’t offer the CSP header, browsers likewise use the standard same-origin policy.

Here is a list of Default CSP restrictions

eval() is one such Default_CSP_restriction and was also the core of my Calcultor app :)

Dealing with CSP

Include ‘use strict’ in your script files. Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a “strict” operating context. This strict context prevents certain actions from being taken and throws more exceptions.

A nice Reference to it by Mozilla. Strict_mode

Initialized my own load method named init as

var Calculator = {
  init: function init() {
    document.addEventListener('mousedown', this);
  },
};
 
window.addEventListener('load', function load(evt) {
  window.removeEventListener('load', load);
  Calculator.init();
});

Functions like onclick, onmousedown, and so on called within HTML file are restricted. So I suggest using data-type attribute and listening events in the method defined as handleEvent

<input type="button" id="_BUTTON-ID" value="_Submit" data-type="submit" />
<input type="text"   id="_BUTTON-ID" value="_TextMe" data-type="text" />

handleEvent: function handleEvent(evt) {
  this.target = evt.target; // get the target/caller invoking it
  var value = this.target.value,   // get the value of attribute *value* of caller
      id = this.target.id;         // get the id of caller
 
  switch (this.target.dataset.type) {
    case 'submit': // check the data-type
      this.CALL_DESIRED_FUNCTION_NAME(*params*) // call event driven function
      break;
      /* all cases as per your data-type attribute goes here...
       don't forget to use *break;* unless more than one data-types
       need to behave similar on events. */
  }
}

After adopting CSP rules, I headed towards designing my own eval method since it is restricted by CSP. Below is the code to execute valid arithmetic expressions without using the JavaScript function eval().

Note: this.disp.value is containing the arithmetic expression given as an input by the user in the text field.

compute: function compute() {
  var sign = 1;
  if (this.disp.value[0] == '-') {
    sign = -1;
  }
 
  this.disp.value = this.calculate(this.disp.value,sign);
  return this.disp.value;
},
 
calculate: function calculate(input, sign) {
   var opr_list = {
      add : '+',
      sub : '-',
      div : '/',
      mlt : '*',
      mod : '%',
      pow : '^'
  };
 
   opr_list.opr = [[ [opr_list.mlt] , [opr_list.div] , [opr_list.mod]],
            [ [opr_list.add] , [opr_list.sub] , [opr_list.pow] ]];
 
   var input = input.replace(/[^0-9%^*\/()\-+.]/g,'');
   var output, i, n, re;
 
   for(i = 0, n = opr_list.opr.length; i < n; i++ ) {
      re = new RegExp('(\\d+\\.?\\d*)([\\'+opr_list.opr[i].join('\\')+'])(\\d+\\.?\\d*)');
      re.lastIndex = 0;
      while(re.test(input) ) {
        output = this.compute_result(opr_list,sign*RegExp.$1,RegExp.$2,RegExp.$3);
        if (isNaN(output) || !isFinite(output)) {
          return output;
        }
        input  = input.replace(re,output);
      }
   }
 
   return output;
},
 
compute_result: function compute_result (opr_list, a, op, b) {
 
  switch(op){
    case opr_list.add: return a+b; break;
    case opr_list.sub: return a-b; break;
    case opr_list.div: return a/b; break;
    case opr_list.mlt: return a*b; break;
    case opr_list.mod: return a%b; break;
    case opr_list.pow: return Math.pow(a,b); break;
    default: null;
  }
}

About the App

Browse the full source code here

Download the App at Firefox Marketplace

My next FOS-App is coming soon… :)