Cordova 不会获取任何 base64，无论 CSP 中有什么

Question

我正在使用 Cordova 的相机插件来让我的应用程序拍照，但到目前为止，它无法对返回的数据执行任何操作。

我已经放弃尝试从文件系统加载它 URL，现在尝试使用 base64。

我的 CSP 是：

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

...但是我已经尝试了我可以在 Internet 上找到的所有其他 CSP。无论那里有什么，我的控制台总是记录：

"Refused to connect to 'data:image/jpg;base64... because it violates the document's Content Security Policy.", source: http://localhost:8080/js/main.js"

有谁知道为什么会这样，或者我将如何解决它？

将图片数据转为文件的代码为：

navigator.camera.getPicture(response => {
    this.urltoFile('data:image/jpg;base64,'+response, 'test.jpg')
        .then(file => {
            console.log(file);
        })
    }, () => {}, {
    destinationType : navigator.camera.DestinationType.DATA_URL,
})

...urlToFile 函数是：

urltoFile(url, filename){
    let mimeType = (url.match(/^data:([^;]+);/)||'')[1];

    return (fetch(url)
        .then(res => {
            return res.arrayBuffer();
        })
        .then(buf => {
            return new File([buf], filename, { 
                type: mimeType 
            });
        })
    );
}

Answer 1

根据您的代码，您正在使用 Fetch API 将图片下载为 base64。

查看 docs，Fetch API 受 connect-src 指令限制（重点是我的）：

The HTTP Content-Security-Policy (CSP) connect-src directive restricts the URLs which can be loaded using script interfaces. The APIs that are restricted are:

<a> ping,

Fetch,

XMLHttpRequest,

WebSocket, and

EventSource.

所以我们必须通过将 data: 添加到指令中来改变您的 connect-src 以接受 data Urls，如下所示：

connect-src * data: ws: wss:;

Cordova 不会获取任何 base64，无论 CSP 中有什么

Cordova won't fetch anything base64, no matter what's in the CSP

javascript

base64

cordova

content-security-policy

cordova-plugins