Cordova - refusing to connect to api from device (content security policy)

I am working with Visual Studio Tools for Apache Cordova.

When I build an app with Ripple, everything is fine. But when I create it on my android device, the app refuses to connect to my external API.

This is the error in the JavaScript Console log:

Refused to connect to http://XXX.herokuapp.com/api/posts/0/5 'because it violates the following content security policy directive: "default data" src ": gap: https: //ssl.gstatic. com 'unsafe-eval' ".

Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

and

Error: Failed to execute 'open' on 'XMLHttpRequest': Refused to connect to http: // XXX. herokuapp. com / api / messaging / 0/5 '

My API is built with Node.js and expresses. My server.js has Access-Control-Allow-Headers, but it still doesn't work on my device.

Server.js:

//'use strict';

var express    = require('express');        // call express
var app        = express();                 // define our app using express
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var router = express.Router();
var fs = require('fs');
var path = require('path');

app.use(bodyParser.json()); // parse application/json
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
app.use(bodyParser.urlencoded({ extended: true })); // parse application/x-www-form-urlencoded
app.use(methodOverride('X-HTTP-Method-Override')); // override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT

app.use(express.static(__dirname + '/www')); 

// middleware to use for all requests

app.use(function (req, res, next) {
    console.log('in middleware');

    res.setHeader('Access-Control-Allow-Origin', '*');//allowing ripple localhost get access to node localhost(5432).
    console.log(req.header);
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers',"X-Requested-With,Content-Type");
    //res.setHeader('Access-Control-Allow-Credentials', true);
    // Pass to next layer of middleware
    next();
});


require('./app/routes')(app); // pass our application into our routes -- must
app.use('/api', router);//put this line beofre passing app to routes.js for it to take effect.

var port = process.env.PORT || 8080;
app.listen(port, function() {
  console.log("Listening on " + port);
});

exports = module.exports = app;   // expose app

      

I also tried adding a meta tag to my index.html file, but with no success.

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:8080 http://XXX.herokuapp.com">

      

Any ideas what the problem might be?

+2


source to share


1 answer


From the error message. You are calling an Ajax request in your JS. But you added http://XXX.herokuapp.com

after script-src

that only allows the script content to be loaded. To allow the Ajax request, http://XXX.herokuapp.com

you need to add after connect-src

like this:

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

      

Alternatively, you can add a URL after default-src

that sets the default policy to allow everything (loading script / CSS content, Ajax request, etc.). So the meta tag should look like this:



<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://XXX.herokuapp.com data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

      

For details on the content security policy, you can refer to the Security Policy Reference Guide .

+3


source







All Articles