CODEWITHSUNDEEP
javascriptcontent-security-policy
user6821889
user6821889

Reputation: 13

Refused to connect to URL because of violation of Content Security Policy

This is the error in my console:
this is the error in my console

This is the actual code of the meta:

<meta http-equiv="Content-Security-Policy" content="connect-src &apos;self&apos; data: gap: https://ssl.gstatic.com ; style-src &apos;self&apos; &apos;unsafe-inline&apos;; media-src *">

I am developing an android app in cordova. I am trying to retrive data from the scratched URL in the photo. this is the index.html

html>
<head>
<body>


        <div role="main" class="ui-content">
            <div class="app">
        <h1>Apache Cordova</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>

and this is the index.js

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
      document.addEventListener('loadcities', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
    app.receivedEvent('deviceready');
    app.receivedEvent('loadcities');
},

// Update DOM on a Received Event
receivedEvent: function(id) {
  if (id === 'deviceready') {
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    console.log('Received Event: ' + id);}
    else if (id === 'loadcities') {
      var url = "http://uiiuh"
        $.getJSON(url).done(function(response){
                    if(!response.length){
                        console.warn("Empty list of cities");
                    }
                    config.cities = response;
                    $('body').trigger('city-data');
                }).fail(function(data, status, error){
                    console.error("Something went wrong retrieving the cities via API")
                });
        }

    }

};

app.initialize();

I want to show the retrieved data only in console for now.

Upvotes: 0

Views: 4877

Answers (1)

dontcallmedom
dontcallmedom

Reputation: 2470

The Content-Security-Policy restricts connect-src to self, data:, gap: (is that a Cordova thing?), and https://ssl.gstatic.com — this means that any attempt at loading a resource from a URL that doesn't match one of this will be blocked.

Since the script tries to load JSON data from http://uiiuh, it is blocked; you need to add http://uiiuh to the list of allowed sources in the CSP rule.

Upvotes: 2

Related Questions