Firefox os privileged app error : call to eval() blocked by csp at jquery 1.9.1

Question

I'm making the firefox OS webApp by jQuery.

The application type is privileged for using systemXHR.

So I define the permission at manifest file. App is working well at simulator.

But when I push the app to device and click an any button, CSP error detected.

Error: Error: call to eval() blocked by CSP
Source File: app://0cd689b3-a514-4a1c-b1c4-efe372189761/js/jquery-1.9.1.js Line: 603

Device information

• OS version : 1.1.0.0.-prerelease
• platform version : 18.0
• Git commit info : 2013-05-01 19:48:40

Example code is

<div data-role="page" id="signinPageId">
  <script src="js/signin_controller.js"></script>
  <div data-role="header">
    <h3>Sign In</h3>
    <a href="#" data-icon="arrow-l" data-rel="back">Back</a>
  </div>
  <div data-role="content">
    <a id="signinBtn" href="#" data-role="button" class="ui-disabled">Sign In</a>
  </div>
</div>

Other script codes are described at signin_controller.js

function enableSigninBtn(inputEl){
    if(inputEl.val().length==0){
        $("#signinBtn").addClass("ui-disabled");
    }
    else{
        $("#signinBtn").removeClass("ui-disabled");
    }
}
................
................
$('#signinPageId').on('pagebeforeshow',function(){
    $('#emailForm').bind('keyup',function(){
        if($(':input[type=password]').val().length)
        {
            enableSigninBtn($(this));
        }
    });
    $('#passwordForm').bind('keyup',function(){
        if($(':input[type=email]').val().length)
        {
            enableSigninBtn($(this));
        }
    });
    $('#signinBtn').bind('click',function(){
        initSignIn($(':input[type=email]').val(),$(':input[type=password]').val());
    });
});

So I define the csp at manifest file

"csp" : "default-src *; script-src 'self' 'unsafe-eval'; object-src 'none'; style-src 'self' 'unsafe-inline'",
"default_locale": "en",
"type": "privileged",
"permissions": {
    "systemXHR": {
        "description": "Required for comunication with otehr sever"
        }
     }

How can I avoid this csp?

Bookrest

Answer 1

You can find information about privileged apps' CSP rules on MDN: https://developer.mozilla.org/en-US/docs/Web/Apps/CSP

I think by including unsafe-eval you're causing this error, because the CSP policy error you pasted is complaining about an unsafe eval.

Exiguous

Thanks for your comment. But csp violation is occurred except unsafe-eval. sample page is not an first page. so i've appended <script> tag under div page. This is cause of problem. If i append a script when a page is loaded, csp is occurred. But if this script is defined at document.ready of first index page, not violated. But i want to divide a script to several files like above sample page. Also I tried to add dynamically with $.getScript. But this function make syntax error at function of first line. If first line is not a function like $('selector'), not well-formed error is occurred. – Bookrest

Actualy by "including unsafe-eval" you allow the JS to use eval(). So include it to work around this issue or remove eval in all your JS. – Herring

Answer 2

Actually there is an open issue related to this in jquery: http://bugs.jquery.com/ticket/13862

Firefox OS privileged apps using csp like this: "default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"

(https://developer.mozilla.org/en-US/Apps/Developing/Packaged_apps)

So you are unable to relax CSP with that line in your manifest.

The only way to avoid this is to use a CSP compliant framework.

Piscatorial

Answer 3

Instead of using a jQuery AJAX call, you can directly call your login service using XHR as:

var xhr = new XMLHttpRequest({mozSystem: true});

This way you won't be using jQuery's eval().

Colly