Categories
apache canvas cors javascript jcanvas

Tainted Canvas, due to CORS and SVG?

Iknow this has been asked often before, but after 3days trying to fix this i clearly need help.

I’ve had a problem for a while now. I been trying to do something like this (This is a simplified code):

var media = Array();
$(document).ready(function(){
img = new Image();
img.crossOrigin = "*";
img.src = "http://domain.com/pics/picture.svg";
img.width = 200;
img.height = 300;
img.onload = function(){
media['test'] = img;
///var layer = img;
$.jCanvas({
fromCenter: false
});
$("#collider").drawImage({
source: media['test'],
width: 200,
height: 300,
x: 0, y: 0,
click: function(layer){
alert(layer.eventX);
}
});
var pixelData = document.getElementById("collider").getContext('2d').getImageData(50, 50, 20, 20).data;
console.log(pixelData);//*/
}
});

The problem is that the canvas gets tainted. Because of that I can’t get any pixel data.

I’ve tried to set the access control origin headers with the following code in .htaccess:

# with AJAX withCredentials=false (cookies NOT sent)
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Headers "X-Accept-Charset,X-Accept,Content-Type"
# with AJAX withCredentials=true (cookies sent, SSL allowed...)
SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Headers "X-Accept-Charset,X-Accept,Content-Type"

And when i checked the headers in the browser when surfing to the image URL, they seemed to be working(All headers are sent as they should) . But when they are loaded via javascript somehow they aren’t(No headers are sent at all, when inspected in browser) and because of that the canvas gets tainted

My questions:
1) Why doesn’t my .htaccess file allow cross-orgin sharing of data?
2) Why do i even have a problem with cross-origin data since both my html, javascript and image file are hosted on the same domain?

Additional info:
Server: Ubunthu LTS 12.04, Apache2

EDIT
I tried to change picture.svg to a .jpg pic instead and now everything works, so apparently the problem seems to derive from the included .svg file.

Anyone that know how to do this with .svg files?