Gle*_*enn 25 security html5 canvas cross-domain cors
问题:哪些浏览器版本支持Canvas中使用的跨域图像的 CORS(跨源资源共享)标头？
CORS可以应用于跨域XMLHttpRequests和图像请求.这个问题是关于图像请求 我常见的浏览器版本兼容性 http://caniuse.com/cors对此问题不清楚,谷歌搜索没有产生好的结果.
我确实找到了一个最近的Chrome开发博客,暗示CORS支持在现代浏览器中广泛传播,但可能因WebGL安全问题而中断.
http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
关于CORS的更多细节:
我们正在考虑使用canvas和CORS与跨域图像请求的可行性,如W3C工作草案http://www.w3.org/TR/cors/#use-cases中所述.html canvas使用CORS以类似于flash使用crossdomain.xml的方式允许跨域资源使用.基本上,我们想要读取/编辑图像数据像素,我们不想使用相同的原始代理服务器.
通常,如果图像是跨域加载并与html画布一起使用,则使用canvas.toDataURL()等函数访问像素会引发安全性错误.但是,如果提供映像的服务器添加了这样的标头,则应允许跨域使用.
access-control-allow-origin: *
我们最关心的浏览器:
我们计划使用flash来解决IE缺乏画布支持的问题,因此对于有CORS问题的桌面浏览器我们也可以这样做,但是在移动闪存上不是一种选择,并且使用代理来使请求相同来源不是我们的用例中的一个选项.所以,我对Andriod,Iphone,IPAD浏览器对CORS的支持特别感兴趣.
Gle*_*enn 19
测试结果:坏消息,它似乎只适用于Chrome.所有其他浏览器(包括Android Mobile)都会出现如下错误:
Failed: DOM Exception: SECURITY_ERR (18)
移动设备 我测试了Android(三星galaxy内核版本2.6.32.9),Iphone和IPAD V1,它们都失败了.
您可以使用以下网址测试自己的移动设备:http: //maplarge.com/CrossOriginImageTest.html
测试脚本:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support</title>
<script type="text/javascript">
function initialize() {
//will fail here if no canvas support
try {
var can = document.getElementById('mycanvas');
var ctx = can.getContext('2d');
var img = new Image();
img.crossOrigin = '';
//domain needs to be different from html page domain to test cross origin security
img.src = 'http://lobbydata.com/Content/images/bg_price2.gif';
} catch (ex) {
document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex.Message + "</span>";
}
//will fail here if security error
img.onload = function () {
try {
var start = new Date().getTime();
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
var url = can.toDataURL(); // if read succeeds, canvas isn't dirty.
//get pixels
var imgd = ctx.getImageData(0, 0, img.width, img.width);
var pix = imgd.data;
var len = pix.length;
var argb = []; //pixels as int
for (var i = 0; i < len; i += 4) {
argb.push((pix[i + 3] << 24) + (pix[i] << 16) + (pix[i + 1] << 8) + pix[i + 2]);
}
var end = new Date().getTime();
var time = end - start;
document.getElementById("results").innerHTML = "<span style='color:Green;'>" +
"Success: Your browser supports CORS for cross domain images in Canvas <br>"+
"Read " + argb.length+ " pixels in "+ time+"ms</span>";
} catch (ex) {
document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex + "</span>";
}
}
}
</script>
</head>
<body onload="initialize()">
<h2>Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support</h2>
<h2><a href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">What is CORS Image Security?</a></h2>
<h1 id="results" style="color:Orange;">Testing...</h1>
<canvas id="mycanvas"></canvas>
<br />
<a href="/Example/List">More Examples</a>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
14360 次 |
| 最近记录： |