Cordova-拒绝从设备连接到api(内容安全策略) [英] Cordova - Refused to connect to api from device (Content Security Policy)

问题描述

我正在使用Visual Studio的Apache Cordova工具.

I am working with Visual Studio's Tools for Apache Cordova.

当我使用Ripple构建应用程序时，一切都很好.但是当我将其构建到我的android设备上时，该应用程序拒绝连接到我的外部API.

When I build the app with Ripple, all is well. But when I build it to my android device, the app refuses to connect to my external API.

这是JavaScript控制台日志中的错误:

This is the error in the JavaScript Console log:

拒绝连接到" http://XXX.herokuapp.com/api/posts/0/5 "，因为它违反了以下内容安全策略指令:"default-src'self'数据:gap: https://ssl.gstatic.com 'unsafe-eval'".

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

请注意，未明确设置"connect-src"，因此"default-src"为 用作后备.

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

并且:

错误:无法在"XMLHttpRequest"上执行打开":拒绝 连接到"http://XXX. herokuapp. com/api/posts/0/5'

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，但在我的设备上仍然无法使用.

My API is built with Node.js and express. There is Access-Control-Allow-Headers in my server.js, 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'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

我也曾尝试将meta标签添加到index.html文件中，但没有成功.

I have 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 might be the problem?

推荐答案

来自错误消息.您正在JS中调用Ajax请求.但是您仅在script-src之后添加了http://XXX.herokuapp.com，这仅允许加载脚本内容.为了允许Ajax请求，需要在connect-src之后添加http://XXX.herokuapp.com，如下所示:

From the Error Message. You are calling Ajax Request in your JS. But you only added http://XXX.herokuapp.com after script-src, which only allows loading the script content. To allow the Ajax request, http://XXX.herokuapp.com needs to be added after connect-srclike 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 *">

或者，您可以在default-src之后添加URL，它设置允许所有内容(加载脚本/CSS内容，Ajax请求等)的默认策略.因此meta标签应该是这样的:

Alternatively, you can add the URL after default-src, which sets a default policy for allowing everything(loading script/CSS contents,Ajax Request and so on). So the meta Tag should be 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 detailed information about Content Security Policy you can refer to Content Security Policy Reference.

这篇关于Cordova-拒绝从设备连接到api(内容安全策略)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！