Question

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

问题在于，有时照片网址是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”标头资源。因此不允许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，并在内容脚本html中使用它。

感谢。

Answer 1

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

使用第三方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";
}

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

1 个答案: