Closed Bug 935069 Opened 11 years ago Closed 8 years ago

CORS enabled data:URL images fail to load

Categories

(Core :: DOM: Security, defect)

x86_64
Windows 7
defect
Not set
normal

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: stefankienzle.de, Unassigned)

References

()

Details

(Whiteboard: [domsecurity-backlog])

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0 (Beta/Release)
Build ID: 20130910160258

Steps to reproduce:

I want to loaded CORS enabled data:URL images (in JS or HTML) - both cases are failing.
JS:
var img = document.createElement('img');
img.onload = function () {
 ...
};
img.crossOrigin = '';
img.src = <data-url>;

HTML:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFa2tr3Nzc////HKA8dAAAAD9JREFUeNpiYCAAmMCAkQkrTaQ0DkAdaZx2AxmMQAAmYUwmGDmoXU6ZNCPCl5jkoHY5ZU4jyt+D0uV4DQcIMADuxwY6Y1aBvAAAAABJRU5ErkJggg==" crossorigin />


Actual results:

The image doesn't load. This is the error message from the dev console:
[18:15:30.599] "Error loading data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFa2tr3Nzc////HKA8dAAAAFJJREFUeNrs1KEOACAIBUDh/z/aGZ3FoYFwBIPhjXGDMT5V7hWZhZ8jplbNYz7NplcMKVJXMRGrx7eXlJ0iRcr1I2WnSJFy/UjZKVKkuo54CjAAICEkZDISTsMAAAAASUVORK5CYII="


Expected results:

The image should be loaded.
I want put the data-url image into canvas as background pattern. For this i use the fabric.js library. Since a change for crossOrigin support at fabric.js (https://t.co/krQ25hqXgu) my data-url images no longer work.
Tested on latest Aurora (20131111004004) - none of the images are loaded.
On Chrome only the first one appears. All three images load in Opera, Safari and IE9. Setting as new.
Status: UNCONFIRMED → NEW
Component: Untriaged → ImageLib
Ever confirmed: true
Product: Firefox → Core
Updated the testcase: http://jsfiddle.net/Kienz/7bJ99/
Images with crossOrigin="" served from foreign server without "Access-Control-Allow-Origin" header also fail.
Confirmed with http://fiddle.jshell.net/Kienz/7bJ99/show/ against Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0 ID:20140228130532 CSet: 8abc76dedec2

MSIE 11 loads all images, Chrome 35 fails to load green + pink.
Component: ImageLib → DOM: Security
Version: 25 Branch → Trunk
Has there been any progress with this? I'm basically trying to load an image from a data URL and then draw it on a canvas, but in order to keep the canvas clean I need to set the crossorigin attribute on the image, which causes this error. Is there a workaround I can try?
Whiteboard: [domsecurity-backlog]
Kamil, Matt, can anyone check if you can still reproduce this error, and if so post the webconsole output?
Flags: needinfo?(mwobensmith)
Flags: needinfo?(kjozwiak)
This seems to work in Fx45 and beyond.
Flags: needinfo?(mwobensmith)
Flags: needinfo?(kjozwiak)
To be clearer, I can see all three images in the provided URL, and tests created using the information in comment 0 appear to function correctly. I don't see a bug in the latest Firefox.
That's what I thought that AsyncOpen2() will take care of such problems.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.