Hands on Firefox-OS Apps - Introducing CSP

I’m a die-hard fan of Mozilla Firefox. I always wanted to contribute to Mozilla in one or the other ways. This year only, it happened that I started getting involved in Open Source projects. Good Luck that I was familiar with Git as I used it merely for the purpose of storing my college projects :). Mozilla’s Open Source projects inspired me to contribute this time. Meanwhile, I heard the news of FIREFOX-OS, yeah, FIREFOX-OS(FOS) is a Linux-based open source operating system for smartphones and tablet computers being developed by MOZILLA.

So the journey begins from here. I found an article to get started with developing FIREFOX-OS Applications, apps nothing more than Open web pages, that is HTML5 Apps. Yeah! right, directly reuse the prior knowledge about front-end development to create awesome applications running on firefox OS phones.

Here it is! Beautiful official FIREFOX-OS website.

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);


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
/* 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) {
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;


comments powered by Disqus