WebkitBlobBuilder 上 createObjectURL 的 CSP 问题答案

【问题标题】：CSP issue with createObjectURL on WebkitBlobBuilderWebkitBlobBuilder 上 createObjectURL 的 CSP 问题
【发布时间】：2012-01-24 08:53:07
【问题描述】：

我的扩展程序中遇到了 CSP 问题...

我使用内容脚本来更改网站上的图像。我的内容脚本正在将他自己的图片添加到网站上，所以我收到了以下警告：

[Report Only] Refused to load image from 'chrome://extension/xxx/...' 
because of Content-Security-Policy. 
The page at https://plus.google.com/u/0/hot displayed insecure content 
from chrome://extension/xxx/....

所以我在清单中添加了以下行：

"content_security_policy": "default-src *"

警告消失了……

现在，我需要修改图像，为此，我将它们写入画布，获取 dataURL 并将其转换为 WebkitBlobBuilder 以避免由于 img 标签上的 src 更改而导致内存泄漏（使用 blob，我可以一旦它被使用就撤销它并释放内存......）

部分代码：

  //Code to create a blob from dataURI 
  base.dataURItoBlob = function(dataURI, callback) { 
      var byteString; 
      if (dataURI.split(',')[0].indexOf('base64') >= 0) 
          byteString = atob(dataURI.split(',')[1]); 
      else 
          byteString = unescape(dataURI.split(',')[1]); 
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      var ab = new ArrayBuffer(byteString.length); 
      var ia = new Uint8Array(ab); 
      for (var i = 0; i < byteString.length; i++) { 
          ia[i] = byteString.charCodeAt(i); 
      } 
      var bb = new WebKitBlobBuilder(); 
      bb.append(ab); 
      return bb.getBlob(mimeString); 
  }; 

  //Code to display the blob on an image : 
  //Write image on a canvas : 
  base.ctx.putImageData(cData, img.leftPos, img.topPos); 
  //Get a blob 
  var blobData = base.dataURItoBlob(base.canvas.toDataURL("image/png")); 
  //Create an URL from the blob 
  var urlfile = window.webkitURL.createObjectURL(dataBlob); 
  //set it on the img tag 
  img.attr("src", urlfile); 
  //Revoke the blob once loaded 
  img.load(function() { 
    window.webkitURL.revokeObjectURL(urlfile); 
  });

这段代码很好用.... 由于我的 img 标签上的 src 更改，不再有内存泄漏。

但是我有这个警告：

[Report Only] Refused to load image from 'blob:https%3A%2F 
%2Fplus.google.com/52ac1648-64d6-4fce-bb35-537d939d5007' because of 
Content-Security-Policy. 
The page at https://plus.google.com/u/0/hot displayed insecure content 
from blob:https%3A%2F%2Fplus.google.com/52ac1648-64d6-4fce- 
bb35-537d939d5007.

为什么内容策略中的 default-src 不适用于斑点？？

谢谢！

【问题讨论】：

听起来这可能是 CSP 实现中的一个错误，据我所知，blob 应该被认为是一个有效的方案：你能在new.crbug.com 提交一个错误吗？

标签： google-chrome-extension

【解决方案1】：

根据 CSP 规范：

https://dvcs.w3.org/hg/content-security-policy/raw-file/bcf1c45f312f/csp-unofficial-draft-20110303.html#data--uris-must-not-be-permitted

4.1.3 数据：不允许使用 URI

所以你必须在清单中将其列入白名单

"content_security_policy": "script-src 'self'; object-src 'self'; img-src data:

【讨论】：