chrome扩展-将外部照片加载到img中-避免混合内容[重复]

Question

我正在编写一个 chrome 扩展程序（内容脚本），它从 api 获取一些照片 url 并将其显示在当前页面的某个位置。

问题是有时照片的 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”的图片已被阻止 通过跨域资源共享策略加载：否 '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/"。

我是否应该更改我的 chrome 扩展程序的 CSP 以以某种方式包含所有图像？ 还有其他方法吗？ 我想要的只是在后台简单地临时下载一个 jpg，并在 content-script html 中使用它。

谢谢。

Answer 1

（这不是问题的正确解决方案，但现在它解决了我的痛苦）

这个问题可以通过使用 3rd-party ssl 代理服务完全避免，这个对图片很有效：https://images.weserv.nl/

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";
}