What is the Content Security Policy error related to XHR-based applications in Firefox OS's Index.html file?

I encountered this issue while checking the console.

The Content Security Policy on the page is blocking a resource from loading at self ("script-src app://fa91d835-176d-4fe7-bd06-fe7f57f11b68").

As part of creating a Firefox AJAX app to fetch data from my CodeIgniter controller, I added a JavaScript function in an external file. However, when I inspect the console, only the CSP error is displayed.

This is the code from 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>

Check out the xhrapp.js function below:

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


}

If anyone has any suggestions or solutions, please feel free to provide your assistance. Thank you!

Answer №1

Avoid using the attribute onclick='' as it breaches the Content Security Policy (CSP)

When incorporating jQuery, replace it with the following code snippet in your xhrapp.js file:

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

Modify your HTML to look like this:

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

To learn more, visit: https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS/CSP

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Database connection error: Authentication protocol requested by server not supported

I have been struggling with the issue outlined in this link: MySQL 8.0 - Client does not support authentication protocol requested by server; consider upgrading MySQL client Even though I have tried following the recommendations, I am still encountering e ...

If the window width is less than the specified value, hide the DIV and replace it with a

I came across a discussion about hiding a div if the screen is narrower than 1024px, and I'm looking to implement something similar based on the quoted code below. Essentially, I want to hide one div (id="krug_wide") if the window width is less than 1 ...

Modify path and refresh display upon ajax call to node server

Recently, I made the decision to utilize a Node server as a proxy for making API calls to third-party public APIs from my front end. After successfully sending a request to my Node endpoint and then to the third-party API, I received the expected response. ...

What is the best way to eliminate HTML <li> bullets using codebehind?

When working in codebehind, I often create an HTML list using the following method: HtmlGenericControl list = new HtmlGenericControl("ul"); for (int i = 0; i < 10; i++) { HtmlGenericControl listItem = new HtmlGenericControl("li"); Label textLabel ...

Updating an array within an object using JSON

Check out the structure of my JSON response: "_id" : 537, "quizzes" : [ { "wk" : 1, "score" : [ 10 ] }, { "wk" : 2, "score" : [ 8 ...

Tips for ensuring all data is properly set before saving in mongoose

Struggling to update undefined or defined values in Mongoose due to the need to await their assignment. It seems like the code is not saving the data because USER.save() is executed before the values are set. How can I ensure that the data is updated/set ...

What is the best way to retrieve the state value in react once it has been changed?

How can I ensure that the react state 'country' is immediately accessible after setting it in the code below? Currently, I am only able to access the previous state value in the 'country' variable. Is there a method such as a callback o ...

Retrieve dashboard configurations in AngularJS by making an $http request prior to initiating the dashboard controller

I am currently immersing myself in Angular and tackling a complex dashboard framework all built with Angular. Prior to loading the controllers, I need to fetch various dashboard settings from the server using $HTTP. These settings play a crucial role in de ...

What could be the reason for the absence of {{ list.title }} on display

I'm currently learning how to develop my first MEAN stack app by following a tutorial on YouTube. However, I've encountered an issue where the title of the list is not displaying correctly. I'm using Insomnia to create the lists. Here's ...

Sending a parameter to multiple controllers simultaneously using an ActionLink in MVC4

Is it possible to pass a value from an action link to multiple controllers? In my current scenario, the Index page utilizes ajax requests to display 3 partial views. I have modified these partial views to include links to a report and now I want to pass t ...

AngularJS: The power of dynamic HTTP POST parameter names

Utilizing an API to update profile information allows for the addition of a nickname, email, phone number, or password in the request parameters, which will then be updated in the database. When updating a specific field, such as Nickname: { "nickname": ...

Understanding the res.render method in JavaScript can be a bit tricky at first

In my spare time, I have been immersing myself in coding lessons and have encountered some puzzling aspects of the code: Firstly, there is a confusion surrounding the action attribute in HTML Secondly, this particular piece of code is causing me some b ...

button to dim the image collection

On the top right corner of my image gallery, there's a button that, when clicked, creates an overlay darkening the image. I'm trying to figure out how to toggle this effect on and off with a click. Any suggestions on how I can achieve this? Here ...

Navigating to a different page in the app following a document update: a step-by-step guide

I am facing an issue with a page where I am trying to print a specific DIV using the script below... function printReceiptDiv() { var divElements; if (vm.isDLR) { divElements = document.getElementById("DLRreportCont ...

The jQuery show/hide functionality is malfunctioning

In my PHP code, I have the following loop: foreach ($sid as $key => $value) { $sql = " a sql query "; $vehicle->rowQuery($sql); $numRows = $vehicle->rows; while ( $data = $vehicle->result->fetch_assoc()) { $ ...

Changing boolean values in Ruby on Rails articles

Within my 'comment' model, I have a boolean value that can be either true or false. The following excerpt is from my controller comments_controller.rb: class CommentsController < ApplicationController before_action :find_comment, only: ...

Utilizing Ruby on Rails to dynamically load distinct partials based on radio button selections

I am interested in dynamically loading different partials containing generated content into a form using AJAX. Any suggestions on how to accomplish this? For instance, let's say I have a form with radio buttons for "fruits" and "vegetables". When I ...

A step-by-step guide on splitting an element into two separate elements using jquery

I have the following code snippet: <h4>user (role) on 26 Nov 2018 20:39:42 +00:00:</h4> My goal is to transform it into this structure: <h4>user (role)</h4> <p>on 26 Nov 2018 20:39:42 +00:00:</p> The <h4> eleme ...

React treats flat arrays and nested arrays in distinct ways

After some experimentation, I discovered an interesting behavior in React when passing nested arrays. Surprisingly, React renders the items properly without complaining about missing keys on the elements. const stuff = 'a,b,c'; // Nested Array ...

Looking for someone to break down this Typescript code snippet for me

As a Javascript developer, I am currently diving into an unfamiliar TypeScript code block within a project. Here is the code snippet: ViewModel newPropertyAddress = new ViewModel(){name, previousPro = oldValue } ...