CDN Instagram 照片/视频的污染画布。 CORS 不工作？答案

【问题标题】：Tainted canvas for CDN Instagram photos / videos. CORS not working?CDN Instagram 照片/视频的污染画布。 CORS 不工作？
【发布时间】：2014-08-19 10:57:23
【问题描述】：

[目标]

我的主要目标是允许用户仅使用现代浏览器资源压缩和下载所有 Instagram 加载的图像元素。我目前正在使用接受文件作为 base64 数据和二进制数据的 JSZip 库。为此，我需要通过 tag 和 getImageData() 东西访问原始数据。

[背景]

Instagram API 通过 API 端点提供了一组我需要的最近图像：

https://api.instagram.com/v1/tags/snow/media/recent.

Instagram 指定了一些跨域策略：

https://api.instagram.com/crossdomain.xml

Instagram API 以 CDN 方式提供文件 url，导致图像地址如下：

http://scontent-a.cdninstagram.com/hphotos-xaf1/outbound-distilleryimage8/t0.0-17/OBPTH/57dc39f0a10c11e3a9af0eddfe5726fc_6.jpg

[问题] - canvas.toDataURL

我已经尝试过这种解决方案：

<HTML>
<canvas id="canvas"></canvas>
<HTML>

<SCRIPT>
var canvas = $("#canvas1)[0];
var ctx = canvas.getContext('2d');

var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'http://scontent-b.cdninstagram.com/hphotos-xfp1/outbound-distilleryimage2/t0.0-17/OBPTH/2d160152a10b11e39df312c88b6315b6_6.jpg'
img.onload = function(x) {
    ctx.drawImage(img, 0, 0);
    canvas.toDataURL("image/jpg"); Raise the following error:
}
<SCRIPT>

*XMLHttpRequest cannot load http://scontent-b.cdninstagram.com/hphotos-xfp1/outbound-distilleryimage2/t0.0-17/OBPTH/2d160152a10b11e39df312c88b6315b6_6.jpg?_t=11234. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8084' is therefore not allowed access*

[相关]

看起来 crossdomain.xml 与 CDN 提供的内容无关。因此，当我尝试从渲染图像的画布中调用 getImageData 时，我陷入了受污染的画布警告中
在 img.src 属性之前指定 img.crossOrigin = 'Anonymous' 不会影响结果。
在浏览器中右键单击图像可以让我从 Instagram CDN 下载当前渲染的图像。奇怪？
CDN 似乎不允许 JSONP 请求获取图像内容。（不调用图像 url 的回调参数）。我已经尝试过使用 jQuery ajax。
JSZip 允许通过 Uint8Array 使用 base64 格式甚至二进制数据的文件。我已经尝试使用 XMLHttpRequest 将二进制图像下载到 CDN，但收到了相同的跨域警告，取消了请求。

【问题讨论】：

Instagram 好像不支持 cors，有两个 google 群组讨论过它one as recent as November。另一种解决方案是使用服务器端技术下载图像，然后从您自己的域中提供它们。但是我认为这违背了您的应用程序的目的。
@Loktar，显然你是对的。但是，请帮助我澄清这个问题：这是一种 CDN/架构问题，而不是 Instagram 政策指令，对吧？由于我同时拥有用户的 accessToken 和 Instagram 的 crossdomain.xml，因此可以下载。

标签： javascript html5-canvas cors instagram

【解决方案1】：

Instagram 允许用户下载照片，但您要做的是通过 javascript 压缩画布的内容。这是设计不允许的，因为您的 javascript 代码在压缩位时可能存在安全问题（缓冲区溢出等），从而导致用户出现安全问题。解决方案是在亚马逊上向include these lines 询问instagram CDN，因为他们目前不支持他们：

<CORSConfiguration> 
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

与此同时，您可以使用正确的 CORS 标头构建您的 own server that proxies the images，如下所述：

var http = require('http');
var request = require('request');
http.createServer(function(req, res) {
  if (req.url.match(/path=(.*)/))) {
    res.setHeader('access-control-allow-origin'), '*');
    request.get(req.url.match(/path=(.*)/)[1].pipe(res);
  } else {
  res.statusCode = 404;
  res.end();
  }
}).listen(8000);

这将允许您在客户端使用 JSZip（您可以在 Heroku 上免费托管它）。

【讨论】：