Cordova не получит ничего base64, независимо от того, что находится в CSP - PullRequest
Новая
       21

Cordova не получит ничего base64, независимо от того, что находится в CSP

0 голосов
/ 23 ноября 2018

Я использую плагин камеры 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 
            });
        })
    );
}

1 Ответ

0 голосов
/ 26 ноября 2018

Согласно вашему коду вы используете API Fetch для загрузки изображений в формате base64.

Если посмотреть на документы , API Fetch ограничен директивой 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:;
...