Cordova - デバイスからのAPIへの接続が拒否されました（コンテンツセキュリティポリシー）

Question

私はVisual StudioのApache Cordova用ツールを使用しています。

私がRippleでアプリを構築すると、すべてうまくいきます。しかし、私はアンドロイドデバイスにそれを構築すると、アプリは私の外部APIへの接続を拒否します。

これはJavaScriptコンソールログでエラーです：

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

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

そして：

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

私のAPIは、Node.jsので構築して表現しています。私のserver.jsにはAccess-Control-Allow-Headersがありますが、それでも私のデバイスでは動作しません。

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's localhost get access to node's 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 

私も私のindex.htmlファイルにメタタグを追加しようとしたが、なし、成功しています。

<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"> 

何か問題がありますか？

Answer 1

エラーメッセージから。 JSでAjaxリクエストを呼び出しています。しかし、script-srcの後にhttp://XXX.herokuapp.comを追加しただけで、スクリプトの内容を読み込むことができます。このようなconnect-srcの後に追加する必要があるhttp://XXX.herokuapp.com Ajaxリクエストを、許可するには：

<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 *"> 

また、あなたはすべて（ロードスクリプト/ CSSの内容、Ajaxリクエストを可能にするためのデフォルトポリシーを設定する、default-src後にURLを追加することができます等々）。あなたはContent Security Policy Referenceを参照することができ、コンテンツセキュリティポリシーの詳細については

<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 *"> 

：だからメタタグは次のようにする必要があります。