chrome extension - загрузить внешнюю фотографию в img - избегать смешанного содержимого

Question

Я пишу chrome extension (скрипт контента), который получает некоторый URL-адрес фотографии из api и показывает его в некотором месте на текущей странице.

Проблема в том, что иногда URL-адрес фотографии - это http (на фото, размещенном на веб-сайте, а не на моем сервере), но текущая страница - https, что приводит к ошибкам смешанного содержимого.

Итак, я попытался использовать сценарий background.js, отправив ему сообщение из моего контент-скрипта, чтобы загрузить изображение.

Я попробовал два метода для загрузки и сохранения изображения в background.js -

function getImageDataURL(url, callback) { 
    var data, canvas, ctx; 
    var img = new Image(); 
    img.setAttribute('crossOrigin', 'anonymous'); 
    img.onload = function() { 
    canvas = document.createElement('canvas'); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 
    callback(canvas.toDataURL()); 
    }; 
    img.src = url; 
} 

, который не удается из:

Изображение из происхождения «http://www.not-my-server.com» был заблокирован загрузка по политике совместного использования ресурсов Cross-Origin: Нет Заголовок «Access-Control-Allow-Origin» присутствует на запрошенном ресурсе . Происхождение 'chrome-extension: // ...' поэтому не разрешено. доступ.

, а также:

jQuery.ajax({ 
    url: url, 
    //data: myData, 
    type: 'GET', 
    crossDomain: true, 
    dataType: 'jsonp', 
    success: function() { callback(false) }, 
    error: function() { callback(true) } 
    }); 

Что не удалось из-за:

Отказался загрузить сценарий 'http://www.not-my-server.com/ ...', потому что он нарушает следующего содержания директивы политики безопасности: "script-src 'self' https: //*.my-server.com https://localhost:4443/".

Должен ли я изменить свой CSP с расширением chrome, чтобы каким-то образом включить все изображения? Есть ли другой способ сделать это? Все, что я хочу, это просто временно загрузить jpg в фоновом режиме и использовать его в html-скрипте контента.

Спасибо.

Answer 1

(Это не является правильным решением для вопроса, но сейчас он решает мою боль)

Эта проблема может быть предотвращена полностью с помощью третьей стороны SSL прокси-сервиса, это работает хорошо изображения:

var url = "http://some-website.com"; 
var secured_url; 
if (url.indexOf("https://") == 0) { 
    secured_url = url; 
} else { 
    // remove the protocol from the passed-in url 
    secured_url = "//images.weserv.nl/?url=" + url.substring(7) + "&h=60&w=60"; 
}