[SOLVED] firefox OS Content Security Policy error XHR based application in Index.html?

firefox OS Content Security Policy error XHR based application in Index.html?

I got this error in console.

Content Security Policy: The page's settings blocked the loading of a resource at self ("script-src app://fa91d835-176d-4fe7-bd06-fe7f57f11b68").

I tried to create a firefox ajax app to retrieve some data from my codeigniter controller. When I check the console it only returns the error. I've only added javascript function outside file. But its saying CSP error.

My Index.Html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Privileged app</title>
        <meta name="description" content="A privileged app stub">
 <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/app.css">
<script type="text/javascript" src="js/app.js" ></script>

        <script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
        <script type="text/javascript" src="js/xhrapp.js" ></script>
   <link rel="prefetch" type="application/l10n" href="data/locales.ini" />
        <script type="text/javascript" src="js/libs/l10n.js" ></script>
    </head>
    <body>
        <section>
            <h1 data-l10n-id="app_title">Privileged empty app</h1>
            <p data-l10n-id="app_description">This app is empty. Fill it with your own stuff!</p>
            <p id="message"></p>
            <input type="text" id="ajax_data" value="">
            <a href="" onclick="xhrapp();"><button>Click</button></a>
        </section>
    </body>
</html>

Function xhrapp.js

function xhrapp(){
    var a=$("#ajax_data").val();
    alert(a);
    console.log("in function");
    var xhr = new XMLHttpRequest({
            mozSystem: true
    });
    // xhr.open("POST", "http://blac.byethost7.com/home/index.php/welcome/demo");
    xhr.open("POST", "http://localhost/shop/home/home/demo");
    xhr.send(a);
    xhr.onload = function() {
    if (xhr.status == 200) {
        console.log(xhr.responseText);
        // alert(xhr.responseText);
      }
    };


}

Please help me!

Solution

You can't use attribute onclick='' since it violates the CSP

Since you are using jquery, add this instead in your xhrapp.js

$(document).ready(function(){
   $("#mybutton").on("click", xhrapp);

});

Change your HTML to this:

<button id="mybutton">Click</button> <!-- <a> is not needed -->

For more info check: https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS/CSP