如何在 Apache Cordova 应用程序中允许远程图像 src URL

Question

我正在将 create-react-app 迁移到 Apache Cordova。我的静态图像的相对 URL 正在工作。例如：./images/path/to/file.jpeg

但在 iOS 模拟器中，我无法引用 S3 存储桶中的远程图像源。例如：//s3-us-west-2.amazonaws.com/bla/bla/bla/8CCE-B64FD7247407.jpeg?1617374606

我认为这是一个安全配置问题，但我不确定。这是目前在我的 config.xml 文件中的内容：

    <access origin="*" allows-local-networking='true' />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-intent href="*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <allow-intent href="*" />
    </platform>

我的 index.html 文件中目前没有 <meta http-equiv="Content-Security-Policy" content="...">。

我做错了什么？

更新 1&2

我尝试更新我的 config.xml 文件以包括：

<allow-intent href="//:*/*" />
<access origin='*' allows-arbitrary-loads-for-media='true' allows-arbitrary-loads-in-web-content='true' allows-local-networking='true' />

不幸的是，这没有用。

就像@DaveAlden 所建议的那样，看起来这可能是 CSP 问题...

我的原始 index.html 文件根本不包含 Content-Security-Policy 元标记，但是当我运行在浏览器中查看 cordova 应用程序并查看源代码时。这是我看到的：

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

现在我想我的问题是：CSP 来自哪里？还有，我该如何修改呢？

有那么一会儿，我一直在摸不着头脑，为什么远程图像在浏览器中工作，因为我的理解是 img-src 'self' 应该不允许 <img src="//:bla-bla.amazonaws.com/bla/bla" />。我认为部分解释是，当我使用开发工具检查文档的 <head> 时，我看到了一个 与查看源代码时不同的 CSP 标签。此 CSP 与运行宁 cordova run ....

之前我的 index.html 文件中当前的内容相匹配

似乎 Cordova 正在为 iOS 使用不同的默认 CSP，但不知何故在浏览器中覆盖了它。我很困惑。

** 更新 3**

我搜索了我的项目文件，发现神秘的 CSP（我在浏览器中看到的）与 cordova-plugin-whitelist README 上列出的默认“模板”策略相匹配。 <-- 这表明我的 src index.html 根本没有被使用，Cordova 正在退回到内部默认设置。

Answer 1

从

更改您的 CSP

img-src 'self'

至

img-src *

Answer 2

Rrrrrrrr...我发现我可以 debug the iOS simulator using Safari 并且 CSP 看起来是正确的！我在 Safari 和 Chrome 中仔细检查了这一点，它们也都显示了正确的 CSP。因此，当我单击“查看源代码”时，Firefox 似乎显示出一些令人困惑的东西（我仍然无法解释这部分），但这分散了对真正问题的注意力...

iOS 正在尝试使用不正确的 file:// 前缀请求远程图像文件。我认为这与 AWS URL 未指定协议这一事实有关。例如：//s3-us-west-2.amazonaws.com/bla/bla/...

浏览器似乎可以很好地处理这个问题。但是在iOS模拟器中，好像认为是本地文件。请注意，它有一个 file:// 前缀。

我将 API 更改为 return https://，现在它可以在模拟器中运行了。

如何在 Apache Cordova 应用程序中允许远程图像 src URL

How to allow remote image src URLs in Apache Cordova app

cordova

content-security-policy

phonegap