Meteor/Cordova项目CSP通配符无效，cdvfile图片加载遭拦截

我之前在Meteor+Cordova项目里也碰到过一模一样的问题！折腾了好一阵才搞定，给你分享几个靠谱的解决思路：

1. 先搞定Cordova的基础访问配置 #

首先别忽略了Cordova本身的安全规则，在项目根目录的config.xml里添加这两行，确保允许cdvfile的访问：

<access origin="cdvfile://*" />
<allow-intent href="cdvfile://*" />

这一步很关键，很多人只盯着网页的CSP，却忘了Cordova层面的权限控制。

2. 正确配置Meteor的Content-Security-Policy #

Meteor的CSP配置有点特殊，如果你的项目装了browser-policy包（默认可能会装），网页里的meta标签会被它覆盖，所以得在服务端代码里配置：

// server/main.js
import { BrowserPolicy } from 'meteor/browser-policy';

// 允许所有cdvfile来源的图片
BrowserPolicy.content.allowImageOrigin("cdvfile://*");
// 如果需要支持data URL预览（后面会提到），也加上这个
BrowserPolicy.content.allowImageDataUrl();

如果没装browser-policy，那可以用meta标签，但要确保img-src明确包含cdvfile://*，比如：

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

注意：通配符*不一定能覆盖cdvfile，因为它属于自定义协议，最好明确指定cdvfile://*。

3. 绕过CSP：把cdvfile转成Data URL预览 #

如果上面的配置还是不生效（有时候Meteor和Cordova的CSP整合会有奇怪的bug），可以直接把本地图片转换成Data URL来预览，这样完全不会触发CSP的限制：

// 假设你获取到的cdvfile路径是filePath
window.resolveLocalFileSystemURL(filePath, function(fileEntry) {
  fileEntry.file(function(file) {
    const reader = new FileReader();
    reader.onloadend = function(e) {
      // 把Data URL赋值给img的src
      document.getElementById('preview-image').src = e.target.result;
    };
    reader.readAsDataURL(file);
  }, function(error) {
    console.error('读取文件失败:', error);
  });
});

这个方法我亲测有效，不管CSP怎么设置，Data URL只要在img-src里允许data:就没问题，而大多数宽松的CSP都会包含这个。

4. 检查版本兼容性 #

如果以上都不行，可能是Meteor或Cordova插件的版本问题：

• 尝试升级Meteor：meteor update
• 升级Cordova文件插件：meteor add cordova:cordova-plugin-file@latest
  旧版本的插件可能对cdvfile的处理有缺陷，导致WebView识别不了路径。

内容的提问来源于stack exchange，提问作者inaplaY