How to get hosted nodejs website to run on cordova?

Question

I have a website(HTML5 Game) that uses NodeJS to manage a database among other things, i am trying to port it too android and IOS using Cordova, but i do not know how to get Cordova to load the website using a URL, i need it to load into the URL because of all the server side stuff. Does anyone have any advise on how to do this?

I've looked at countless articles/posts but every time i test it out by clicking on index.HTML it doesn't redirect/show my website.

I have tried several plugins and even just using simple javascript to load the website but nothing has been working.

i get the following error on when i open the index.html

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).

my config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloCordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="http://mysite.us*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>
<cordova>
    <access origin="http://mysite.us*"/>
</cordova>

My index.js

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
            window.location="http://mysite.us";
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        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);
    }
};

app.initialize();

Answer 1

Here is the code I use:

  <plugin name="cordova-plugin-whitelist" source="npm" />
  <allow-navigation href="https://example.org/*" />
  <allow-intent href="https://example.org/*" />
  <access origin="https://example.org/*" />

It doesn't need to be in a platform tag and you will obviously need to replace the url with your own.

If you need you select everything in a folder or domain, you can use the wildcard: * (Like shown above)

EDIT:

Keep in mind that you will also need to whitelist like that all resources loaded by your webapp like for example: If you load jQuery via a cdn, then you will need to whitelist that url or the cdn's whole domain name.

Remember too that if outside urls were blacklisted in the first place is to prevent Xss injection. If you whitelist too much urls, people may be able to load a script from a source you have whitelisted so to deceive a user via your app.

EDIT 2:

You can also simply use an iframe instead of using window.location

<iframe src="https://example.com/nodejs-webapp/" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

And this goes in the head tag

<style>body{margin:0;}</style>