“未找到 Content-Security-Policy 元标记。”我的 phonegap 应用程序中的错误

Question

在我的系统中更新 Cordova 5.0 后，我创建了新的应用程序。当我在设备上测试我的应用程序时，控制台日志中出现错误：

No Content-Security-Policy meta tag found.
Please add one when using the Cordova-plugin-whitelist plugin.: 23.

我在头部添加元数据

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src: 'self' 'unsafe-inline' 'unsafe-eval'>

但同样的错误，在我使用应用内浏览器插件和其他 7 个网站链接的应用程序中。

Answer 1

添加cordova-plugin-whitelist 后，您必须告诉您的应用程序允许访问所有网页链接或特定链接（如果您想保持特定链接）。

您可以简单地将其添加到您的 config.xml，它可以在您的应用程序的根目录中找到：

推荐在文档中：

<allow-navigation href="http://example.com/*" />

或：

<allow-navigation href="http://*/*" />

来自插件的文档：

导航白名单

控制 WebView 本身可以导航到哪些 URL。适用于 仅限顶级导航。

怪癖：在 Android 上，它也适用于非 http(s) 方案的 iframe。

默认情况下，只允许导航到 file:// URL。允许 其他 URL，您必须将标签添加到您的 config.xml：

<!-- Allow links to example.com -->
<allow-navigation href="http://example.com/*" />

<!-- Wildcards are allowed for the protocol, as a prefix
     to the host, or as a suffix to the path -->
<allow-navigation href="*://*.example.com/*" />

<!-- A wildcard can be used to whitelist the entire network,
     over HTTP and HTTPS.
     *NOT RECOMMENDED* -->
<allow-navigation href="*" />

<!-- The above is equivalent to these three declarations -->
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />

Answer 2

您必须在应用的 index.html 的 head 部分添加 CSP 元标记

根据https://github.com/apache/cordova-plugin-whitelist#content-security-policy

内容安全政策

控制允许发出哪些网络请求（图像、XHR 等）（直接通过 webview）。

在 Android 和 iOS 上，网络请求白名单（见上文）不 能够过滤所有类型的请求（例如<video> & WebSockets 没有被屏蔽）。因此，除了白名单之外，您还应该使用 Content Security Policy <meta> 标记在您的所有页面上。

在 Android 上，系统 webview 中对 CSP 的支持以 KitKat（但适用于使用 Crosswalk WebView 的所有版本）。

以下是您的.html 页面的一些示例 CSP 声明：

<!-- Good default declaration:
    * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
    * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
    * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
        * Enable inline JS: add 'unsafe-inline' to default-src
        * Enable eval(): add 'unsafe-eval' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">

<!-- Allow requests to foo.com -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' foo.com">

<!-- Enable all requests, inline styles, and eval() -->
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

<!-- Allow XHRs via https only -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:">

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

Answer 3

您的元标记中有错误。

你的：

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src: 'self' 'unsafe-inline' 'unsafe-eval'>

更正：

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

注意“script-src”后面的冒号，以及元标记的结束双引号。

Answer 4

对我来说，重新安装 whitelist 插件就足够了：

cordova plugin remove cordova-plugin-whitelist

然后

cordova plugin add cordova-plugin-whitelist

似乎从以前版本的 Cordova 更新不成功。

Answer 5

对我来说，问题在于我使用的是过时版本的 cordova android 和 ios 平台。所以升级到 android@5.1.1 和 ios@4.0.1 解决了它。

您可以升级到这些特定版本：

cordova platforms rm android
cordova platforms add android@5.1.1
cordova platforms rm ios
cordova platforms add ios@4.0.1

Answer 6

还有一个关于连接的问题。有些安卓版本可以连接，有些不能。所以还有另一种解决方案

在 AndroidManifest.xml 中：

<application ... android:usesCleartextTraffic="true">
        ...
    </application>

只需添加 'android:usesCleartextTraffic="true"'

问题终于解决了。