Cross side scripting with Cordova/ionic application

Question

Cordova will not allow a get request To another URL. enter image description here

The internet points to this plugin https://github.com/agamemnus/cordova-plugin-whitelist

However it has zero infomation on how to install it? This is my first ionic cordova application.

QUESTION How do I allow Cross-side-scripting so that I can hit filltext from cordova application using this plugin?

JS:

        var results = document.getElementById('results');
        var r = new XMLHttpRequest();
        r.open("GET", "http://www.filltext.com?rows=10&f={firstName}", true);
        r.onreadystatechange = function () {
          if (r.readyState != 4 || r.status != 200) return;
          var data = JSON.parse(r.responseText);
          console.log(data);
          for (var i=0;i<data.length;i++){
                results.innerHTML += '<li>'+data[i].f+'</li>';
          }
        };
        r.send();

UPDATE

enter image description here Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'". Config.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.megster.nfc.reader.ionic" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>NFC Reader</name>
  <description>
        PhoneGap NFC Reader rewritten with Ionic Framework
    </description>
  <author email="[email protected]" href="https://github.com/don">
      Don Coleman
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
</widget>

index.html

 <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://cordova.apache.org">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/filters.js"></script>
    <script src="lib/ngCordova-nfc/nfc.js"></script>
    <script src="js/app.js"></script>

aorfevre aorfevre · Accepted Answer · 2015-06-11T01:13:12

To install a cordova plugin, here is the standard synthex

cordova plugin add cordova-plugin-whitelist

OR your can point directly to git :

cordova plugin add https://github.com/agamemnus/cordova-plugin-whitelist

Then if your config.xml has already

if your config.xml has the access origin line : <access origin="*"/>

The most simple way (but most unsecure) is to add this line to your index.html header.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://cordova.apache.org">

See more info on plugin page https://github.com/agamemnus/cordova-plugin-whitelist

Cross side scripting with Cordova/ionic application

UPDATE

1 Answers