时间戳

首页 > 解决方案 > 无论 CSP 中有什么，Cordova 都不会获取任何 base64

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

问题描述

我正在使用 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:;
" />

...但是我已经尝试了在互联网上可以找到的所有其他 CSP。不管里面有什么，我的控制台总是记录：

“拒绝连接到 'data:image/jpg;base64... 因为它违反了文档的内容安全策略。”，来源： 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 
            });
        })
    );
}

标签： javascriptcordovabase64cordova-pluginscontent-security-policy

解决方案

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

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

HTTP Content-Security-Policy (CSP)connect-src指令限制可以使用脚本接口加载的 URL。受限制的 API 有：

  • <a> ping,
  • Fetch,
  • XMLHttpRequest,
  • WebSocket， 和
  • EventSource.

因此，我们必须通过添加到指令中来更改您connect-src以接受数据 URL ，如下所示：data:

connect-src * data: ws: wss:;

推荐阅读